clickgo 6.5.2 → 6.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clickgo",
-  "version": "6.5.2",
+  "version": "6.7.0",
   "description": "Background interface, software interface, mobile phone APP interface operation library.",
   "type": "module",
   "keywords": [

package/test/dock-lifecycle.mjs

@@ -8,7 +8,8 @@ const sizeUnwatches = [];
 
 globalThis.document = {
     'documentElement': {
-        'clientWidth': 360
+        'clientWidth': 360,
+        'clientHeight': 800
     }
 };
 
@@ -32,6 +33,14 @@ class AbstractControl {
         return Boolean(this.props[name]);
     }
 
+    propNumber(name) {
+        return Number(this.props[name]);
+    }
+
+    parentByName(name) {
+        return this.parents?.[name] ?? null;
+    }
+
     emit() {}
 }
 
@@ -56,6 +65,9 @@ const clickgo = new SyntheticModule(['control', 'dom'], function() {
         },
         isRtl(element) {
             return element.rtl;
+        },
+        index(element) {
+            return element.order;
         }
     });
 });
@@ -146,6 +158,10 @@ group.dock = {
 group.updateFloatLayout();
 assert.equal(group.floatMaxWidth, 280, 'LTR left Dock must use only the viewport space on its right');
 assert.equal(group.floatStyle['max-width'], '280px');
+assert.equal(group.floatStyle.height, undefined, 'short floating panels must size to their content');
+group.props.grow = true;
+assert.equal(group.floatStyle.height, '300px', 'grow floating panels fill the available height');
+group.props.grow = false;
 
 group.element.rtl = true;
 areaRect.left = 320;
@@ -159,14 +175,106 @@ areaRect.right = 40;
 group.updateFloatLayout();
 assert.equal(group.floatMaxWidth, 320, 'RTL right Dock must open toward the viewport space on its right');
 
+group.element.rtl = false;
+group.dock.getFloatBounds = () => ({ 'left': 30, 'right': 330, 'top': 60, 'bottom': 220 });
+areaRect.left = 300;
+areaRect.right = 340;
+group.updateFloatLayout();
+assert.equal(group.floatMaxWidth, 270, 'floating panels must stay inside their Form, not only the viewport');
+assert.equal(group.floatMaxHeight, '160px');
+assert.equal(group.floatTop, 60);
+group.dock.positionData = 'left';
+group.updateFloatLayout();
+assert.equal(group.floatMaxWidth, 0, 'zero available width must remain zero rather than use a fallback');
+assert.equal(group.floatStyle['max-width'], '0px');
+
+const columnMod = new SourceTextModule(await readFile(new URL('../dist/sources/control/dock-column/code.js', import.meta.url), 'utf8'));
+await columnMod.link(() => clickgo);
+await columnMod.evaluate();
+const DockColumn = columnMod.namespace.default;
+
+document.documentElement.clientWidth = 1200;
+document.documentElement.clientHeight = 900;
+const multiForm = {
+    'element': {
+        'isConnected': true,
+        'offsetWidth': 1100,
+        'getBoundingClientRect': () => ({ 'left': 60, 'right': 1160, 'top': 30, 'bottom': 930 })
+    }
+};
+const multiDock = new Dock(multiForm, 600);
+await multiDock.onMounted();
+assert.deepEqual(multiDock.getFloatBounds(), { 'left': 60, 'right': 1160, 'top': 30, 'bottom': 900 });
+
+const projectColumn = new DockColumn(multiForm, 600);
+const mainColumn = new DockColumn(multiForm, 600);
+projectColumn.parents = mainColumn.parents = { 'dock': multiDock };
+projectColumn.element = { 'order': 0 };
+mainColumn.element = { 'order': 1 };
+projectColumn.props.width = 220;
+mainColumn.props.width = 340;
+// Child groups mount before their column: both columns must allocate through the same root.
+const projectIndex = projectColumn.registerGroup();
+const mainIndex = mainColumn.registerGroup();
+assert.notEqual(projectIndex, mainIndex);
+await projectColumn.onMounted();
+await mainColumn.onMounted();
+assert.equal(projectColumn.expandedData, true);
+assert.equal(mainColumn.expandedData, true);
+
+function resizeMultiForm(width) {
+    multiForm.element.offsetWidth = width;
+    multiDock.access.formSizeWatch.handler();
+}
+resizeMultiForm(850);
+assert.equal(projectColumn.autoCollapsed, true, 'the auxiliary column collapses first');
+assert.equal(mainColumn.autoCollapsed, false, 'keep the main column open when it still fits');
+assert.equal(projectColumn.expandedPreference, true, 'automatic collapse must preserve user preference');
+assert.equal(projectColumn.props.expanded, true);
+assert.match(multiDock.widthComp, /var\(--dock-collapsed-width\).*340px/);
+
+resizeMultiForm(650);
+assert.equal(projectColumn.expandedData, false);
+assert.equal(mainColumn.expandedData, false, 'collapse the main column too when workspace space is insufficient');
+resizeMultiForm(1100);
+assert.equal(projectColumn.expandedData, true);
+assert.equal(mainColumn.expandedData, true);
+
+document.documentElement.clientWidth = 600;
+multiDock.access.viewportSizeWatch.handler();
+assert.equal(projectColumn.expandedData, false);
+assert.equal(mainColumn.expandedData, false, 'viewport clipping must also limit multiple expanded columns');
+document.documentElement.clientWidth = 1200;
+multiDock.access.viewportSizeWatch.handler();
+assert.equal(mainColumn.expandedData, true);
+projectColumn.toggle();
+assert.equal(projectColumn.expandedPreference, false);
+resizeMultiForm(650);
+resizeMultiForm(1100);
+assert.equal(projectColumn.expandedData, false, 'a column the user closed must remain closed after resizing');
+assert.equal(mainColumn.expandedData, true);
+
+multiDock.toggleFloat(projectIndex);
+multiDock.toggleFloat(mainIndex);
+assert.equal(multiDock.floatGroup, mainIndex, 'only one floating group may be open across columns');
+mainColumn.unregisterGroup(mainIndex);
+assert.equal(multiDock.floatGroup, -1);
+multiDock.toggleFloat(projectIndex);
+projectColumn.onUnmounted();
+assert.equal(multiDock.columns.length, 1);
+assert.equal(multiDock.floatGroup, -1, 'column removal closes its floating panel');
+mainColumn.onUnmounted();
+multiDock.onUnmounted();
+
 const dockStyle = await readFile(new URL('../dist/sources/control/dock/style.scss', import.meta.url), 'utf8');
 assert.match(dockStyle, /border-inline-end/, 'left Dock border must follow the inline end edge');
 assert.match(dockStyle, /border-inline-start/, 'right Dock border must follow the inline start edge');
-assert.match(dockStyle, /:dir\(rtl\)[\s\S]*scaleX\(-1\)/, 'Dock chevron must mirror in RTL');
+const toggleStyle = await readFile(new URL('../dist/sources/control/sidebar-toggle/style.scss', import.meta.url), 'utf8');
+assert.match(toggleStyle, /:dir\(rtl\)[\s\S]*scaleX\(-1\)/, 'shared sidebar chevron must mirror in RTL');
 
 const groupStyle = await readFile(new URL('../dist/sources/control/dock-group/style.scss', import.meta.url), 'utf8');
 assert.match(groupStyle, /inset-inline-start:\s*100%/, 'left Dock floating panel must open toward inline end');
 assert.match(groupStyle, /inset-inline-end:\s*100%/, 'right Dock floating panel must open toward inline start');
 assert.match(groupStyle, /max-width:\s*calc\(100vw - 40px\)/, 'floating panel must reserve the collapsed Dock width');
 
-console.log('Dock lifecycle, RTL layout and viewport-bound floating-panel checks passed.');
+console.log('Dock lifecycle, multiple columns, preference restoration, RTL and Form/viewport bounds passed.');

package/test/form-modal-layer.mjs

@@ -0,0 +1,75 @@
+// Run after Sass compilation: node test/form-modal-layer.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { JSDOM } from 'jsdom';
+import * as tool from '../dist/lib/tool.js';
+
+const dom = new JSDOM('<!doctype html><html><head></head><body></body></html>');
+for (const name of ['window', 'document', 'Element', 'SVGElement', 'Node', 'HTMLElement']) {
+    globalThis[name] = dom.window[name];
+}
+const { createApp, compile, nextTick } = await import('vue');
+const template = await readFile(new URL('../dist/sources/control/form/layout.html', import.meta.url), 'utf8');
+const formStyle = document.createElement('style');
+formStyle.textContent = await readFile(new URL('../dist/sources/control/form/style.css', import.meta.url), 'utf8');
+document.head.append(formStyle);
+const dockStyle = document.createElement('style');
+dockStyle.textContent = tool.stylePrepend(await readFile(
+    new URL('../dist/sources/control/dock-group/style.css', import.meta.url), 'utf8',
+), 'dock-group_').style;
+document.head.append(dockStyle);
+
+for (const border of ['normal', 'thin', 'plain', 'none']) {
+    const host = document.createElement('div');
+    document.body.append(host);
+    const app = createApp({
+        render: compile(template),
+        data: () => ({
+            border, isNative: false, isNativeNoFrameFirst: false, flashTimer: undefined,
+            stateMinData: false, stateMaxData: false, taskPosition: 'bottom',
+            isShow: true, isInside: false, formFocus: true, widthData: 500,
+            heightData: 400, leftData: 0, topData: 0, zIndex: 1,
+            isMask: false, isResize: false, iconDataUrl: '', title: 'Dock',
+            isMin: false, isMax: false, isClose: false, direction: 'v',
+            isLoading: false, loading: false, loadingComp: false,
+            background: '', padding: '', stepShowData: false, stepData: [],
+            stepDown: () => {}, stepValue: '', stepValues: [],
+        }),
+    });
+    app.component('cg-loading', { render: () => null });
+    app.component('cg-step', { render: () => null });
+    const form = app.mount(host);
+    const wrap = host.querySelector('.wrap');
+    const inner = wrap.querySelector(':scope > .inner');
+    const content = inner.querySelector(':scope > .content');
+    const dock = document.createElement('div');
+    dock.className = 'dock-group_wrap dock-group_collapsed dock-group_floating';
+    dock.innerHTML = '<div class="dock-group_content"><button>Images</button></div>';
+    content.append(dock);
+    const floating = dock.firstElementChild;
+    const button = floating.firstElementChild;
+    assert.equal(dom.window.getComputedStyle(floating).zIndex, '10');
+
+    // --- 模态打开、嵌套模态仍遮罩、关闭后的恢复均不得重建 Dock 内容 ---
+    for (const masked of [true, true, false, true, false]) {
+        form.isMask = masked;
+        await nextTick();
+        const mask = wrap.querySelector(':scope > .mask');
+        assert.equal(Boolean(mask), masked);
+        assert.equal(dock.firstElementChild, floating);
+        assert.equal(floating.firstElementChild, button);
+        assert.equal(dom.window.getComputedStyle(floating).display, 'flex');
+        if (mask) {
+            assert.equal(mask.parentElement, inner.parentElement);
+            assert.equal(dom.window.getComputedStyle(mask).zIndex, '10');
+            // --- 子浮层不能参与遮罩所在层的排序，即使两者 z-index 相同且浮层 DOM 在后 ---
+            assert.equal(dom.window.getComputedStyle(inner).isolation, 'isolate');
+            assert.equal(inner.contains(floating), true);
+            assert.equal(inner.contains(mask), false);
+        }
+    }
+    app.unmount();
+    host.remove();
+}
+dom.window.close();
+console.log('Form modal layer checks passed: Dock floats stay inside the content stacking context for all borders; modal toggles preserve panel content.');

package/test/locale-integrity.mjs

@@ -140,7 +140,7 @@ for (const path of localeSources) {
         tables.push({ ...table, path });
     }
 }
