tosijs-ui 1.17.0 → 1.17.2

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # Changelog
 
+## 1.17.2
+
+> Components carry only the icons they draw, and `<tosi-affix>` centres a caption on its
+> content. Nothing to change on upgrade. An app that imports components one at a time ships
+> about 20 kB gzip less per component; **`dist/iife.js` grows 1.8 kB** (508.0 kB gzip),
+> because the whole set is now assembled from per-icon modules.
+
+### Added
+
+- `tosijs-ui/icons/<name>` exports one icon as a function, the same one `icons.name` gives:
+  `import { chevronDown } from 'tosijs-ui/icons/chevronDown'`. Each module registers its icon
+  once however many modules import it, and imports any icon it is drawn from (`chevronDown`
+  brings `chevronRight`), so a bundler keeps only the icons something imports. `delete` and
+  `package` export `deleteIcon` and `packageIcon`.
+- `tosijs-make-icons` gains `--modules <dir>` (one string module per icon, plus an index whose
+  default is the whole set), `--creators <dir>` (one creator module per icon) and
+  `--core <specifier>` (where creators import `iconCreator` from; default
+  `tosijs-ui/icon-core`).
+
+### Changed
+
+- Components import only the icons they draw, not all 320. Measured gzip, each imported alone:
+  `tosiTag` 4.4 kB, `tosiCarousel` 6.2 kB (was 23.8), menu 13.9 kB (was 34.2), select 13.7
+  (34.0), tabs 15.1 (35.4), month 15.9 (36.1), table 29.1 (48.9), rating 5.0 (25.5). Importing
+  `tosijs-ui` itself still brings the whole set, so nothing changes for an app that does.
+- An icon a caller names (a menu item's `icon: 'folder'`, a select option's, a rating's) still
+  draws. On a page that has not loaded the whole set it appears a moment late, like a web font,
+  while the set loads. Import the icon's module, pass the icon itself where an element is
+  accepted (`icon: folder()`), or import `tosijs-ui/icons` up front, to draw it at once.
+
+### Fixed
+
+- `<tosi-affix>`: a centred caption is centred on its content, not on the content's cell. A
+  fixture wider than fixed-width content (the doc page's own "a caption, centred below")
+  widened the content's column, and the content sat at its start; the same happened in any
+  affix wider than its content, where an `ne` or `e` fixture also stood off the content's edge.
+  The content now takes the fixture's alignment with auto margins, which leave content that
+  fills its cell untouched.
+- `tosijs-ui/icons/data/<name>` shipped stale icons: the per-icon modules were written once in
+  1.4.1 and never regenerated, so 54 of 313 differed from the icons actually drawn (including
+  1.17.0's open-path fix) and six (`fatArrowDown/Left/Right/Up`, `pin`, `shift`) had no module.
+  The build now writes them from the same data, and a test fails if they drift.
+
+## 1.17.1
+
+> Fixes from the 1.17.0 review, plus elastic table columns that can be dragged narrower. Nothing
+> to change on upgrade. **`dist/iife.js` is unchanged in size** (506.2 kB gzip).
+
+### Security
+
+Both affect sites that turn on the accessibility mode in **1.17.0 and its betas**; no advisory is
+filed, because each needs the build running and the reach is local. Upgrade if you build with
+the accessibility mode on a shared machine or network.
+
+- The accessibility audit's temporary server bound every interface, and its root check was a bare
+  prefix, so for the length of the audit a request like `/..%2fdocs-private/key.txt` was served a
+  sibling directory whose name starts with the output directory's. It now listens on localhost
+  only and contains paths with root + separator.
+- The audit's payload and the altText corpus, which can hold hidden pages, were written to
+  predictable names in the shared temp directory and never removed. They now go in private
+  temporary directories removed when the build ends.
+
+### Added
+
+- With a `dist-sizes.json` in the project root (`bun run sizes` writes one in this repo), the site
+  build prints the bundle's gzip size change since that baseline and the version it was recorded
+  at.
+
+### Fixed
+
+- `<tosi-table>`: an elastic column can now be dragged narrower than the width it is drawn at.
+  The last elastic column's edge is the table's edge, so dragging it moved nothing and quietly
+  shrank its `width` to the minimum, and a middle one fought the columns beside it. A drag now
+  fixes the dragged column, and the elastic columns to its left, at the width they are drawn at
+  (it sets `width` and `elastic: false`), so the edge follows the pointer exactly. Elastic
+  columns to its right absorb the difference; with none, the space it gives up is left beside
+  the columns, painted with `--tosi-table-fill`.
+- Under path or query routing, clicking a `/slug/#heading` link in a doc puts the hash in the URL
+  and scrolls to the heading. It pushed the page's URL without the hash and landed at the top.
+- The accessibility mode's axe audit and DAISY Ace run with a time limit (the audit's worst case
+  plus a minute; Ace ten minutes). One that hangs is stopped and reported as not having run,
+  instead of hanging the build, and a build stopped with Ctrl-C or SIGTERM stops them too,
+  instead of leaving them and their browser running.
+- The ePub accessibility check accepted any program named `ace` on PATH as DAISY Ace, so an
+  unrelated tool could decide whether a book claims WCAG conformance. It now accepts only an
+  `ace` inside a `@daisy/ace` package; another is skipped and named in the reason the check did
+  not run, and a real Ace later on PATH is still found.
+- `llms.txt` link titles no longer carry the project suffix ("Menus — tosijs-ui" on every line).
+- When a delegated build is refused because the dev server has a different site config, the
+  message now says that a refusal on every build means the config computes a value per process
+  (`Date.now()`, a random id, an environment variable one process lacks), and how to fix that.
+
 ## 1.17.0
 
 > Accessibility and SEO for doc sites, and the components themselves passing WCAG 2.2 AA. A doc

package/README.md

@@ -53,7 +53,7 @@ The `tosijs-ui` iife build bundles `tosijs`, `tosijs-ui`, `marked` and — as of
 **CodeMirror** into a single minified javascript source file. You can access `xinjs` and
 `xinjsui` as globals which contain all the things exported by `tosijs` and `tosijs-ui`.
 
-> **Size (1.16.21):** ~484KB gzip, up from ~120KB in 1.6. Two things dominate it, and
+> **Size (1.17.0):** ~506KB gzip, up from ~120KB in 1.6. Two things dominate it, and
 > `bun build --format iife` cannot
 > code-split, so `<tosi-code>`'s lazy CodeMirror import is flattened into this bundle
 > whether or not the page uses an editor. **If you don't need `<tosi-code>`, use the ESM

package/bin/make-icon-data.js

@@ -16,6 +16,15 @@ Ingests SVG files from icon directories and generates an icon-data module
 - `--input <dir1,dir2,...>` — directories to scan (default: `./icons`)
 - `--output <path>` — output file (default: `./src/icon-data.ts`)
 - `--optimize <true|false>` — round coordinates based on viewBox size (default: true)
+- `--modules <dir>` — also write one module per icon into `dir` (`export const name = '…'`),
+  plus an `index`, so code can import just the icons it draws. tosijs-ui's own build writes
+  `src/icons/data/` this way; files there that are no longer icons are removed.
+- `--creators <dir>` — with `--modules`, also write one module per icon that exports it as a
+  function, `export const chevronDown = iconCreator(…)`, registering it once when it loads.
+  A redirect's module imports the icon it redirects to. tosijs-ui's own build writes
+  `src/icons/` this way, published as `tosijs-ui/icons/<name>`.
+- `--core <specifier>` — where `--creators` modules import `iconCreator` from (default
+  `tosijs-ui/icon-core`)
 
 ### Examples
 
@@ -99,6 +108,9 @@ const defaultOptions = {
   input: './icons',
   output: './src/icon-data.ts',
   optimize: true, // Optimize coordinate precision based on viewBox size
+  modules: '', // A directory to also write one module per icon into
+  creators: '', // A directory to also write one creator module per icon into
+  core: 'tosijs-ui/icon-core', // Where creator modules import iconCreator from
 }
 const flags = Object.keys(defaultOptions)
 
@@ -128,7 +140,14 @@ for (const flag of flags) {
 }
 
 // Destructure options for easier use
-const { input: iconDirectories, output: outputFilePath, optimize } = options
+const {
+  input: iconDirectories,
+  output: outputFilePath,
+  optimize,
+  modules: modulesDir,
+  creators: creatorsDir,
+  core: coreSpecifier,
+} = options
 const isTypescript = outputFilePath.endsWith('.ts')
 const shouldOptimize = optimize === true || optimize === 'true'
 
@@ -484,4 +503,151 @@ try {
 
 fs.writeFileSync(outputFilePath, source, 'utf8')
 
+/*
+One module per icon, so a component can import the handful it draws instead of all of them
+(tosijs-ui#3885). They are written from the same data in the same run, so they cannot drift
+from the combined module: the 1.4.1 copies were written once, by hand, and by 1.17 a sixth of
+them were wrong. A redirect's module holds the redirect, not its target; whoever registers
+it registers the target too.
+
+Files in the directory that are not icons any more are removed, but only ones this generator
+writes (a module that starts `export const` or an index of `export {` lines), so a stray file
+of someone else's survives.
+*/
+if (typeof modulesDir === 'string' && modulesDir !== '') {
+  const ext = isTypescript ? '.ts' : '.js'
+  fs.mkdirSync(modulesDir, { recursive: true })
+  /*
+  The export is the icon's name, unless that is not a name a module can bind: `delete` and (in
+  a module) `package` look like identifiers and are reserved, so they export `deleteIcon` and
+  `packageIcon` from `delete` and `package`, as the 1.4.1 modules did. Ask the parser, not a
+  pattern.
+  */
+  const bindable = (name) => {
+    try {
+      new Function(`"use strict"; let ${name}`)
+      return true
+    } catch {
+      return false
+    }
+  }
+  const valid = (name) => /^[A-Za-z_$][\w$]*$/.test(name)
+  const names = Object.keys(iconData).filter(valid)
+  const exportName = (name) => (bindable(name) ? name : name + 'Icon')
+  const skipped = Object.keys(iconData).filter((name) => !valid(name))
+  if (skipped.length > 0) {
+    console.warn(
+      `make-icon-data: no module for ${skipped.join(', ')} (not an identifier)`
+    )
+  }
+  const wanted = new Set([...names.map((n) => n + ext), 'index' + ext])
+  for (const file of fs.readdirSync(modulesDir)) {
+    if (wanted.has(file) || !file.endsWith(ext)) continue
+    const full = path.join(modulesDir, file)
+    const head = fs.readFileSync(full, 'utf8').slice(0, 13)
+    if (head.startsWith('export const') || head.startsWith('export {')) {
+      fs.rmSync(full)
+    }
+  }
+  for (const name of names) {
+    const file = path.join(modulesDir, name + ext)
+    const text = `export const ${exportName(name)} = ${JSON.stringify(
+      iconData[name]
+    )}\n`
+    if (!fs.existsSync(file) || fs.readFileSync(file, 'utf8') !== text) {
+      fs.writeFileSync(file, text, 'utf8')
+    }
+  }
+  /*
+  The index re-exports every icon by name and, as its default, the whole set keyed by icon
+  name (so `delete`, not `deleteIcon`). Code that needs every icon imports the default, which
+  is built from the same modules a component imports one at a time: one copy of each string in
+  a bundle that has both, not two.
+  */
+  const key = (n) => (/^[A-Za-z_$][\w$]*$/.test(n) ? n : quote(n))
+  fs.writeFileSync(
+    path.join(modulesDir, 'index' + ext),
+    names
+      .map((n) => `import { ${exportName(n)} } from './${n}.js'\n`)
+      .join('') +
+      `\nexport {\n${names.map((n) => `  ${exportName(n)},\n`).join('')}}\n` +
+      `\nexport default {\n${names
+        .map((n) =>
+          exportName(n) === n ? `  ${n},\n` : `  ${key(n)}: ${exportName(n)},\n`
+        )
+        .join('')}}\n`,
+    'utf8'
+  )
+  if (typeof creatorsDir === 'string' && creatorsDir !== '') {
+    writeCreators(creatorsDir, names, exportName, ext)
+  }
+}
+
 console.log(`Successfully generated icon data to: ${outputFilePath}`)
+
+/*
+A redirect draws another icon (`chevronDown` is `chevronRight90r`), so its creator module
+imports that icon's, and registering one registers what it needs. The icon a redirect draws
+is the longest icon name its value starts with, per `$`-stacked layer; a value that names no
+icon (a composition rule's) imports nothing and resolves the way any unregistered name does.
+*/
+function redirectTargets(name) {
+  const spec = iconData[name]
+  if (spec.startsWith('<')) return []
+  const targets = new Set()
+  for (const layer of spec.split('$')) {
+    let best = ''
+    for (const other of Object.keys(iconData)) {
+      if (
+        other !== name &&
+        layer.startsWith(other) &&
+        other.length > best.length
+      )
+        best = other
+    }
+    if (best) targets.add(best)
+  }
+  return [...targets]
+}
+
+function writeCreators(dir, names, exportName, ext) {
+  if (typeof modulesDir !== 'string' || modulesDir === '') {
+    throw new Error('make-icon-data: --creators needs --modules')
+  }
+  fs.mkdirSync(dir, { recursive: true })
+  let dataPath = path.relative(dir, modulesDir).split(path.sep).join('/')
+  if (!dataPath.startsWith('.')) dataPath = './' + dataPath
+  const named = new Set(names)
+  for (const name of names) {
+    const exported = exportName(name)
+    const lines = [
+      '// Generated by make-icon-data. One icon, registered when this module loads.',
+      `import { iconCreator } from ${quote(coreSpecifier)}`,
+      ...redirectTargets(name)
+        .filter((t) => named.has(t))
+        .map((t) => `import './${t}.js'`),
+      `import { ${exported} as spec } from '${dataPath}/${name}.js'`,
+      '',
+      `export const ${exported} = iconCreator(${quote(name)}, spec)`,
+      '',
+    ]
+    const file = path.join(dir, name + ext)
+    const text = lines.join('\n')
+    if (!fs.existsSync(file) || fs.readFileSync(file, 'utf8') !== text) {
+      fs.writeFileSync(file, text, 'utf8')
+    }
+  }
+  const wanted = new Set(names.map((n) => n + ext))
+  for (const file of fs.readdirSync(dir)) {
+    if (wanted.has(file) || !file.endsWith(ext)) continue
+    const full = path.join(dir, file)
+    if (!fs.statSync(full).isFile()) continue
+    if (
+      fs
+        .readFileSync(full, 'utf8')
+        .startsWith('// Generated by make-icon-data.')
+    ) {
+      fs.rmSync(full)
+    }
+  }
+}

package/dist/affix.d.ts

@@ -50,6 +50,12 @@ export declare class TosiAffix extends Component<AffixParts> {
             minHeight: string;
             position: string;
         };
+        ':host > [part="content"][data-align="center"]::slotted(*)': {
+            marginInline: string;
+        };
+        ':host > [part="content"][data-align="end"]::slotted(*)': {
+            marginInlineStart: string;
+        };
         ':host > [part="fixture"]': {
             display: string;
             flexDirection: string;

package/dist/affix.js

@@ -259,6 +259,17 @@ export class TosiAffix extends Component {
             // a positioned child of the content is placed against the content, not the fixture
             position: 'relative',
         },
+        /*
+        Content narrower than its cell — a fixed width in a wider affix, or under a fixture wider
+        than it — follows the fixture, so a centred caption is centred on the content and not on
+        the cell. Auto margins do nothing to content that fills its cell.
+        */
+        ':host > [part="content"][data-align="center"]::slotted(*)': {
+            marginInline: 'auto',
+        },
+        ':host > [part="content"][data-align="end"]::slotted(*)': {
+            marginInlineStart: 'auto',
+        },
         ':host > [part="fixture"]': {
             display: 'flex',
             flexDirection: 'var(--tosi-affix-direction)',
@@ -436,6 +447,14 @@ export class TosiAffix extends Component {
             borderRadius: outerCorners(cell.edge, placement.inside, 'var(--tosi-affix-radius, var(--tosi-border-radius, 4px))'),
         });
         this.style.setProperty('--tosi-affix-direction', cell.direction);
+        // beside the content, it hugs the edge it is on; above, below or inside, it lines up with it
+        const side = cell.edge === 'e' || cell.edge === 'w';
+        this.parts.content.dataset.align =
+            side && !placement.inside
+                ? cell.edge === 'e'
+                    ? 'end'
+                    : 'start'
+                : cell.justifySelf;
     }
     render() {
         super.render();

package/dist/babylon-3d.js

@@ -223,7 +223,8 @@ be used to load `.glb` files. Setting `src` calls this for you on connect.
 /*{ "parent": "Components", "headTitle": "<tosi-3d> Babylon.js wrapper (deprecated) — tosijs-ui", "description": "Deprecated: <tosi-3d> is a thin Babylon.js wrapper kept for compatibility. New 3D work should use the tosijs-3d package." }*/
 import { elements, withAttributes } from 'tosijs';
 import { scriptTag } from './via-tag.js';
-import { icons, svg2DataUrl } from './icons.js';
+import { svg2DataUrl } from './icon-core.js';
+import { xrColor as xrColorIcon } from './icons/xrColor.js';
 const noop = () => {
     /* do not care */
 };
@@ -310,7 +311,7 @@ export class B3d extends withAttributes({
             width: 80,
             backgroundColor: 'transparent',
             filter: 'drop-shadow(0 0 4px #000c)',
-            backgroundImage: svg2DataUrl(icons.xrColor()),
+            backgroundImage: svg2DataUrl(xrColorIcon()),
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',
             border: 'none',

package/dist/carousel.js

@@ -72,7 +72,8 @@ This is a minimalist carousel component that supports the usual stuff.
 */
 /*{ "parent": "Components", "description": "A minimal carousel with optional arrows and dots, several items per page, looping, and auto-advance that holds still while someone is looking." }*/
 import { elements, vars, withAttributes } from 'tosijs';
-import { icons } from './icons.js';
+import { chevronLeft as chevronLeftIcon } from './icons/chevronLeft.js';
+import { chevronRight as chevronRightIcon } from './icons/chevronRight.js';
 import { prefersReducedMotion } from './reduced-motion.js';
 const { button, slot, div } = elements;
 export class TosiCarousel extends withAttributes({
@@ -382,12 +383,12 @@ export class TosiCarousel extends withAttributes({
         }
     }
     content = () => [
-        div({ part: 'pager' }, button({ title: 'previous slide', part: 'back' }, icons.chevronLeft()), div(
+        div({ part: 'pager' }, button({ title: 'previous slide', part: 'back' }, chevronLeftIcon()), div(
         /*
         Focusable, so the strip can be scrolled from the keyboard (#3573); ← and → page it,
         like the arrow buttons.
         */
-        { title: 'slides', role: 'group', part: 'scroller', tabindex: 0 }, div({ part: 'grid' }, slot())), button({ title: 'next slide', part: 'forward' }, icons.chevronRight())),
+        { title: 'slides', role: 'group', part: 'scroller', tabindex: 0 }, div({ part: 'grid' }, slot())), button({ title: 'next slide', part: 'forward' }, chevronRightIcon())),
         div({ title: 'choose slide to display', role: 'group', part: 'progress' }),
     ];
     connectedCallback() {

package/dist/data-table.d.ts

@@ -15,7 +15,8 @@ export interface ColumnOptions {
      * Whether this column takes a share of the space left over when the columns add up to
      * less than the table's width. Elastic columns grow in proportion to their `width`, and
      * never shrink below it. Defaults to the table's `elastic`. A pinned column is never
-     * elastic: its sticky offset is its width.
+     * elastic: its sticky offset is its width. Resizing a column by dragging sets this to
+     * `false` on it and on the elastic columns to its left, at the widths they were drawn at.
      */
     elastic?: boolean;
     sort?: false | 'ascending' | 'descending';
@@ -502,9 +503,7 @@ export declare class TosiTable extends TosiTable_base {
     private focusCell;
     private handleKeyNav;
     connectedCallback(): void;
-    /** Where `col`'s right edge is drawn, from the left of the columns. */
-    private drawnEdge;
-    private widthForEdge;
+    private pinElasticThrough;
     private isElastic;
     private layoutColumns;
     setColumnWidths(): void;

package/dist/data-table.js

@@ -1000,8 +1000,11 @@ creator) and every column is elastic unless it says `elastic: false`, which is t
 get it for columns inferred from the data. Pinned columns are never elastic. Elastic
 columns take precedence over `full-width-header`.
 
-Dragging an elastic column's edge keeps the edge under the pointer; the other elastic
-columns give up or take the difference.
+Dragging a column's edge resizes it to exactly where you drop it, narrower than its share
+included. The drag fixes that column, and any elastic columns to its left, at the width
+they were drawn at (it sets their `width` and `elastic: false`, as a resize always sets
+`width`): elastic columns to its right take up or give back the difference, and with none
+to its right, the space it gives up is left beside the columns.
 
 ### Filling the space beside the columns
 
@@ -1310,7 +1313,10 @@ import { elements, vars, varDefault, tosiValue, getListItem, getListBinding, tos
 import { trackDrag } from './track-drag.js';
 import { naturalSorter } from './natural-compare.js';
 import { resolveRowGroupId, withForcedGroups, clusterByGroup, groupRenderMeta, groupCounts, } from './row-grouping.js';
-import { icons } from './icons.js';
+import { chevronRight as chevronRightIcon } from './icons/chevronRight.js';
+import { sortAscending as sortAscendingIcon } from './icons/sortAscending.js';
+import { sortDescending as sortDescendingIcon } from './icons/sortDescending.js';
+import { moreVertical as moreVerticalIcon } from './icons/moreVertical.js';
 import { valueRenderer, } from './value-renderer.js';
 import { fieldForProperty, collectErrors, coerceToSchema, fieldEditable, } from './schema-form/fields.js';
 import { getSchemaValidator, warnNoValidator } from './schema-form/validator.js';
@@ -2824,7 +2830,7 @@ export class TosiTable extends withAttributes({
                     if (item != null)
                         this.toggleRowDetail(item);
                 },
-            }, icons.chevronRight()));
+            }, chevronRightIcon()));
             return cell;
         }
         if (this.columnEditable(col)) {
@@ -2946,12 +2952,12 @@ export class TosiTable extends withAttributes({
         let sortIcon;
         switch (col.sort) {
             case 'ascending':
-                sortIcon = icons.sortAscending();
+                sortIcon = sortAscendingIcon();
                 ariaSort = 'descending';
                 break;
             case 'descending':
                 ariaSort = 'ascending';
-                sortIcon = icons.sortDescending();
+                sortIcon = sortDescendingIcon();
                 break;
         }
         // An expander column has nothing to sort by and should not be hidden by accident.
@@ -2963,7 +2969,7 @@ export class TosiTable extends withAttributes({
                     popColumnMenu(event.target, col);
                     event.stopPropagation();
                 },
-            }, sortIcon || icons.moreVertical())
+            }, sortIcon || moreVerticalIcon())
             : {};
         const cell = col.headerCell !== undefined
             ? col.headerCell(col)
@@ -3091,9 +3097,8 @@ export class TosiTable extends withAttributes({
             first drag on a fresh page into a text selection. See track-drag.ts, and #107.)
             */
             const prop = grabbed.prop;
-            let anchor = grabbed;
-            let anchorWidth = Number(grabbed.width);
-            let anchorEdge = this.drawnEdge(grabbed);
+            let anchor;
+            let anchorWidth = 0;
             let anchorDx = 0;
             const isTouchEvent = event.touches !== undefined;
             const touchIdentifier = isTouchEvent
@@ -3109,15 +3114,18 @@ export class TosiTable extends withAttributes({
                 const live = this.columns.find((c) => c.prop === prop);
                 if (!live)
                     return true;
+                // A click on the edge changes nothing: pin the columns on the first movement.
+                if (anchor === undefined && dx === 0) {
+                    return event.type === 'mouseup' || undefined;
+                }
                 if (live !== anchor) {
+                    this.pinElasticThrough(live);
+                    // The drag measures from where it started; a replaced column rebases on this step.
+                    anchorDx = anchor === undefined ? 0 : dx;
                     anchor = live;
                     anchorWidth = Number(live.width);
-                    anchorEdge = this.drawnEdge(live);
-                    anchorDx = dx;
                 }
-                const width = this.isElastic(live)
-                    ? this.widthForEdge(live, anchorEdge + (dx - anchorDx))
-                    : anchorWidth + (dx - anchorDx);
+                const width = anchorWidth + (dx - anchorDx);
                 live.width = width > this.minColumnWidth ? width : this.minColumnWidth;
                 this.setColumnWidths();
                 if (event.type === 'mouseup') {
@@ -3656,33 +3664,28 @@ export class TosiTable extends withAttributes({
         this.addEventListener('touchend', this.updateSelection);
         this.addEventListener('keydown', this.handleKeyNav);
     }
-    /** Where `col`'s right edge is drawn, from the left of the columns. */
-    drawnEdge(col) {
-        const cols = this.visibleColumns;
-        const { drawn } = this.layoutColumns(cols);
-        const index = cols.indexOf(col);
-        return drawn.slice(0, index + 1).reduce((sum, w) => sum + w, 0);
-    }
     /*
-    The width that draws an elastic column's right edge at `edge`, so a resize drag keeps the edge
-    under the pointer. An elastic column is drawn wider than its width and shares the leftover with
-    the others, so `width + dx` would move the edge by some fraction of dx. Its edge only ever
-    moves right as its width grows, so a bisection finds it.
+    Before a drag resizes `col`, fix it and every elastic column to its left at the width they are
+    drawn at. An elastic column's drawn width is not its width: the table's leftover space is shared
+    out over the elastic columns, so the last one's right edge is the table's right edge whatever
+    its width says, and dragging it narrower moved nothing (its width shrank to the minimum while
+    it stayed drawn wide). Once they are fixed, the dragged edge is the sum of fixed widths and
+    follows the pointer exactly; elastic columns to its right still share the leftover, and with
+    none, the leftover is the space beside the columns. Nothing moves when the drag starts: the
+    columns to the right are drawn at the same widths as before.
     */
-    widthForEdge(col, edge) {
-        const original = col.width;
-        let lo = this.minColumnWidth;
-        let hi = Math.max(lo, edge) * 64;
-        for (let i = 0; i < 40; i++) {
-            const mid = (lo + hi) / 2;
-            col.width = mid;
-            if (this.drawnEdge(col) < edge)
-                lo = mid;
-            else
-                hi = mid;
+    pinElasticThrough(col) {
+        const cols = this.visibleColumns;
+        const index = cols.indexOf(col);
+        if (index === -1)
+            return;
+        const { drawn } = this.layoutColumns(cols);
+        for (let i = 0; i <= index; i++) {
+            if (!this.isElastic(cols[i]))
+                continue;
+            cols[i].width = Math.round(drawn[i]);
+            cols[i].elastic = false;
         }
-        col.width = original;
-        return Math.round(hi);
     }
     isElastic(col) {
         return !col.pinned && (col.elastic ?? this.elastic);

package/dist/doc-browser.js

@@ -1011,7 +1011,14 @@ export function createDocBrowser(options) {
     const scrollToHashExample = () => {
         if (memoryRouting)
             return;
-        let hash = location.hash.replace(/^#/, '');
+        scrollToTarget(location.hash);
+    };
+    /*
+    Scroll to the element a `#hash` names in the content: the URL's hash on arrival (path and
+    query routing), or a clicked link's (memory routing, which never touches the URL).
+    */
+    const scrollToTarget = (rawHash) => {
+        let hash = rawHash.replace(/^#/, '');
         if (!hash)
             return;
         try {
@@ -1173,7 +1180,7 @@ export function createDocBrowser(options) {
     // User-initiated navigation: record the new location (history for path/query,
     // the onRouteChange callback for memory) and then render the doc. Every nav
     // click funnels through here so memory mode never touches window.history.
-    const go = (filename) => {
+    const go = (filename, hash = '') => {
         // If the source editor is open with unsaved changes, confirm before leaving;
         // on confirm it discards + closes, otherwise navigation is aborted (false).
         if (!confirmLeaveEditor())
@@ -1182,7 +1189,8 @@ export function createDocBrowser(options) {
             onRouteChange?.(slugFor(filename));
         }
         else {
-            const href = hrefFor(filename);
+            // The link's `#heading` goes into the URL, where showDoc's scrollToHashExample finds it.
+            const href = hrefFor(filename) + hash;
             /*
             A link to the document already showing REPLACES the entry rather than pushing one, as a
             native same-URL navigation does. Pushing left a duplicate the reader had to Back
@@ -1194,10 +1202,13 @@ export function createDocBrowser(options) {
             may want to come Back from.
             */
             const same = filename === String(app.currentDoc.filename) &&
-                document.location.hash === '';
+                document.location.hash === '' &&
+                hash === '';
             window.history[same ? 'replaceState' : 'pushState']({ href }, '', href);
         }
         navigateTo(filename);
+        if (memoryRouting)
+            scrollToTarget(hash);
         return true;
     };
     // Intercept clicks on internal doc links anywhere in the rendered content so
@@ -1222,27 +1233,7 @@ export function createDocBrowser(options) {
         if (filename === null)
             return;
         event.preventDefault();
-        if (!go(filename))
-            return;
-        /*
-        `/slug/#heading`: path routing gets the scroll from the URL (scrollToHashExample); memory
-        routing never touches the URL, so it goes to the heading itself, once the doc has drawn.
-        */
-        const hash = new URL(anchor.href, document.location.href).hash.slice(1);
-        if (memoryRouting && hash) {
-            requestAnimationFrame(() => requestAnimationFrame(() => {
-                let id = hash;
-                try {
-                    id = decodeURIComponent(hash);
-                }
-                catch {
-                    // a stray % — look it up as written
-                }
-                docContent
-                    .querySelector(`#${CSS.escape(id)}`)
-                    ?.scrollIntoView({ block: 'start' });
-            }));
-        }
+        go(filename, new URL(anchor.href, document.location.href).hash);
     });
     // ── Edit page source (Foundation B / #4) ──────────────────────────────────
     // The "view source" affordance opens a menu: edit the whole source file in a

package/dist/doc-system/doc-title.d.ts

@@ -17,3 +17,8 @@ export interface TitledDoc {
  * more specific label, so use it alone.
  */
 export declare function pageTitle(doc: TitledDoc, projectName?: string): string;
+/**
+ * "Menus — tosijs-ui" → "Menus": a `headTitle` often carries the suffix a headline or an index
+ * entry must not (the structured data's headline; llms.txt's link titles, #3867).
+ */
+export declare function withoutProjectSuffix(title: string, projectName: string | undefined): string;