@esportsplus/ui 0.56.4 → 0.57.0

package/scripts/file-tree-icons.test.mjs

@@ -0,0 +1,234 @@
+import assert from 'node:assert/strict';
+import { existsSync, readFileSync } from 'node:fs';
+import test from 'node:test';
+import { FOLDERS, NAMES, resolve, resolver } from '../src/components/editor/tree/icons.ts';
+import Elements from '../src/components/editor/tree/model.ts';
+
+
+const SVG = new URL('../storage/svg/', import.meta.url);
+
+const VARIABLES = readFileSync(new URL('../src/components/editor/tree/scss/variables.scss', import.meta.url), 'utf8');
+
+
+const file = (name) => ({ name, type: 'file' });
+const folder = (name) => ({ name, type: 'folder' });
+const named = (resolve, element) => resolve(element).name;
+
+
+test('specific project filenames beat their generic suffixes', () => {
+    for (const [name, expected] of [
+        ['package.json', 'package'], ['PACKAGE-LOCK.JSON', 'npm'], ['Cargo.toml', 'rust'], ['pyproject.toml', 'python'],
+        ['tsconfig.json', 'tsconfig'], ['tsconfig.app.json', 'tsconfig'], ['pnpm-lock.yaml', 'pnpm'],
+        ['pnpm-workspace.yaml', 'pnpm'], ['AGENTS.md', 'agents'], ['CLAUDE.md', 'claude'], ['readme.md', 'readme'],
+        ['README', 'readme'], ['readme.txt', 'text'], ['LICENSE', 'text'], ['LICENSE.txt', 'text'],
+        ['Dockerfile', 'docker'], ['Dockerfile.dev', 'docker'], ['docker-compose.local.yaml', 'docker'],
+        ['compose.yml', 'docker'], ['bun.lockb', 'bun'], ['bunfig.toml', 'bun'], ['.gitignore', 'git'],
+        ['.gitattributes', 'git'], ['.gitmodules', 'git'], ['.editorconfig', 'text'], ['.npmrc', 'npm'],
+        ['.bashrc', 'bash'], ['.zshrc', 'bash'], ['.zprofile', 'bash'], ['.env', 'text'], ['.env.production.local', 'text'],
+        ['Gemfile', 'ruby'], ['go.mod', 'go'], ['AUTHORS', 'text'], ['.mcp.json', 'mcp'], ['biome.jsonc', 'biome'],
+        ['.oxlintrc.json', 'oxc'], ['.browserslistrc', 'browserslist'], ['browserslist', 'browserslist']
+    ]) {
+        assert.equal(named(resolve, file(name)), expected, name);
+    }
+});
+
+test('tool configuration variants retain their artwork', () => {
+    for (const [name, expected] of [
+        ['eslint.config.mts', 'eslint'], ['.eslintrc', 'eslint'], ['.eslintrc.yml', 'eslint'], ['.eslintignore', 'eslint'],
+        ['prettier.config.cjs', 'prettier'], ['.prettierrc.toml', 'prettier'], ['.prettierignore', 'prettier'],
+        ['babel.config.json', 'babel'], ['.babelrc', 'babel'], ['next.config.ts', 'nextjs'], ['astro.config.mjs', 'astro'],
+        ['nuxt.config.ts', 'vue'], ['svelte.config.js', 'svelte'], ['postcss.config.cts', 'postcss'],
+        ['.postcssrc.json', 'postcss'], ['stylelint.config.mjs', 'stylelint'], ['.stylelintignore', 'stylelint'],
+        ['svgo.config.ts', 'svgo'], ['tailwind.config.ts', 'tailwind'], ['vite.config.mts', 'vite'],
+        ['vitest.config.ts', 'vite'], ['webpack.config.js', 'webpack'], ['webpack.config.babel.js', 'webpack'],
+        ['bootstrap.bundle.min.js', 'bootstrap'], ['playwright.config.ts', 'typescript'], ['.yarnrc.yml', 'yml']
+    ]) {
+        assert.equal(named(resolve, file(name)), expected, name);
+    }
+});
+
+test('languages, frameworks and resources map onto artwork, or the generic file without any', () => {
+    for (const [extension, expected] of [
+        ['js', 'javascript'], ['cjs', 'javascript'], ['mjs', 'javascript'], ['ts', 'typescript'], ['mts', 'typescript'],
+        ['cts', 'typescript'], ['tsx', 'react'], ['jsx', 'react'], ['md', 'markdown'], ['mdx', 'markdown'],
+        ['vue', 'vue'], ['svelte', 'svelte'], ['astro', 'astro'], ['css', 'css'], ['less', 'css'], ['sass', 'sass'],
+        ['scss', 'sass'], ['html', 'html'], ['xml', 'html'], ['json', 'json'], ['jsonc', 'json'], ['yaml', 'yml'],
+        ['ini', 'text'], ['py', 'python'], ['ipynb', 'python'], ['rb', 'ruby'], ['go', 'go'], ['rs', 'rust'],
+        ['c', 'c'], ['hpp', 'c'], ['m', 'c'], ['swift', 'swift'], ['zig', 'zig'], ['sh', 'bash'], ['ps1', 'bash'],
+        ['sql', 'database'], ['sqlite3', 'database'], ['gql', 'graphql'], ['tfvars', 'terraform'], ['wasm', 'wasm'],
+        ['code-workspace', 'vscode'], ['mcp', 'mcp'], ['png', 'image'], ['webp', 'image'], ['svg', 'svg'],
+        ['woff2', 'font'], ['zip', 'zip'], ['csv', 'table'], ['xlsx', 'table'], ['log', 'text'], ['rtf', 'text'],
+        ['java', 'file'], ['kt', 'file'], ['cs', 'file'], ['toml', 'file'], ['mp3', 'file'], ['mp4', 'file'],
+        ['pdf', 'file'], ['lock', 'file'], ['pem', 'file']
+    ]) {
+        assert.equal(named(resolve, file(`example.${extension.toUpperCase()}`)), expected, extension);
+    }
+});
+
+test('compound suffixes are tried longest first and both path separators work', () => {
+    for (const [name, expected] of [
+        ['guide.mdx.tsx', 'markdown'], ['types.d.ts', 'typescript'], ['types.d.mts', 'typescript'],
+        ['backup.tar.gz', 'zip'], ['backup.tar.xz', 'zip'], ['C:\\project\\README.MD', 'readme'],
+        ['/project/COMPONENT.TSX', 'react'], ['folder.ts/file.unknown', 'file'], ['folder.ts/.hidden', 'file'],
+        ['file.ts.', 'file'], ['.ts', 'file']
+    ]) {
+        assert.equal(named(resolve, file(name)), expected, name);
+    }
+
+    const custom = resolver({ byFileExtension: { '.D.TS': 'text', ts: 'zig', 'tar.gz': 'package', gz: 'file' } });
+
+    assert.equal(named(custom, file('types.d.ts')), 'text');
+    assert.equal(named(custom, file('types.ts')), 'zig');
+    assert.equal(named(custom, file('backup.tar.gz')), 'package');
+    assert.equal(named(custom, file('backup.gz')), 'file');
+});
+
+test('custom rules come before built-ins, by name, then fragment, then extension', () => {
+    const custom = resolver({
+        byFileExtension: { ' .JSON ': 'yml', '.d.ts': 'text' },
+        byFileName: { '  PACKAGE.JSON  ': 'agents', 'types.d.ts': 'json' },
+        byFileNameContains: { DOCKER: 'zip', license: 'markdown', 'types.d': 'go' },
+        byFolderName: { SRC: 'docs' }
+    });
+
+    assert.equal(named(custom, file('package.json')), 'agents');
+    assert.equal(named(custom, file('types.d.ts')), 'json', 'an exact name beats a fragment');
+    assert.equal(named(custom, file('other.d.ts')), 'text');
+    assert.equal(named(custom, file('Dockerfile')), 'zip');
+    assert.equal(named(custom, file('LICENSE-MIT')), 'markdown');
+    assert.equal(named(custom, file('license.json')), 'markdown', 'a fragment beats an extension');
+    assert.equal(named(custom, file('tsconfig.json')), 'yml', 'a custom extension beats built-in names');
+    assert.equal(named(custom, file('other.py')), 'python');
+    assert.equal(named(custom, folder('src')), 'folder-docs');
+    assert.equal(named(custom, folder('docs')), 'folder-docs');
+});
+
+test('rules may name any sprite; those are reported as custom and drawn uncolored', () => {
+    const custom = resolver({
+        byFileName: { 'package.json': 't3-file-icon-package-json' },
+        byFileNameContains: { secret: '#lock' },
+        byFolderName: { '.vscode': 'a1b2c3d4' }
+    });
+
+    assert.deepEqual(custom(file('package.json')), { custom: true, name: 't3-file-icon-package-json' });
+    assert.deepEqual(custom(file('my-secret.txt')), { custom: true, name: '#lock' });
+    assert.deepEqual(custom(folder('.vscode')), { custom: true, name: 'a1b2c3d4' });
+    assert.deepEqual(custom(file('index.ts')), { name: 'typescript' });
+});
+
+test('folders report the artwork drawn, regardless of extensions', () => {
+    for (const [name, expected] of [
+        ['.git', 'git'], ['.github', 'git'], ['__tests__', 'test'], ['coverage', 'test'], ['assets', 'assets'],
+        ['fonts', 'assets'], ['bin', 'scripts'], ['tools', 'scripts'], ['build', 'output'], ['dist', 'output'],
+        ['.next', 'output'], ['components', 'components'], ['doc', 'docs'], ['docs', 'docs'], ['wiki', 'docs'],
+        ['images', 'assets'], ['node_modules', 'packages'], ['packages', 'packages'], ['vendor', 'packages'],
+        ['public', 'public'], ['www', 'public'], ['scripts', 'scripts'], ['src', 'src'], ['lib', 'src'],
+        ['app', 'src'], ['spec', 'test'], ['tests', 'test']
+    ]) {
+        assert.equal(named(resolve, folder(name.toUpperCase())), `folder-${expected}`, name);
+    }
+
+    for (const name of ['config', '.vscode', 'styles', 'migrations', 'api', 'auth', 'index.ts', 'utils']) {
+        assert.equal(named(resolve, folder(name)), 'folder', name);
+    }
+
+    assert.equal(named(resolve, { name: 'docs', children: [] }), 'folder-docs');
+    assert.equal(named(resolve, { name: 'docs', type: 'file', children: [] }), 'file');
+    assert.equal(named(resolve, { name: 'src', type: 'folder' }), 'folder-src', 'a lazy folder needs no children');
+});
+
+test('the minimal and standard sets draw less', () => {
+    const minimal = resolver({ set: 'minimal' });
+    const standard = resolver({ set: 'standard' });
+
+    for (const element of [file('index.ts'), file('package.json'), file('app.vue')]) {
+        assert.equal(named(minimal, element), 'file', element.name);
+    }
+
+    assert.equal(named(minimal, folder('src')), 'folder');
+    assert.equal(named(minimal, file('Dockerfile')), 'file');
+    assert.equal(named(resolver({ byFileName: { dockerfile: 'docker' }, set: 'minimal' }), file('Dockerfile')), 'docker');
+
+    for (const [name, expected] of [
+        ['index.ts', 'typescript'], ['app.tsx', 'typescript'], ['app.jsx', 'javascript'], ['main.scss', 'css'],
+        ['package.json', 'json'], ['README.md', 'markdown'], ['.gitignore', 'git'], ['app.vue', 'file'],
+        ['vite.config.ts', 'typescript'], ['config.yml', 'file'], ['Dockerfile', 'file']
+    ]) {
+        assert.equal(named(standard, file(name)), expected, name);
+    }
+
+    assert.equal(named(standard, folder('src')), 'folder-src');
+});
+
+test('unknown and prototype-like names fall back safely', () => {
+    const custom = resolver({ byFileExtension: { '': 'agents', '.': 'json' }, byFileName: { 'a.ts': '' } });
+
+    for (const name of ['', 'constructor', '__proto__', 'toString', 'hasOwnProperty', 'unknown', 'a.not-a-known-extension']) {
+        assert.equal(named(custom, file(name)), 'file', name);
+        assert.equal(named(custom, folder(name)), 'folder', name);
+    }
+
+    assert.equal(named(custom, file('a.ts')), 'typescript', 'an empty rule is ignored');
+    assert.equal(named(custom, file('a.constructor')), 'file');
+});
+
+test('compiled custom mappings are isolated per tree and do not mutate caller rules', () => {
+    const options = Object.freeze({ byFileName: Object.freeze({ 'special.txt': 'agents' }) });
+    const custom = resolver(options);
+
+    assert.equal(named(custom, file('special.txt')), 'agents');
+    assert.equal(named(resolve, file('special.txt')), 'text');
+    assert.equal(named(resolver(), file('special.txt')), 'text');
+    assert.deepEqual(options, { byFileName: { 'special.txt': 'agents' } });
+});
+
+test('renaming and moving through the store resolve the new name while retaining identity', () => {
+    const model = new Elements([{ id: 'f', name: 'notes.txt' }, { id: 'src', name: 'src', children: [] }]);
+
+    assert.equal(named(resolve, model.index.get('f').element), 'text');
+    assert.ok(model.rename('f', 'package.json'));
+    assert.equal(named(resolve, model.index.get('f').element), 'package');
+    assert.ok(model.move('f', 'src'));
+    assert.equal(named(resolve, model.index.get('f').element), 'package');
+    assert.equal(model.index.get('f').element.id, 'f');
+    assert.ok(model.rename('src', 'docs'));
+    assert.equal(named(resolve, model.index.get('src').element), 'folder-docs');
+});
+
+test('every icon has its sprite, drawn in currentColor, and its color family', () => {
+    const families = new Set([...VARIABLES.matchAll(/^    '(\w+)': light-dark\(/gm)].map((match) => match[1]));
+    const colors = new Map([...VARIABLES.matchAll(/^    (\w+): '(\w+)',?$/gm)].map((match) => [match[1], match[2]]));
+
+    assert.equal(families.size, 12);
+
+    for (const name of NAMES) {
+        const sprite = new URL(name === 'file' ? 'file.svg' : `file-${name}.svg`, SVG);
+
+        assert.ok(existsSync(sprite), name);
+        assert.ok(families.has(colors.get(name)), name);
+
+        // Masks paint in black and white; everything else takes the row's color.
+        const source = readFileSync(sprite, 'utf8').replace(/<mask[\s\S]*?<\/mask>|<linearGradient[\s\S]*?<\/linearGradient>/g, '');
+
+        assert.doesNotMatch(source, /#[\da-f]{3,6}\b|class=/i, name);
+    }
+
+    for (const kind of FOLDERS) {
+        assert.ok(existsSync(new URL(`folder-${kind}.svg`, SVG)), kind);
+        assert.ok(existsSync(new URL(`folder-${kind}-open.svg`, SVG)), kind);
+    }
+
+    assert.deepEqual([...colors.keys()].filter((name) => name !== 'folder' && !NAMES.includes(name)), []);
+    assert.ok(families.has(colors.get('folder')));
+});
+
+test('every icon is drawn for something, so none is dead', () => {
+    const reached = new Set(['file']);
+    const source = readFileSync(new URL('../src/components/editor/tree/icons.ts', import.meta.url), 'utf8');
+
+    for (const match of source.matchAll(/:\s*'(\w+)'|, '(\w+)'\]/g)) {
+        reached.add(match[1] ?? match[2]);
+    }
+
+    assert.deepEqual(NAMES.filter((name) => !reached.has(name)), []);
+});

package/scripts/highlight.test.mjs

@@ -0,0 +1,52 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+import { easing } from '../src/components/highlight/easing.ts';
+
+
+const spring = readFileSync(new URL('../src/components/highlight/scss/variables.scss', import.meta.url), 'utf8')
+    .match(/--glide-timing-function: (linear\([^;]+\));/)[1];
+const samples = (curve) => curve.slice(7, -1).split(',').map(parseFloat);
+
+
+test('short highlight moves retain the exact existing spring', () => {
+    for (let distance of [0, 24, 100, 200]) {
+        assert.equal(easing(spring, distance), spring);
+    }
+});
+
+test('long moves cap the bounce at eight pixels without changing the approach or settling shape', () => {
+    let original = samples(spring);
+
+    for (let distance of [250, 1000, 5000]) {
+        let limited = samples(easing(spring, distance)),
+            peak = Math.max(...limited);
+
+        assert.ok(Math.abs((peak - 1) * distance - 8) < 1e-9);
+        assert.equal(limited.at(-1), 1);
+
+        original.forEach((value, index) => {
+            if (value <= 1) {
+                assert.equal(limited[index], value);
+            }
+            else {
+                assert.ok(Math.abs((limited[index] - 1) / (peak - 1) - (value - 1) / (Math.max(...original) - 1)) < 1e-9);
+            }
+        });
+    }
+});
+
+test('boundary easing and non-spring timing functions remain unchanged', () => {
+    for (let curve of ['ease', 'cubic-bezier(0.22, 1, 0.36, 1)', 'linear(0, 0.5, 1)']) {
+        assert.equal(easing(curve, 5000), curve);
+    }
+});
+
+test('sample positions survive clamping, including anticipation before the move', () => {
+    let curve = easing('linear(0, -0.1 10%, 0.5 30% 40%, 1.1 80%, 1)', 800),
+        values = samples(curve);
+
+    assert.ok(Math.abs(values[1] * 800 + 8) < 1e-9);
+    assert.ok(Math.abs((values[3] - 1) * 800 - 8) < 1e-9);
+    assert.match(curve, / 10%,\s*0.5 30% 40%,[^,]+ 80%,/);
+});

package/scripts/resize.test.mjs

@@ -0,0 +1,247 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+
+// The module keeps one observer for its lifetime, so the fakes stay installed for the whole file.
+let frames = new Map(),
+    frameId = 0,
+    log = [],
+    observers = [];
+
+class FakeObserver {
+    constructor(callback) {
+        this.callback = callback;
+        this.targets = new Map();
+        observers.push(this);
+    }
+    disconnect() { this.targets.clear(); }
+    observe(target, options) { this.targets.set(target, options); }
+    unobserve(target) { this.targets.delete(target); }
+}
+
+Object.assign(globalThis, {
+    cancelAnimationFrame: (id) => frames.delete(id),
+    getComputedStyle: (element) => {
+        log.push(`style ${element.name}`);
+        return { writingMode: element.writingMode ?? 'horizontal-tb' };
+    },
+    requestAnimationFrame: (callback) => {
+        frames.set(++frameId, callback);
+        return frameId;
+    },
+    ResizeObserver: FakeObserver
+});
+
+let { observe, observer, observeSize } = await import('../src/shared/resize.ts');
+
+
+function box(blockSize, inlineSize) {
+    return [{ blockSize, inlineSize }];
+}
+
+function deliver(...entries) {
+    observers[0].callback(entries.map(([target, blockSize, inlineSize]) => ({ borderBoxSize: box(blockSize, inlineSize), target })));
+}
+
+function element(name, height, width, extra = {}) {
+    return {
+        name,
+        get offsetHeight() { log.push(`read ${name}`); return Math.round(this.rect.height); },
+        get offsetWidth() { return Math.round(this.rect.width); },
+        getBoundingClientRect() { return this.rect; },
+        rect: { height, width },
+        ...extra
+    };
+}
+
+function frame() {
+    let callbacks = [...frames.values()];
+
+    frames.clear();
+    callbacks.forEach((callback) => callback());
+}
+
+function tick() {
+    return new Promise((resolve) => setTimeout(resolve));
+}
+
+
+test('handlers share one observer and receive their own entries together', () => {
+    let a = {}, b = {}, c = {},
+        calls = [],
+        first = (entries) => calls.push(['first', entries.map((entry) => entry.target)]),
+        second = (entries) => calls.push(['second', entries.map((entry) => entry.target)]);
+
+    let unobserveA = observe(a, first, { box: 'border-box' }),
+        unobserveB = observe(b, first),
+        unobserveSecond = [observe(b, second), observe(c, second)];
+
+    assert.equal(observers.length, 1);
+    assert.deepEqual(observers[0].targets.get(a), { box: 'border-box' });
+
+    deliver([a, 1, 1], [b, 1, 1], [c, 1, 1]);
+    assert.deepEqual(calls, [['first', [a, b]], ['second', [b, c]]]);
+
+    calls.length = 0;
+    unobserveA();
+    assert.equal(observers[0].targets.has(a), false);
+    deliver([a, 2, 2], [b, 2, 2]);
+    assert.deepEqual(calls, [['first', [b]], ['second', [b]]]);
+
+    // One handler leaving an element keeps it observed for the other.
+    calls.length = 0;
+    unobserveB();
+    assert.equal(observers[0].targets.has(b), true);
+    deliver([b, 3, 3]);
+    assert.deepEqual(calls, [['second', [b]]]);
+    unobserveSecond.forEach((unobserve) => unobserve());
+    assert.equal(observers[0].targets.has(b), false);
+});
+
+test('an element unobserved earlier in the same delivery is not reported', () => {
+    let a = {}, b = {},
+        calls = [],
+        second = () => calls.push('second'),
+        unobserveB;
+
+    observe(a, () => {
+        calls.push('first');
+        unobserveB();
+    });
+    unobserveB = observe(b, second);
+    deliver([a, 1, 1], [b, 1, 1]);
+    assert.deepEqual(calls, ['first']);
+    assert.equal(observers[0].targets.has(b), false);
+});
+
+test('a group disconnects every element it observes', () => {
+    let a = {}, b = {},
+        calls = 0,
+        group = observer(() => calls++);
+
+    group.observe(a);
+    group.observe(b);
+    deliver([a, 1, 1], [b, 1, 1]);
+    assert.equal(calls, 1);
+
+    group.disconnect();
+    assert.equal(observers[0].targets.has(a), false);
+    assert.equal(observers[0].targets.has(b), false);
+    deliver([a, 2, 2]);
+    assert.equal(calls, 1);
+});
+
+test('sizes on connect are read together, before any change, and the first delivery finds nothing new', async () => {
+    let a = element('a', 60.5, 300),
+        b = element('b', 20, 100),
+        empty = element('empty', 0, 0),
+        sizes = [];
+
+    let connect = (target) => {
+        let size = observeSize((size, element) => {
+            log.push(`change ${element.name}`);
+            sizes.push([element.name, size]);
+        });
+
+        size.onconnect(target);
+        return size;
+    };
+
+    log.length = 0;
+
+    let first = connect(a),
+        second = connect(b),
+        third = connect(empty);
+
+    // Nothing is read inside onconnect; the observer's delivery before the flush is superseded by it.
+    assert.deepEqual(log, []);
+    deliver([a, 1, 1]);
+    await tick();
+
+    assert.deepEqual(log, ['read a', 'style a', 'read b', 'style b', 'read empty', 'style empty', 'change a', 'change b']);
+    assert.deepEqual(sizes, [['a', { height: 60.5, width: 300 }], ['b', { height: 20, width: 100 }]]);
+
+    deliver([a, 60.5, 300], [b, 20, 100], [empty, 0, 0]);
+    assert.equal(frames.size, 0);
+    assert.equal(sizes.length, 2);
+
+    first.ondisconnect();
+    second.ondisconnect();
+    third.ondisconnect();
+});
+
+test('later changes apply in the next frame, coalesced, and not at all once disconnected', async () => {
+    let a = element('a', 10, 100),
+        sizes = [],
+        size = observeSize((size) => sizes.push(size));
+
+    size.onconnect(a);
+    await tick();
+    sizes.length = 0;
+
+    deliver([a, 20, 100]);
+    deliver([a, 30, 100]);
+    assert.deepEqual(sizes, []);
+    assert.equal(frames.size, 1);
+    frame();
+    assert.deepEqual(sizes, [{ height: 30, width: 100 }]);
+
+    // Back to the applied size before the frame: nothing to apply.
+    deliver([a, 40, 100]);
+    deliver([a, 30, 100]);
+    frame();
+    assert.equal(sizes.length, 1);
+
+    deliver([a, 50, 100]);
+    size.ondisconnect();
+    frame();
+    deliver([a, 60, 100]);
+    frame();
+    assert.equal(sizes.length, 1);
+    assert.equal(observers[0].targets.has(a), false);
+});
+
+test('reconnecting drops the previous element and a connect not yet flushed', async () => {
+    let a = element('a', 10, 10),
+        b = element('b', 20, 20),
+        sizes = [],
+        size = observeSize((size, element) => sizes.push([element.name, size]));
+
+    size.onconnect(a);
+    size.onconnect(b);
+    await tick();
+    assert.deepEqual(sizes, [['b', { height: 20, width: 20 }]]);
+    assert.equal(observers[0].targets.has(a), false);
+
+    size.ondisconnect();
+    size.onconnect(a);
+    size.ondisconnect();
+    await tick();
+    assert.equal(sizes.length, 1);
+});
+
+test('a transformed box measures its layout size, and vertical writing maps blocks to width', async () => {
+    let scaled = element('scaled', 30, 50),
+        vertical = element('vertical', 300, 80, { writingMode: 'vertical-rl' }),
+        sizes = [];
+
+    scaled.rect = { height: 15, width: 25 };
+    Object.defineProperties(scaled, {
+        offsetHeight: { get: () => 30 },
+        offsetWidth: { get: () => 50 }
+    });
+
+    let a = observeSize((size) => sizes.push(size)),
+        b = observeSize((size) => sizes.push(size));
+
+    a.onconnect(scaled);
+    b.onconnect(vertical);
+    await tick();
+    assert.deepEqual(sizes, [{ height: 30, width: 50 }, { height: 300, width: 80 }]);
+
+    deliver([vertical, 90, 300]);
+    frame();
+    assert.deepEqual(sizes[2], { height: 300, width: 90 });
+    a.ondisconnect();
+    b.ondisconnect();
+});

package/scripts/resolve.mjs

@@ -0,0 +1,52 @@
+import { existsSync } from 'node:fs';
+import { registerHooks } from 'node:module';
+
+
+// Node strips types but resolves specifiers exactly, while the library imports extensionless and through the
+// tsconfig aliases. Tests import this first, then load the sources with dynamic 'import()' so the hook applies.
+const ROOT = new URL('../', import.meta.url).href;
+
+const ALIASES = [
+    ['@esportsplus/ui/components/', new URL('src/components/', ROOT)],
+    ['~/', new URL('src/', ROOT)]
+];
+
+const EXTENSION = /\.\w+$/;
+
+const RELATIVE = /^\.\.?\//;
+
+
+function locate(url) {
+    for (let suffix of ['.ts', '/index.ts']) {
+        let candidate = new URL(url.href + suffix);
+
+        if (existsSync(candidate)) {
+            return candidate.href;
+        }
+    }
+}
+
+
+registerHooks({
+    resolve(specifier, context, next) {
+        let parent = context.parentURL ?? '';
+
+        if (parent.startsWith(ROOT) && parent.endsWith('.ts')) {
+            let url = RELATIVE.test(specifier) ? new URL(specifier, parent) : undefined;
+
+            for (let [alias, target] of ALIASES) {
+                if (specifier.startsWith(alias)) {
+                    url = new URL(specifier.slice(alias.length), target);
+                }
+            }
+
+            let href = url && !EXTENSION.test(url.pathname) && locate(url);
+
+            if (href) {
+                return next(href, context);
+            }
+        }
+
+        return next(specifier, context);
+    }
+});