clickgo 6.7.2 → 6.8.1

package/test/form-viewport.mjs

@@ -5,20 +5,27 @@ import vm from 'node:vm';
 import ts from 'typescript';
 
 let nativeMode = false;
+let area = { left: 0, top: 0, width: 640, height: 400, owidth: 640, oheight: 440 };
+const bool = value => value === true || value === '' || value === 'true';
 const clickgo = {
     isNative: () => nativeMode,
     control: {
         AbstractControl: class {
-            emit() {}
+            constructor() { this.rootForm = { bottomMost: false }; this.parent = { controlName: 'root' }; this.watches = {}; this.events = []; }
+            emit(...event) { this.events.push(event); }
+            propBoolean(name) { return bool(this.props[name]); }
+            watch(name, callback, options) { this.watches[name] = callback; if(options?.immediate) callback(); }
             propInt(name) { return Number(this.props[name]); }
             trigger() { return Promise.resolve(); }
         },
     },
+    core: { getAvailArea: () => area },
+    dom: { watchSize() {} },
     native: {
         restore: async () => {},
         size: async () => {},
     },
-    tool: { sleep: () => Promise.resolve() },
+    tool: { sleep: () => Promise.resolve(), getBoolean: bool },
 };
 const source = await readFile(new URL('../dist/sources/control/form/code.ts', import.meta.url), 'utf8');
 const compiled = ts.transpileModule(source, {
@@ -48,3 +55,73 @@ assert.deepEqual(restore({ width: 600, height: 40, left: 40, top: 400 }), [600,
 assert.deepEqual(restore({ width: 900, height: 700, left: 500, top: 300 }, 'native-framed'), [900, 700, 500, 300]);
 assert.deepEqual(restore({ width: 900, height: 700, left: 500, top: 300 }, 'native-frameless'), [900, 700, 500, 300]);
 console.log('Form restore stays visible, edge-positioned Forms stay anchored, and Native geometry is unchanged.');
+
+
+nativeMode = false;
+function create(viewport = false, initialMax = false) {
+    const form = new Form();
+    form.props.viewport = viewport;
+    form.props.stateMax = initialMax;
+    form.props.padding = 'safe';
+    form.element = { style: {}, dataset: {}, offsetWidth: 300, offsetHeight: 200, removeAttribute() {} };
+    form.onMounted();
+    if (!initialMax) form.maxMethod();
+    return form;
+}
+function rect(form) { return [form.leftData, form.topData, form.widthData, form.heightData]; }
+const full = create(true, true);
+assert.deepEqual(rect(full), [0, 0, 640, 440], 'initial state-max uses the full viewport');
+const history = JSON.stringify(full.historyLocation);
+for (const a of [
+    { left: 0, top: 0, width: 640, height: 400, owidth: 640, oheight: 440, padding: '0px 0px 40px 0px' },
+    { left: 60, top: 0, width: 580, height: 440, owidth: 640, oheight: 440, padding: '0px 0px 0px 60px' },
+    { left: 0, top: 40, width: 640, height: 400, owidth: 640, oheight: 440, padding: '40px 0px 0px 0px' },
+    { left: 0, top: 0, width: 580, height: 440, owidth: 640, oheight: 440, padding: '0px 60px 0px 0px' },
+    { left: 0, top: 0, width: 800, height: 520, owidth: 800, oheight: 560, padding: '0px 0px 40px 0px' },
+    { left: 0, top: 0, width: 800, height: 560, owidth: 800, oheight: 560, padding: '0px 0px 0px 0px' }
+]) {
+    area = a;
+    full.refreshMaxPosition();
+    assert.deepEqual(rect(full), [0, 0, a.owidth, a.oheight]);
+    assert.equal(full.contentPadding, a.padding);
+    assert.equal(JSON.stringify(full.historyLocation), history, 'refresh never overwrites restore geometry');
+}
+area = { left: 60, top: 0, width: 580, height: 440, owidth: 640, oheight: 440 };
+full.props.viewport = false;
+full.watches.viewport();
+assert.deepEqual(rect(full), [60, 0, 580, 440]);
+assert.equal(full.contentPadding, '0px 0px 0px 0px', 'available-area maximization does not reserve the taskbar twice');
+full.props.viewport = 'true';
+full.watches.viewport();
+assert.deepEqual(rect(full), [0, 0, 640, 440]);
+full.maxMethod();
+assert.equal(full.contentPadding, undefined, 'safe padding is removed when restoring');
+full.props.padding = '4 8';
+assert.equal(full.contentPadding, '4px 8px', 'numeric padding is unchanged');
+const normal = create();
+assert.deepEqual(rect(normal), [60, 0, 580, 440], 'default maximization still avoids the taskbar');
+const bottom = create();
+bottom.rootForm.bottomMost = true;
+bottom.refreshMaxPosition();
+assert.deepEqual(rect(bottom), [60, 0, 580, 440], 'bottomMost alone does not change the layout boundary');
+assert.equal(bottom.contentPadding, '0px 0px 0px 0px');
+bottom.props.viewport = true;
+bottom.watches.viewport();
+assert.deepEqual(rect(bottom), [0, 0, 640, 440], 'bottomMost uses the full viewport only when explicitly enabled');
+assert.equal(bottom.contentPadding, '0px 0px 0px 60px');
+bottom.props.viewport = false;
+bottom.watches.viewport();
+assert.deepEqual(rect(bottom), [60, 0, 580, 440], 'disabling viewport also restores taskbar exclusion for bottomMost');
+const inline = create();
+inline.isInside = true;
+const previous = rect(inline);
+inline.props.viewport = true;
+inline.refreshMaxPosition();
+assert.deepEqual(rect(inline), previous, 'inline Forms do not resize to the viewport');
+const automatic = create();
+automatic.props.width = 0;
+automatic.props.height = 0;
+automatic.events = [];
+automatic.refreshMaxPosition();
+assert.ok(automatic.events.every(([name]) => !['update:width', 'update:height'].includes(name)));
+console.log('Form viewport bounds, four taskbar edges, safe padding, live switching, restore and bottomMost layout independence passed.');

package/test/iconview.mjs

@@ -0,0 +1,70 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+
+class AbstractControl {
+    element = { dir: 'ltr' };
+    emitted = [];
+    propInt(name) { return Number(this.props[name]); }
+    propBoolean(name) { return Boolean(this.props[name]); }
+    emit(name, value) { this.emitted.push([name, value]); }
+}
+const clickgo = new SyntheticModule(['control', 'dom', 'tool'], function() {
+    this.setExport('control', { AbstractControl });
+    this.setExport('dom', { isRtl: element => element.dir === 'rtl' });
+    this.setExport('tool', { clone: structuredClone });
+});
+const module = new SourceTextModule(await readFile('dist/sources/control/iconview/code.js', 'utf8'));
+await module.link(() => clickgo);
+await module.evaluate();
+const view = new module.namespace.default();
+view.props.data = Array.from({ length: 8 }, (_, i) => ({ name: 'item-' + i }));
+
+// Resizing crosses column thresholds without stretching existing cells.
+for (const [width, columns] of [[360, 2], [420, 2], [539, 2], [540, 3], [620, 3]]) {
+    view.clientwidth(width);
+    assert.equal(view.rowCount, columns);
+    assert.equal(view.cellWidth, 180);
+    assert.equal(view.dataComp[0].length, columns);
+}
+view.props.size = 64;
+assert.equal(view.cellWidth, 144);
+assert.equal(view.rowCount, 4);
+view.clientwidth(100);
+assert.equal(view.cellWidth, 100);
+assert.equal(view.rowCount, 1);
+view.clientwidth(0);
+assert.ok(Number.isFinite(view.rowCount));
+assert.equal(view.rowCount, 1);
+view.props.size = 100;
+view.clientwidth(500);
+
+function box(x, width, modifiers = {}) {
+    view.onBeforeSelect();
+    view.onSelect({ x, width, y: 0, height: 100, start: 0, end: 0, empty: false, ...modifiers });
+    return [...view.valueData];
+}
+
+// Column hit testing uses actual fixed cells; trailing whitespace selects nothing.
+assert.deepEqual(box(190, 10), [1]);
+assert.deepEqual(box(370, 80), []);
+assert.equal(view.emitted.at(-1)[1].detail.area.empty, true);
+assert.deepEqual(box(170, 200), [0, 1]);
+assert.deepEqual(box(0, 20), [0]);
+assert.deepEqual(box(370, 50, { ctrl: true }), [0]);
+assert.deepEqual(box(190, 20, { shift: true }), [0, 1]);
+view.arrowDown();
+assert.ok(view.valueData.every(index => index >= 0 && index < 8));
+
+// RTL starts at the right edge, leaving unused space at the left edge.
+view.element.dir = 'rtl';
+assert.deepEqual(box(10, 50), []);
+assert.deepEqual(box(450, 20), [0]);
+assert.deepEqual(box(280, 20), [1]);
+assert.deepEqual(box(280, 200), [0, 1]);
+view.props.multi = false;
+assert.deepEqual(box(280, 20), [1]);
+assert.deepEqual(box(10, 50), [1]);
+view.props.data = [];
+assert.deepEqual(view.dataComp, []);
+console.log('Iconview fixed cells, column thresholds, size changes, narrow widths, LTR/RTL selection and modifiers passed.');

package/test/jodit-lifecycle.mjs

@@ -0,0 +1,212 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+import { JSDOM } from 'jsdom';
+import ts from 'typescript';
+import { clone, getClassPrototype } from '../dist/lib/tool.js';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>');
+for (const name of ['window', 'document', 'Element', 'HTMLElement', 'SVGElement', 'Node']) {
+    Object.defineProperty(globalThis, name, { configurable: true, value: dom.window[name] });
+}
+const { createApp, h, nextTick, reactive } = await import('vue');
+const errors = [];
+const editors = [];
+const menus = [];
+let popCount = 0;
+let moduleCount = 0;
+let loadModule;
+
+class AbstractControl {
+    get refs() { return this.$refs; }
+    get locale() { return 'en'; }
+    watch(name, callback, options) { return this.$watch(() => this.props[name], callback, options); }
+    emit(...args) { this.$emit(...args); }
+    propBoolean(name) { return this.props[name] === true; }
+}
+const module = {
+    make(element, options) {
+        assert.ok(element instanceof HTMLElement && element.isConnected, 'Jodit requires a live host');
+        const callbacks = {};
+        const editor = {
+            value: '', text: 'plain text', container: element.parentElement,
+            options, callbacks, commands: [], images: [], destructCount: 0,
+            events: { on(name, callback) { callbacks[name] = callback; } },
+            setReadOnly(value) { this.readonly = value; },
+            execCommand(value) { this.commands.push(value); },
+            selection: { insertImage(...args) { editor.images.push(args); } },
+            destruct() {
+                assert.equal(element.isConnected, true, 'release the editor before Vue removes its DOM');
+                ++this.destructCount;
+                callbacks.change?.();
+            },
+        };
+        editors.push(editor);
+        return editor;
+    },
+};
+const clickgo = {
+    control: { AbstractControl },
+    core: { getModule() { ++moduleCount; return loadModule(); } },
+    dom: { findParentByClass() { return null; } },
+    form: { hidePop() {}, showPop() { ++popCount; } },
+    modules: { pointer: { menu(event, callback) { menus.push(callback); } } },
+};
+const source = await readFile(new URL('../dist/sources/control/jodit/code.ts', import.meta.url), 'utf8');
+const exports = {};
+vm.runInNewContext(ts.transpileModule(source, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+}).outputText, { exports, require: () => clickgo, HTMLElement });
+const instance = new exports.default();
+const prototype = getClassPrototype(instance);
+const controls = [];
+const Control = {
+    template: '<div><div ref="content"><textarea ref="editor"></textarea><div class="jodit-workplace"></div></div><div ref="pop"></div></div>',
+    props: Object.fromEntries(Object.entries(instance.props).map(([name, value]) => [name, {
+        default: () => clone(value),
+    }])),
+    emits: instance.emits,
+    data: () => Object.fromEntries(Object.entries(new exports.default()).filter(([name]) =>
+        !['props', 'emits', 'access'].includes(name))),
+    computed: prototype.access,
+    methods: prototype.method,
+    created() {
+        this.props = this.$props;
+        this.access = clone(instance.access);
+        controls.push(this);
+    },
+    // Mirror buildComponents: its mounted hook defers the control hook by one Vue tick.
+    async mounted() { await this.$nextTick(); await this.onMounted(); },
+    beforeUnmount: prototype.method.onBeforeUnmount,
+};
+
+/** --- Drain both Vue mounting and asynchronous module continuations. --- */
+async function flush() {
+    for (let i = 0; i < 8; ++i) await nextTick();
+    assert.deepEqual(errors, [], 'Jodit lifecycle must not produce runtime errors');
+}
+
+/** --- Mount independent instances with the framework's per-instance access storage. --- */
+function mount(items) {
+    const state = reactive({ items });
+    const events = [];
+    const host = document.createElement('div');
+    document.body.append(host);
+    const app = createApp({
+        render: () => h('div', state.items.map(item => h(Control, {
+            key: item.id,
+            modelValue: item.value ?? '', readonly: item.readonly ?? false,
+            'onUpdate:modelValue': value => events.push(['value', value]),
+            onText: value => events.push(['text', value]),
+            onInit: editor => events.push(['init', editor]),
+            onImgselect: callback => events.push(['image', callback]),
+        }))),
+    });
+    app.config.errorHandler = error => errors.push(error);
+    app.mount(host);
+    return { state, events, host, unmount() { app.unmount(); host.remove(); } };
+}
+
+// A parent can replace the temporary editor before the deferred control hook even starts.
+loadModule = () => Promise.resolve(module);
+let view = mount([{ id: 'temporary' }]);
+view.state.items = [];
+await flush();
+assert.equal(moduleCount, 0);
+assert.equal(editors.length, 0);
+view.unmount();
+
+// Module resolution after unmount must neither initialize Jodit nor change fallback state.
+for (const result of [module, null]) {
+    let release;
+    loadModule = () => new Promise(resolve => { release = resolve; });
+    view = mount([{ id: 'pending' }]);
+    await flush();
+    const control = controls.at(-1);
+    view.state.items = [];
+    await flush();
+    release(result);
+    await flush();
+    assert.equal(editors.length, 0);
+    assert.equal(control.notInit, false);
+    assert.deepEqual(view.events, []);
+    view.unmount();
+}
+
+// Re-rendering one editor while a shared module loads must preserve its surviving sibling.
+let release;
+const pending = new Promise(resolve => { release = resolve; });
+loadModule = () => pending;
+view = mount([{ id: 'temporary' }, { id: 'live', value: 'before' }]);
+await flush();
+const removed = controls.at(-2);
+const live = controls.at(-1);
+assert.notEqual(removed.access, live.access);
+view.state.items.splice(0, 1);
+view.state.items[0].value = 'after';
+view.state.items[0].readonly = true;
+await flush();
+release(module);
+await flush();
+assert.equal(editors.length, 1);
+const editor = editors[0];
+assert.equal(live.access.editor, editor);
+assert.equal(editor.value, 'after');
+assert.equal(editor.readonly, true);
+view.state.items[0].value = 'updated';
+view.state.items[0].readonly = false;
+await flush();
+assert.equal(editor.value, 'updated');
+assert.equal(editor.readonly, false);
+editor.callbacks.change();
+assert.ok(view.events.some(event => event[0] === 'value' && event[1] === 'updated'));
+editor.callbacks.focus();
+assert.equal(live.isFocus, true);
+editor.callbacks.blur();
+assert.equal(live.isFocus, false);
+live.execCmd('copy');
+assert.deepEqual(editor.commands, ['copy']);
+editor.options.extraButtons[0].exec();
+const insertImage = view.events.find(event => event[0] === 'image')[1];
+const workplace = view.host.querySelector('.jodit-workplace');
+workplace.dispatchEvent(new dom.window.Event('pointerdown', { bubbles: true }));
+assert.equal(menus.length, 1);
+const eventCount = view.events.length;
+view.unmount();
+await flush();
+assert.equal(editor.destructCount, 1);
+assert.equal(live.access.editor, undefined);
+assert.equal(view.events.length, eventCount, 'destruction must not emit a model update');
+insertImage('image.png');
+menus[0]();
+workplace.dispatchEvent(new dom.window.Event('pointerdown', { bubbles: true }));
+live.execCmd('paste');
+live.onBeforeUnmount();
+assert.equal(editor.destructCount, 1, 'cleanup is idempotent');
+assert.deepEqual(editor.images, []);
+assert.equal(popCount, 0);
+assert.equal(menus.length, 1, 'remove the menu listener at unmount');
+
+// A cached module still resolves asynchronously on every later entry.
+loadModule = async () => { await Promise.resolve(); return module; };
+for (let i = 0; i < 20; ++i) {
+    view = mount([{ id: 'entry', value: `entry ${i}` }]);
+    await flush();
+    view.state.items = [{ id: 'replacement', value: `replacement ${i}` }];
+    await flush();
+    view.unmount();
+    await flush();
+}
+assert.equal(editors.length, 41);
+assert.ok(editors.every(item => item.destructCount === 1));
+
+// A genuine module load failure still displays the existing fallback.
+loadModule = () => Promise.resolve(null);
+view = mount([{ id: 'failure' }]);
+await flush();
+assert.equal(controls.at(-1).notInit, true);
+assert.equal(controls.at(-1).isLoading, false);
+view.unmount();
+await flush();
+dom.window.close();
+console.log('Jodit deferred mounting, late module resolution, instance isolation, repeated entry and editor cleanup passed.');

package/test/rtl-archive.mjs

@@ -22,7 +22,7 @@ const commonControls = new Set([
     'select', 'sidebar-toggle', 'text', 'toolbox',
 ]);
 /** --- 全部内置主题 --- */
-const themes = ['admin', 'cyber', 'dark', 'light', 'modern', 'modern-light', 'compact-dark', 'compact-light'];
+const themes = ['admin', 'cyber', 'dark', 'light', 'modern', 'modern-light', 'software-dark', 'software-light'];
 /** --- CGA 格式常量，与编译器的公开包格式保持一致 --- */
 const cgaHeaderLength = 106;
 const cgaKeyContext = Buffer.from('ClickGo/Application/Package');

package/test/scroll.mjs

@@ -0,0 +1,145 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+import { JSDOM } from 'jsdom';
+import ts from 'typescript';
+import { getClassPrototype, lang } from '../dist/lib/tool.js';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>');
+for (const name of ['window', 'document', 'Element', 'HTMLElement', 'SVGElement', 'Node']) {
+    Object.defineProperty(globalThis, name, { configurable: true, value: dom.window[name] });
+}
+const { createApp, reactive, nextTick, h } = await import('vue');
+const style = document.createElement('style');
+style.textContent = await readFile(new URL('../dist/sources/control/scroll/style.css', import.meta.url), 'utf8');
+document.head.append(style);
+const state = reactive({ locale: 'en', direction: 'h', length: 1000, client: 200, offset: 250 });
+const errors = [];
+const watchers = [];
+const rolls = [];
+const frames = new Set();
+process.on('unhandledRejection', error => { errors.push(error); });
+HTMLElement.prototype.getBoundingClientRect = function() {
+    const length = this.classList.contains('bar') ? 400 : 460;
+    return { width: state.direction === 'h' ? length : 30, height: state.direction === 'v' ? length : 30, left: 0, top: 0 };
+};
+
+// Retain ClickGo's computed $el getter to exercise the real first-render order.
+class AbstractControl {
+    get element() { return this.$el; }
+    get refs() { return this.$refs; }
+    get locale() { return state.locale; }
+    get localeDirection() { return lang.getDirection(this.locale); }
+    watch(...args) { return this.$watch(...args); }
+    emit(...args) { this.$emit(...args); }
+    propInt(name) { return parseInt(this.props[name]); }
+    propBoolean(name) { return this.props[name] === true || this.props[name] === 'true'; }
+}
+const clickgo = {
+    control: { AbstractControl },
+    dom: {
+        isRtl: el => el instanceof Element && dom.window.getComputedStyle(el).direction === 'rtl',
+        watchSize: (control, el, callback, immediate) => {
+            assert.ok(el instanceof HTMLElement && el.isConnected);
+            watchers.push(callback);
+            if (immediate) callback();
+        },
+    },
+    modules: { pointer: {
+        hover() {},
+        down: (event, options) => { options.down(); options.up(); },
+    } },
+    task: {
+        onFrame: (control, callback) => { callback(); frames.add(1); return 1; },
+        offFrame: (control, id) => { frames.delete(id); },
+    },
+};
+const source = await readFile(new URL('../dist/sources/control/scroll/code.ts', import.meta.url), 'utf8');
+const exports = {};
+vm.runInNewContext(ts.transpileModule(source, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+}).outputText, { exports, require: () => clickgo });
+const instance = new exports.default();
+const prototype = getClassPrototype(instance);
+const Scroll = {
+    template: await readFile(new URL('../dist/sources/control/scroll/layout.html', import.meta.url), 'utf8'),
+    props: Object.fromEntries(Object.entries(instance.props).map(([name, value]) => [name, { default: value }])),
+    emits: instance.emits,
+    data: () => Object.fromEntries(Object.entries(instance).filter(([name]) => !['props', 'emits'].includes(name))),
+    computed: prototype.access,
+    methods: prototype.method,
+    created() { this.props = this.$props; },
+    async mounted() { await this.$nextTick(); this.onMounted(); },
+};
+const host = document.createElement('div');
+document.body.append(host);
+const app = createApp({
+    render() {
+        return h('div', { dir: lang.getDirection(state.locale) }, [h(Scroll, {
+            ref: 'scroll', direction: state.direction, length: state.length, client: state.client, offset: state.offset,
+            'onUpdate:offset': offset => { state.offset = offset; },
+            onRoll: () => { rolls.push(state.offset); },
+        })]);
+    },
+});
+app.config.errorHandler = error => { errors.push(error); };
+const root = app.mount(host);
+
+/** --- Drain render, mounted watchers and reactive updates. --- */
+async function flush() {
+    for (let i = 0; i < 10; ++i) await nextTick();
+    await new Promise(resolve => setImmediate(resolve));
+    assert.deepEqual(errors, [], 'Scroll must mount/update without runtime errors');
+}
+await flush();
+const scroll = root.$refs.scroll;
+assert.equal(scroll.element, host.querySelector('.wrap'));
+assert.equal(scroll.barPx, 400);
+assert.equal(scroll.blockPx, 80);
+assert.equal(host.querySelector('.start').style.width, '30px');
+assert.equal(host.querySelector('.end').style.width, '30px');
+assert.equal(scroll.offsetPx, 100);
+assert.match(host.querySelector('.block').style.transform, /translate3d\(100px, 0, 0\)/);
+host.querySelector('.end').dispatchEvent(new dom.window.Event('pointerdown', { bubbles: true }));
+await flush();
+assert.equal(state.offset, 260);
+assert.equal(rolls.length, 1);
+assert.equal(frames.size, 0, 'pointer release stops the frame timer');
+state.locale = 'ar';
+await flush();
+assert.equal(scroll.isRtl, true);
+assert.equal(scroll.offsetPx, 216);
+assert.equal(dom.window.getComputedStyle(host.querySelector('.bar')).direction, 'ltr',
+    'the track must use a left origin for the physical translateX coordinate');
+host.querySelector('.start').dispatchEvent(new dom.window.Event('pointerdown', { bubbles: true }));
+await flush();
+assert.equal(state.offset, 250);
+assert.equal(scroll.offsetPx, 220);
+state.direction = 'v';
+await flush();
+watchers[0]();
+await flush();
+assert.equal(scroll.isRtl, false);
+assert.equal(host.querySelector('.start').style.height, '30px');
+assert.equal(host.querySelector('.start').style.width, '');
+assert.match(host.querySelector('.block').style.transform, /translate3d\(0, 100px, 0\)/);
+state.direction = 'h';
+state.locale = 'en';
+await flush();
+watchers[0]();
+await flush();
+assert.equal(host.querySelector('.end').style.width, '30px');
+assert.equal(scroll.offsetPx, 100);
+state.length = 300;
+await flush();
+assert.equal(state.offset, 100, 'shrinking the range clamps the offset');
+state.client = 400;
+await flush();
+assert.equal(state.offset, 0);
+assert.equal(host.querySelector('.wrap').getAttribute('data-cg-disabled'), '');
+host.querySelector('.end').dispatchEvent(new dom.window.Event('pointerdown', { bubbles: true }));
+await flush();
+assert.equal(state.offset, 0);
+app.unmount();
+await flush();
+console.log('Scroll real Vue mount, arrow sizes/events, range changes and live RTL/direction switching passed.');

package/test/task-package-loading.mjs

@@ -0,0 +1,94 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+import ts from 'typescript';
+
+const requests = new Map();
+const styles = [];
+const progress = [];
+const events = [];
+let id = 0;
+let taskApi;
+function getContent(taskId, path) {
+    return new Promise((resolve, reject) => requests.set(path, { resolve, reject }));
+}
+const tool = {
+    urlResolve: (base, path) => path,
+    random: () => `id${++id}`,
+    stateMachine() {},
+    runIife: () => class { async main() { events.push('main'); } },
+    stylePrepend: style => ({ prep: '', style }),
+    styleUrl2DataUrl: async (base, style) => style,
+    layoutAddTagClassAndReTagName: layout => layout,
+    layoutClassPrepend: layout => layout,
+    eventsAttrWrap: layout => layout,
+    getClassPrototype: () => ({ method: {}, access: {} }),
+};
+const core = { config: { locale: 'en' }, trigger: async (...args) => { events.push(args); } };
+const form = { notify() {}, notifyContent() {} };
+const dom = { createToStyleList() {}, removeFromStyleList() {}, pushStyle: (taskId, style) => styles.push(style) };
+const zip = { get: async blob => {
+    const label = await blob.text();
+    return {
+        readDir: path => path === '/' ? [{ name: 'same', isFile: false }] : [
+            { path: 'same/', name: 'layout.html' }, { path: 'same/', name: 'style.css' },
+        ],
+        getContent: async path => path.endsWith('config.json') ?
+            JSON.stringify({ name: 'same', layout: 'layout', style: 'style' }) :
+            path.endsWith('html') ? `<div>${label}</div>` : label,
+    };
+} };
+tool.getMimeByPath = name => ({ ext: name.split('.').pop() });
+async function load(file, modules) {
+    const source = await readFile(new URL(`../dist/lib/${file}.ts`, import.meta.url), 'utf8');
+    const exports = {};
+    vm.runInNewContext(ts.transpileModule(source, {
+        compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+    }).outputText, { exports, require: name => modules[name] ?? {}, Blob, setTimeout, clearTimeout,
+        window: { innerWidth: 800, innerHeight: 600 } });
+    return exports;
+}
+const clickgo = { getDirname: () => '/clickgo/', modules: { vue: { reactive: value => value, watch() {} } } };
+const common = { '../clickgo': clickgo, './tool': tool, './core': core, './fs': { getContent }, './dom': dom, './form': form };
+const controls = await load('control', { ...common, './zip': zip, './task': { getOrigin: taskId => taskApi.getOrigin(taskId) } });
+const themeOrder = [];
+taskApi = await load('task', { ...common, './control': controls, './theme': {
+    read: async blob => ({ name: await blob.text() }),
+    load: async (taskId, theme) => { themeOrder.push(theme?.name ?? 'global'); },
+} });
+taskApi.initSysId('sys');
+taskApi.init();
+const app = {
+    type: 'app', config: { name: 'Concurrent packages', controls: ['/a', '/b.cgc'], themes: ['/light', '/dark'] },
+    package: { getContent: async path => path === '/app.js' ? 'app fixture' : null },
+};
+const running = taskApi.run('sys', app, { notify: false, progress: (loaded, total, type, path) => progress.push(path) });
+await new Promise(resolve => setImmediate(resolve));
+assert.deepEqual([...requests.keys()], ['/light.cgt', '/dark.cgt', '/a.cgc', '/b.cgc'], 'all themes and controls request before the first package completes');
+requests.get('/b.cgc').resolve(new Blob(['second']));
+requests.get('/dark.cgt').resolve(new Blob(['dark']));
+await new Promise(resolve => setImmediate(resolve));
+assert.deepEqual(styles, [], 'later downloads cannot change registration order');
+assert.deepEqual(themeOrder, [], 'themes wait for controls and preceding themes');
+requests.get('/a.cgc').resolve(new Blob(['first']));
+await new Promise(resolve => setImmediate(resolve));
+assert.deepEqual(styles, ['first', 'second'], 'CSS registers in configured order');
+assert.deepEqual(progress, ['/a.cgc', '/b.cgc']);
+requests.get('/light.cgt').resolve(new Blob(['light']));
+const taskId = await running;
+assert.equal(typeof taskId, 'string');
+assert.ok(taskApi.getOrigin(taskId).controls.same.layout.includes('second'), 'last configured duplicate control wins');
+assert.deepEqual(themeOrder, ['light', 'dark'], 'theme application preserves configured order');
+assert.equal(events.at(-1), 'main');
+
+requests.clear();
+const failed = taskApi.run('sys', { ...app, config: { ...app.config, controls: ['/missing', '/later'], themes: ['/unused'] } }, { notify: false });
+await new Promise(resolve => setImmediate(resolve));
+requests.get('/later.cgc').reject(new Error('later request failure'));
+requests.get('/unused.cgt').reject(new Error('unused theme failure'));
+await new Promise(resolve => setImmediate(resolve));
+requests.get('/missing.cgc').resolve(null);
+assert.equal(await failed, -905, 'missing control retains the task failure code');
+await new Promise(resolve => setImmediate(resolve));
+assert.deepEqual(themeOrder, ['light', 'dark'], 'failure does not apply prefetched themes');
+console.log('Concurrent CGC/CGT downloads, ordered registration/themes, duplicate controls and failure handling passed.');