-assert.equal(tables.length, 24, 'all 24 built-in TypeScript locale tables must be present');
+assert.equal(tables.length, 26, 'all 26 built-in TypeScript locale tables must be present');
 for (const { node, path, line } of tables) {
     const tableCodes = node.properties.map(getPropertyName);
     assert.deepEqual([...tableCodes].sort(), [...codes].sort(), `${path}:${line} must contain exactly 16 locale entries`);
@@ -186,4 +186,4 @@ const demoLocaleCodes = [...demoLocaleData.matchAll(/'([^']+)'/g)].map((match) =
 assert.deepEqual(demoLocaleCodes, codes, 'demo global locale selector must expose all 16 locales in registry order');
 
 dom.window.close();
-console.log('Locale registry, 24 TypeScript tables, 16 task app locale JSON files and the Demo selector are complete.');
+console.log(`Locale registry, ${tables.length} TypeScript tables, 16 task app locale JSON files and the Demo selector are complete.`);

package/test/pop-max-size.mjs

@@ -0,0 +1,66 @@
+// Run: node --experimental-vm-modules test/pop-max-size.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+import { JSDOM } from 'jsdom';
+import ts from 'typescript';
+
+const dom = new JSDOM('<!doctype html><style>.pop { max-width: 480px; max-height: 300px; }</style><div id="trigger"></div><div class="pop"></div>');
+for (const name of ['window', 'document', 'Element', 'HTMLElement', 'PointerEvent']) {
+    Object.defineProperty(globalThis, name, {
+        'configurable': true,
+        'value': dom.window[name],
+    });
+}
+globalThis.getComputedStyle = dom.window.getComputedStyle.bind(dom.window);
+Object.defineProperty(window, 'innerWidth', { 'configurable': true, 'value': 1024 });
+Object.defineProperty(window, 'innerHeight', { 'configurable': true, 'writable': true, 'value': 768 });
+
+let refreshSize;
+const domModule = new SyntheticModule(['findParentByData', 'watchSize'], function() {
+    this.setExport('findParentByData', () => null);
+    this.setExport('watchSize', (_id, _pop, callback) => { refreshSize = callback; });
+});
+const toolModule = new SyntheticModule(['sleep'], function() {
+    this.setExport('sleep', () => Promise.resolve());
+});
+const empty = new SyntheticModule([], function() {});
+const source = await readFile(new URL('../dist/lib/form.ts', import.meta.url), 'utf8');
+const formModule = new SourceTextModule(ts.transpileModule(source, {
+    'compilerOptions': {
+        'target': ts.ScriptTarget.ES2022,
+        'module': ts.ModuleKind.ESNext,
+    },
+}).outputText);
+await formModule.link((specifier) => {
+    if (specifier === './dom') {
+        return domModule;
+    }
+    if (specifier === './tool') {
+        return toolModule;
+    }
+    return empty;
+});
+await formModule.evaluate();
+
+const trigger = document.querySelector('#trigger');
+const pop = document.querySelector('.pop');
+formModule.namespace.showPop(trigger, pop, 'v', { 'autoPosition': true });
+await Promise.resolve();
+assert.equal(pop.style.maxHeight, 'min(300px, 760px)', 'CSS max-height must survive the viewport limit');
+assert.equal(pop.style.maxWidth, 'min(480px, 1016px)', 'CSS max-width must survive the viewport limit');
+
+window.innerHeight = 240;
+refreshSize();
+assert.equal(pop.style.maxHeight, 'min(300px, 232px)', 'a smaller viewport must still constrain the popup');
+
+pop.style.maxHeight = '180px';
+refreshSize();
+assert.equal(pop.style.maxHeight, 'min(180px, 232px)', 'an explicit inline limit must take effect');
+
+pop.style.maxHeight = '';
+refreshSize();
+assert.equal(pop.style.maxHeight, 'min(300px, 232px)', 'removing an inline limit must restore the CSS limit');
+
+dom.window.close();
+console.log('Popup CSS limits, viewport limits, and inline overrides passed.');

package/test/rtl-archive.mjs

@@ -14,15 +14,15 @@ const codes = [
 /** --- 包含 localeData 的全部内置控件 --- */
 const localeControls = [
     'arteditor', 'calendar', 'captcha', 'date', 'datepanel', 'daterange', 'empty', 'jodit', 'label',
-    'levelselect', 'map', 'monaco', 'number', 'page', 'palette', 'property', 'select', 'text', 'tuieditor',
+    'levelselect', 'map', 'monaco', 'number', 'page', 'palette', 'property', 'select', 'sidebar-toggle', 'text', 'toolbox', 'tuieditor',
 ];
 /** --- 合并到 common.cgc 的多语言控件 --- */
 const commonControls = new Set([
     'calendar', 'date', 'datepanel', 'daterange', 'empty', 'label', 'levelselect', 'number', 'palette',
-    'select', 'text',
+    'select', 'sidebar-toggle', 'text', 'toolbox',
 ]);
-/** --- 六套内置主题 --- */
-const themes = ['admin', 'cyber', 'dark', 'light', 'modern', 'modern-light'];
+/** --- 全部内置主题 --- */
+const themes = ['admin', 'cyber', 'dark', 'light', 'modern', 'modern-light', 'compact-dark', 'compact-light'];
 /** --- CGA 格式常量，与编译器的公开包格式保持一致 --- */
 const cgaHeaderLength = 106;
 const cgaKeyContext = Buffer.from('ClickGo/Application/Package');
@@ -335,7 +335,7 @@ for (const code of codes) {
     }
 }
 
-// --- 19 个控件的归档语言表必须与 TypeScript 源码一致 ---
+// --- 所有多语言控件的归档语言表必须与 TypeScript 源码一致 ---
 const archivedControlCode = new Map();
 for (const control of localeControls) {
     const packageName = commonControls.has(control) ? 'common' : control;
@@ -365,6 +365,10 @@ const rtlCodeChecks = [
     ['dist/control/common.cgc', 'date', ['autoPosition', 'autoScroll']],
     ['dist/control/common.cgc', 'daterange', ['autoPosition', 'autoScroll']],
     ['dist/control/common.cgc', 'dock-group', ['isRtl', 'floatMaxWidth']],
+    ['dist/control/common.cgc', 'dock', ['updateColumns', 'getFloatBounds']],
+    ['dist/control/common.cgc', 'dock-column', ['registerGroup', 'expandedPreference']],
+    ['dist/control/common.cgc', 'toolbox', ['getBoundingClientRect', 'toggleColumns']],
+    ['dist/control/common.cgc', 'sidebar-toggle', ['chevronRight', 'tipLabelComp', 'update:expanded']],
     ['dist/control/table.cgc', 'table', ['localeDirection', 'getScrollLeft', 'setScrollInlineOffset']],
     ['dist/control/desc.cgc', 'desc', ['getScrollInlineOffset', 'setScrollInlineOffset']],
     ['dist/control/iconview.cgc', 'iconview', ['isRtl']],
@@ -382,12 +386,16 @@ for (const [archive, control, tokens] of rtlCodeChecks) {
 
 // --- 控件 RTL 样式必须进入 cgc，并与 Sass 生成 CSS 一致 ---
 const rtlStyleChecks = [
+    ['dist/control/form.cgc', 'form/style.css', 'dist/sources/control/form/style.css', ['isolation:isolate']],
     ['dist/control/common.cgc', 'button/style.css', 'dist/sources/control/button/style.css', [':dir(rtl)', 'border-inline-end']],
     ['dist/control/common.cgc', 'list/style.css', 'dist/sources/control/list/style.css', [':dir(rtl)', 'margin-inline-end']],
     ['dist/control/common.cgc', 'tab/style.css', 'dist/sources/control/tab/style.css', ['border-inline-start-width', 'border-inline-end-width']],
     ['dist/control/common.cgc', 'timeline/style.css', 'dist/sources/control/timeline/style.css', ['border-inline-start']],
-    ['dist/control/common.cgc', 'dock/style.css', 'dist/sources/control/dock/style.css', [':dir(rtl)', 'border-inline-end']],
+    ['dist/control/common.cgc', 'dock/style.css', 'dist/sources/control/dock/style.css', ['border-inline-end']],
     ['dist/control/common.cgc', 'dock-group/style.css', 'dist/sources/control/dock-group/style.css', ['inset-inline-start', 'max-width:calc(100vw - 40px)']],
+    ['dist/control/common.cgc', 'dock-column/style.css', 'dist/sources/control/dock-column/style.css', ['border-inline-start']],
+    ['dist/control/common.cgc', 'toolbox/style.css', 'dist/sources/control/toolbox/style.css', ['border-inline-end']],
+    ['dist/control/common.cgc', 'sidebar-toggle/style.css', 'dist/sources/control/sidebar-toggle/style.css', [':dir(rtl)', 'border-bottom', '--sidebar-toggle-background']],
     ['dist/control/table.cgc', 'table/style.css', 'dist/sources/control/table/style.css', ['border-inline-end', 'inset-inline-end']],
     ['dist/control/xterm.cgc', 'xterm/style.css', 'dist/sources/control/xterm/style.css', ['direction:ltr']],
 ];
@@ -398,7 +406,7 @@ for (const [archive, entry, sourcePath, tokens] of rtlStyleChecks) {
     }
 }
 
-// --- 六套主题必须全部包含最新的逻辑方向样式 ---
+// --- 全部主题必须全部包含最新的逻辑方向样式 ---
 for (const theme of themes) {
     const archive = `dist/theme/${theme}.cgt`;
     const archivedConfig = JSON.parse(await readZipText(archive, 'config.json'));
@@ -416,4 +424,4 @@ for (const theme of themes) {
     );
 }
 
-console.log('Archive check passed: task.cga has 16 locales, 19 control locale tables are current, and RTL output is present in all 6 themes.');
+console.log(`Archive check passed: task.cga has 16 locales, ${localeControls.length} control locale tables are current, and RTL output is present in all ${themes.length} themes.`);

package/test/sidebar-toggle.mjs

@@ -0,0 +1,75 @@
+// Run after TypeScript compilation: node --experimental-vm-modules test/sidebar-toggle.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+
+class AbstractControl {
+    constructor() {
+        this.emitted = [];
+        this.locale = 'sc';
+    }
+    propBoolean(name) {
+        return [true, 'true', ''].includes(this.props[name]);
+    }
+    l(key) {
+        return this.localeData[this.locale][key];
+    }
+    emit(name, value) {
+        this.emitted.push([name, value]);
+    }
+}
+
+const clickgo = new SyntheticModule(['control'], function() {
+    this.setExport('control', { AbstractControl });
+});
+const mod = new SourceTextModule(await readFile(new URL('../dist/sources/control/sidebar-toggle/code.js', import.meta.url), 'utf8'));
+await mod.link(() => clickgo);
+await mod.evaluate();
+const SidebarToggle = mod.namespace.default;
+const toggle = new SidebarToggle();
+
+for (const [position, expanded, pointsRight] of [
+    ['left', false, true], ['left', true, false], ['right', false, false], ['right', true, true],
+]) {
+    toggle.props.position = position;
+    toggle.props.expanded = expanded;
+    assert.equal(toggle.chevronRight, pointsRight, `${position}, expanded=${expanded}`);
+}
+
+toggle.props.expanded = 'false';
+toggle.props.label = 'Project';
+assert.equal(toggle.tipLabelComp, '展开侧栏 · Project');
+toggle.props.expanded = 'true';
+assert.equal(toggle.tipLabelComp, '收起侧栏 · Project');
+toggle.locale = 'ar';
+assert.equal(toggle.tipLabelComp, 'طي الشريط الجانبي · Project');
+toggle.props.tipLabel = 'Use one tool column';
+assert.equal(toggle.tipLabelComp, 'Use one tool column', 'Toolbox keeps its column-specific operation');
+
+for (const key of ['Enter', ' ']) {
+    toggle.props.expanded = false;
+    const count = toggle.emitted.length;
+    let prevented = false;
+    let stopped = false;
+    const event = {
+        key, 'repeat': false,
+        'preventDefault': () => { prevented = true; },
+        'stopPropagation': () => { stopped = true; },
+    };
+    toggle.keydown(event);
+    assert.equal(prevented && stopped, true);
+    assert.deepEqual(toggle.emitted[count], ['update:expanded', true]);
+    assert.equal(toggle.props.expanded, false, 'the owner applies the requested state');
+    toggle.keydown({ ...event, 'repeat': true });
+    assert.equal(toggle.emitted.length, count + 1, 'holding a key must not repeatedly flip the sidebar');
+}
+toggle.keydown({
+    'key': 'Tab',
+    'preventDefault': () => assert.fail('Tab keeps native focus navigation'),
+    'stopPropagation': () => assert.fail('Other keys are not consumed'),
+});
+toggle.props.expanded = true;
+toggle.toggle();
+assert.deepEqual(toggle.emitted.at(-1), ['update:expanded', false]);
+
+console.log('Shared sidebar toggle direction, localized tips, controlled state and keyboard activation passed.');

package/test/toolbox.mjs

@@ -0,0 +1,88 @@
+// Run after TypeScript compilation: node --experimental-vm-modules test/toolbox.mjs
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { SourceTextModule, SyntheticModule } from 'node:vm';
+import { JSDOM } from 'jsdom';
+
+const dom = new JSDOM('<div id="tools"></div>');
+globalThis.HTMLElement = dom.window.HTMLElement;
+const tools = dom.window.document.getElementById('tools');
+class AbstractControl {
+    constructor() {
+        this.refs = { tools };
+        this.emitted = [];
+    }
+    emit(name, value) {
+        this.emitted.push([name, value]);
+    }
+    propNumber(name) {
+        return Number(this.props[name]);
+    }
+    watch(name, callback, options) {
+        if (options?.immediate) {
+            callback();
+        }
+    }
+}
+const clickgo = new SyntheticModule(['control'], function() {
+    this.setExport('control', { AbstractControl });
+});
+const mod = new SourceTextModule(await readFile(new URL('../dist/sources/control/toolbox/code.js', import.meta.url), 'utf8'));
+await mod.link(() => clickgo);
+await mod.evaluate();
+const Toolbox = mod.namespace.default;
+const toolbox = new Toolbox();
+toolbox.props.columns = '2';
+toolbox.onMounted();
+assert.equal(toolbox.columnsData, 2);
+toolbox.toggleColumns();
+assert.equal(toolbox.columnsData, 1);
+assert.deepEqual(toolbox.emitted, [['update:columns', 1]]);
+
+function button(x, y, { disabled = false, hidden = false } = {}) {
+    const item = dom.window.document.createElement('div');
+    item.setAttribute('data-cg-control', 'button');
+    item.setAttribute('role', 'button');
+    item.setAttribute('tabindex', '0');
+    if (disabled) {
+        item.setAttribute('data-cg-disabled', '');
+    }
+    Object.defineProperty(item, 'offsetHeight', { 'value': hidden ? 0 : 24 });
+    item.getBoundingClientRect = () => ({ 'left': x, 'top': y, 'width': 24, 'height': 24 });
+    tools.append(item);
+    return item;
+}
+// A one-tool group precedes a two-column group; DOM index arithmetic would pick the wrong row.
+const browse = button(0, 0);
+const paint = button(0, 40);
+const erase = button(30, 40);
+button(0, 80, { 'disabled': true });
+button(30, 80, { 'hidden': true });
+const select = button(0, 120);
+
+function move(from, key, expected) {
+    from.focus();
+    let prevented = false;
+    toolbox.keydown({ 'target': from, key, 'preventDefault': () => { prevented = true; } });
+    assert.equal(prevented, true);
+    assert.equal(dom.window.document.activeElement, expected, key);
+}
+move(browse, 'ArrowDown', paint);
+move(paint, 'ArrowRight', erase);
+move(erase, 'ArrowLeft', paint);
+move(paint, 'ArrowDown', select);
+move(select, 'Home', browse);
+move(browse, 'End', select);
+move(browse, 'ArrowUp', browse);
+
+// RTL changes the rendered physical positions; navigation must follow those positions.
+paint.getBoundingClientRect = () => ({ 'left': 30, 'top': 40, 'width': 24, 'height': 24 });
+erase.getBoundingClientRect = () => ({ 'left': 0, 'top': 40, 'width': 24, 'height': 24 });
+move(paint, 'ArrowLeft', erase);
+move(erase, 'ArrowRight', paint);
+
+const outside = dom.window.document.createElement('div');
+outside.setAttribute('data-cg-control', 'button');
+outside.setAttribute('role', 'button');
+toolbox.keydown({ 'target': outside, 'key': 'ArrowDown', 'preventDefault': () => assert.fail('header/outside buttons are not tools') });
+console.log('Toolbox column binding and keyboard navigation across groups, hidden/disabled tools and RTL passed.');