flexdesk 0.16.0 → 0.17.0

package/src/ui/components/slide_out_panel.js

@@ -20,6 +20,7 @@ export class SlideOutPanel extends ComponentBase {
     /** @type {number} */       #width;
     /** @type {Function|null} */#onClose;
     /** @type {boolean} */      #open = false;
+    /** @type {ResizeObserver|null} */ #hostObserver = null;
 
     /**
      * @param {object}   opts
@@ -131,6 +132,7 @@ export class SlideOutPanel extends ComponentBase {
             this.#trackGeometry();
             window.addEventListener('scroll', this.#trackGeometry, true);
             window.addEventListener('resize', this.#trackGeometry);
+            this.#observeHost();
         }
 
         return this.#body;
@@ -146,6 +148,8 @@ export class SlideOutPanel extends ComponentBase {
         document.removeEventListener('keydown', this.#handleEsc);
         window.removeEventListener('scroll', this.#trackGeometry, true);
         window.removeEventListener('resize', this.#trackGeometry);
+        this.#hostObserver?.disconnect();
+        this.#hostObserver = null;
         // Leave the inline position:fixed geometry in place. The panel
         // slides off-screen via the transform animation (translateX
         // 100%); the next open() re-runs #trackGeometry which will
@@ -168,18 +172,51 @@ export class SlideOutPanel extends ComponentBase {
         }
     };
 
+    /** The host moves or resizes without any window event when a tile
+     *  splitter is dragged or a dock panel toggles, and the fixed geometry
+     *  would then stay at the old coordinates. Observe the host AND each
+     *  ancestor: a host can move without changing size of its own (a dock
+     *  panel toggling beside a fixed-width tile shrinks the content area,
+     *  an ancestor, and the tile only shifts). The callback runs
+     *  synchronously, after layout and before paint, so the panel follows
+     *  a drag without a frame of lag; it only writes the panel's own
+     *  `position: fixed` geometry, which is out of flow and resizes
+     *  nothing observed, so it cannot loop. */
+    #observeHost() {
+        this.#hostObserver = new ResizeObserver(this.#trackGeometry);
+        for (let el = this.#container; el; el = el.parentElement) {
+            this.#hostObserver.observe(el);
+        }
+    }
+
     /** Pin the panel to the right edge of its host's *visible* frame
-     *  using `position: fixed`. Re-run on every scroll/resize so the
-     *  panel always overlays the host correctly even when the host
-     *  itself sits inside a scrolled ancestor. */
+     *  using `position: fixed`. Re-run on every window scroll/resize and
+     *  every host resize (#observeHost) so the panel always overlays the
+     *  host correctly even when the host itself sits inside a scrolled
+     *  ancestor.
+     *
+     *  UNDER A CSS `zoom` (the shell's content zoom scales a tile body),
+     *  `getBoundingClientRect()` answers in screen pixels, which already
+     *  carry the zoom, while the panel's own `top`/`left`/`height` are
+     *  CSS pixels that the same zoom multiplies again. Copied across
+     *  unchanged, every length was scaled twice: at 150% the panel landed
+     *  right of and below its host, at 50% it was half the host's height.
+     *  So the rect is divided by the panel's effective zoom
+     *  (`currentCSSZoom`: 1 when nothing above it zooms, `undefined` in an
+     *  engine that predates it), and the width subtracted is the panel's
+     *  laid-out one, which `min-width` may hold above the requested
+     *  width. Rounding happens in screen pixels, so at 100% the output is
+     *  exactly what it always was. */
     #trackGeometry = () => {
         if (!this.#open || !this.#panel || !this.#container) return;
         const r = this.#container.getBoundingClientRect();
+        const zoom = this.#panel.currentCSSZoom || 1;
+        const width = this.#panel.offsetWidth || this.#width;
         const s = this.#panel.style;
         s.position = 'fixed';
-        s.top      = `${Math.round(r.top)}px`;
-        s.left     = `${Math.round(r.right - this.#width)}px`;
+        s.top      = `${Math.round(r.top) / zoom}px`;
+        s.left     = `${Math.round(r.right - width * zoom) / zoom}px`;
         s.right    = 'auto';
-        s.height   = `${Math.round(r.height)}px`;
+        s.height   = `${Math.round(r.height) / zoom}px`;
     };
 }

package/src/ui/components/slider_field.js

@@ -1,4 +1,35 @@
+/**
+ * A range slider with optional companions: a linked number box, a readout, a
+ * default with a modified state and a reset button, and an enable toggle.
+ *
+ * Every companion is opt-in through `field`; with none of them the DOM is the
+ * range and the helper line, exactly as before.
+ *
+ *   field.min / max / step / value   the range (defaults 0 / 100 / 1 / min)
+ *   field.numberInput                true: an editable number box, two-way synced
+ *   field.readout                    true, or (value: number) => string
+ *   field.defaultValue               enables the modified state and a reset button
+ *   field.toggleable                 true: an enable checkbox before the slider
+ *   field.enabled                    the toggle's initial state (default true)
+ *   field.disabledValue              what onChange reports while toggled off (default null)
+ *   field.emitOnInput                also report every drag frame ({ immediate: true })
+ *   field.disabled / helperText      as before
+ *
+ * onChange(value, { immediate }) receives the slider's value as a string — the
+ * range input's own value, as it always has — or `disabledValue` while the
+ * toggle is off. A commit that leaves the reported value where it was reports
+ * nothing, so setValue/setRange/setEnabled cannot echo back into the caller
+ * that drove them.
+ */
 export class SliderField {
+    #min = 0;
+    #max = 100;
+    #step = 1;
+    #value = 0;
+    #enabled = true;
+    #hasDefault = false;
+    #defaultValue = 0;
+
     constructor({ fieldId, field = {}, onChange = null, logger = null } = {}) {
         if (!fieldId) {
             throw new Error('SliderField requires a fieldId');
@@ -10,9 +41,23 @@ export class SliderField {
 
         this.root = null;
         this.sliderInput = null;
+        this.numberInput = null;
+        this.readoutEl = null;
+        this.resetButton = null;
+        this.toggleInput = null;
         this.helperEl = null;
         this.emitOnInput = Boolean(field.emitOnInput ?? field.emitsOnInput);
         this._disposers = [];
+
+        this.#min = this.#coerceNumber(field.min, 0);
+        this.#max = Math.max(this.#min, this.#coerceNumber(field.max, 100));
+        this.#step = this.#coercePositiveNumber(field.step, 1);
+        this.#value = this.#fit(this.#coerceNumber(field.value, this.#min));
+        this.#enabled = field.toggleable ? field.enabled !== false : true;
+        this.#hasDefault = this.#isFiniteInput(field.defaultValue);
+        if (this.#hasDefault) {
+            this.#defaultValue = this.#fit(Number(field.defaultValue));
+        }
     }
 
     render() {
@@ -25,13 +70,7 @@ export class SliderField {
         this.sliderInput = document.createElement('input');
         this.sliderInput.type = 'range';
         this.sliderInput.className = 'twm-slider-field__input';
-        this.sliderInput.min = this.#coerceNumber(this.field.min, 0);
-        this.sliderInput.max = this.#coerceNumber(this.field.max, 100);
-        this.sliderInput.step = this.#coercePositiveNumber(this.field.step, 1);
-        this.sliderInput.value = this.#coerceNumber(this.field.value, Number(this.sliderInput.min));
-        if (this.field.disabled) {
-            this.sliderInput.disabled = true;
-        }
+        this.#writeRangeAttributes();
 
         // Prevent parent interactions from interfering with slider dragging
         // Use stopImmediatePropagation to ensure no other handlers on this element run
@@ -41,10 +80,8 @@ export class SliderField {
             evt.stopImmediatePropagation();
         };
         // Use capture phase to intercept before any parent handlers
-        this.sliderInput.addEventListener('mousedown', stopDrag, { capture: true });
-        this.sliderInput.addEventListener('touchstart', stopDrag, { passive: false, capture: true });
-        this._disposers.push(() => this.sliderInput.removeEventListener('mousedown', stopDrag, { capture: true }));
-        this._disposers.push(() => this.sliderInput.removeEventListener('touchstart', stopDrag, { passive: false, capture: true }));
+        this.#listen(this.sliderInput, 'mousedown', stopDrag, { capture: true });
+        this.#listen(this.sliderInput, 'touchstart', stopDrag, { passive: false, capture: true });
 
         this.helperEl = document.createElement('div');
         this.helperEl.className = 'twm-slider-field__helper';
@@ -52,7 +89,30 @@ export class SliderField {
             this.helperEl.textContent = this.field.helperText;
         }
 
-        this.root.appendChild(this.sliderInput);
+        const companions = this.field.toggleable || this.field.numberInput
+            || this.field.readout || this.#hasDefault;
+        if (companions) {
+            const row = document.createElement('div');
+            row.className = 'twm-slider-field__row';
+            if (this.field.toggleable) {
+                row.appendChild(this.#buildToggle());
+            }
+            row.appendChild(this.sliderInput);
+            if (this.field.readout) {
+                this.readoutEl = document.createElement('span');
+                this.readoutEl.className = 'twm-slider-field__readout';
+                row.appendChild(this.readoutEl);
+            }
+            if (this.field.numberInput) {
+                row.appendChild(this.#buildNumberInput());
+            }
+            if (this.#hasDefault) {
+                row.appendChild(this.#buildResetButton());
+            }
+            this.root.appendChild(row);
+        } else {
+            this.root.appendChild(this.sliderInput);
+        }
         this.root.appendChild(this.helperEl);
 
         // Throttle onInput to animation frames to avoid re-render stutter while dragging
@@ -72,6 +132,9 @@ export class SliderField {
         };
 
         const handleInput = (event) => {
+            // The companions follow the thumb on every frame; onChange waits for release.
+            this.#value = this.#fit(Number(event.target.value));
+            this.#syncCompanions();
             pendingValue = event.target.value;
             if (!rafToken) {
                 rafToken = requestAnimationFrame(() => {
@@ -82,17 +145,71 @@ export class SliderField {
         };
         const handleChange = (event) => {
             flushPending();
-            const value = event.target.value;
-            this.onChange?.(value, { immediate: false });
+            this.#value = this.#fit(Number(event.target.value));
+            this.#syncCompanions();
+            this.onChange?.(event.target.value, { immediate: false });
         };
-        this.sliderInput.addEventListener('input', handleInput);
-        this.sliderInput.addEventListener('change', handleChange);
-        this._disposers.push(() => this.sliderInput.removeEventListener('input', handleInput));
-        this._disposers.push(() => this.sliderInput.removeEventListener('change', handleChange));
+        this.#listen(this.sliderInput, 'input', handleInput);
+        this.#listen(this.sliderInput, 'change', handleChange);
 
+        this.#syncCompanions();
         return this.root;
     }
 
+    /** What onChange would report now: the value as a string, or disabledValue while toggled off. */
+    getValue() {
+        return this.#enabled ? String(this.#value) : this.#disabledValue();
+    }
+
+    isEnabled() {
+        return this.#enabled;
+    }
+
+    /** True when a defaultValue was given and the value differs from it. */
+    isModified() {
+        return this.#hasDefault && this.#value !== this.#defaultValue;
+    }
+
+    /**
+     * Clamp to the range and snap to the step. Reports once, unless `silent` or
+     * the reported value did not move. A non-finite value is refused (false).
+     */
+    setValue(value, { silent = false } = {}) {
+        if (!this.#isFiniteInput(value)) {
+            return false;
+        }
+        const numeric = Number(value);
+        return this.#commit(() => { this.#value = this.#fit(numeric); }, silent);
+    }
+
+    setEnabled(enabled, { silent = false } = {}) {
+        return this.#commit(() => { this.#enabled = Boolean(enabled); }, silent);
+    }
+
+    /** Change any of min/max/step; the value and the default are refitted into the new range. */
+    setRange({ min, max, step } = {}, { silent = false } = {}) {
+        return this.#commit(() => {
+            this.#min = this.#isFiniteInput(min) ? Number(min) : this.#min;
+            this.#max = Math.max(this.#min, this.#isFiniteInput(max) ? Number(max) : this.#max);
+            this.#step = this.#coercePositiveNumber(step, this.#step);
+            this.#value = this.#fit(this.#value);
+            if (this.#hasDefault) {
+                this.#defaultValue = this.#fit(this.#defaultValue);
+            }
+            if (this.sliderInput) {
+                this.#writeRangeAttributes();
+            }
+        }, silent);
+    }
+
+    /** Restore defaultValue and report it, a commit like a drag release. */
+    reset({ silent = false } = {}) {
+        if (!this.#hasDefault) {
+            return false;
+        }
+        return this.#commit(() => { this.#value = this.#defaultValue; }, silent);
+    }
+
     dispose() {
         this._disposers.forEach((dispose) => {
             try {
@@ -104,9 +221,149 @@ export class SliderField {
         this._disposers = [];
         this.root = null;
         this.sliderInput = null;
+        this.numberInput = null;
+        this.readoutEl = null;
+        this.resetButton = null;
+        this.toggleInput = null;
         this.helperEl = null;
     }
 
+    #buildToggle() {
+        this.toggleInput = document.createElement('input');
+        this.toggleInput.type = 'checkbox';
+        this.toggleInput.className = 'twm-slider-field__toggle';
+        this.toggleInput.setAttribute('aria-label', 'Enabled');
+        if (this.field.disabled) {
+            this.toggleInput.disabled = true;
+        }
+        this.#listen(this.toggleInput, 'change', () => this.setEnabled(this.toggleInput.checked));
+        return this.toggleInput;
+    }
+
+    #buildNumberInput() {
+        this.numberInput = document.createElement('input');
+        this.numberInput.type = 'text';
+        this.numberInput.inputMode = 'decimal';
+        this.numberInput.className = 'twm-slider-field__number';
+        this.numberInput.setAttribute('aria-label', 'Value');
+        // A typed value that is not a finite number is refused and the box shows the value again.
+        const commitTyped = () => {
+            if (!this.setValue(this.numberInput.value.trim())) {
+                this.#syncCompanions();
+            }
+        };
+        this.#listen(this.numberInput, 'keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                commitTyped();
+            } else if (event.key === 'Escape') {
+                this.#syncCompanions();
+            }
+        });
+        this.#listen(this.numberInput, 'change', commitTyped);
+        return this.numberInput;
+    }
+
+    #buildResetButton() {
+        this.resetButton = document.createElement('button');
+        this.resetButton.type = 'button';
+        this.resetButton.className = 'twm-slider-field__reset';
+        this.resetButton.title = 'Reset to default';
+        this.resetButton.setAttribute('aria-label', 'Reset to default');
+        const icon = document.createElement('span');
+        icon.className = 'material-symbols-outlined';
+        icon.textContent = 'restart_alt';
+        this.resetButton.appendChild(icon);
+        this.#listen(this.resetButton, 'click', () => this.reset());
+        return this.resetButton;
+    }
+
+    /** Apply a change, refresh the DOM, and report once if the reported value moved. */
+    #commit(apply, silent) {
+        const before = this.getValue();
+        apply();
+        this.#syncCompanions();
+        const after = this.getValue();
+        if (after === before) {
+            return false;
+        }
+        if (!silent) {
+            this.onChange?.(after, { immediate: false });
+        }
+        return true;
+    }
+
+    /** Write the model into every element: slider, box, readout, toggle, states. */
+    #syncCompanions() {
+        if (!this.root) return;
+        const text = String(this.#value);
+        if (this.sliderInput.value !== text) {
+            this.sliderInput.value = text;
+        }
+        const off = !this.#enabled;
+        const hardDisabled = Boolean(this.field.disabled);
+        this.sliderInput.disabled = hardDisabled || off;
+        if (this.numberInput) {
+            this.numberInput.value = text;
+            this.numberInput.disabled = hardDisabled || off;
+        }
+        if (this.readoutEl) {
+            const format = typeof this.field.readout === 'function' ? this.field.readout : null;
+            this.readoutEl.textContent = format ? String(format(this.#value)) : text;
+        }
+        if (this.toggleInput) {
+            this.toggleInput.checked = this.#enabled;
+        }
+        const modified = this.isModified();
+        if (this.resetButton) {
+            this.resetButton.disabled = hardDisabled || off || !modified;
+        }
+        this.root.classList.toggle('twm-slider-field--modified', modified);
+        this.root.classList.toggle('twm-slider-field--off', off);
+    }
+
+    #writeRangeAttributes() {
+        this.sliderInput.min = String(this.#min);
+        this.sliderInput.max = String(this.#max);
+        this.sliderInput.step = String(this.#step);
+        this.sliderInput.value = String(this.#value);
+    }
+
+    /** Clamp to [min, max] and snap to the step grid anchored at min, as a range input does. */
+    #fit(value) {
+        const clamped = Math.min(this.#max, Math.max(this.#min, value));
+        let snapped = this.#min + Math.round((clamped - this.#min) / this.#step) * this.#step;
+        if (snapped > this.#max) snapped -= this.#step;
+        const decimals = Math.max(this.#decimals(this.#step), this.#decimals(this.#min));
+        return Number(snapped.toFixed(Math.min(decimals, 12)));
+    }
+
+    #decimals(value) {
+        const text = String(value);
+        if (text.includes('e-')) return Number(text.split('e-')[1]);
+        const dot = text.indexOf('.');
+        return dot === -1 ? 0 : text.length - dot - 1;
+    }
+
+    #isFiniteInput(value) {
+        if (value === null || value === undefined || typeof value === 'boolean') {
+            return false;
+        }
+        if (typeof value === 'string' && value.trim() === '') {
+            return false;
+        }
+        return Number.isFinite(Number(value));
+    }
+
+    #disabledValue() {
+        return this.field.disabledValue === undefined ? null : this.field.disabledValue;
+    }
+
+    #listen(target, type, handler, options) {
+        target.addEventListener(type, handler, options);
+        this._disposers.push(() => target.removeEventListener(type, handler, options));
+    }
+
     #coerceNumber(value, fallback) {
         const numeric = Number(value);
         return Number.isFinite(numeric) ? numeric : fallback;

package/src/ui/components/sortable_list.js

@@ -19,6 +19,12 @@
 
 import { DragReorder } from './drag_reorder.js';
 
+/** The class every row carries, and therefore what DragReorder must match. */
+const ROW_CLASS = 'twm-sortable-list__row';
+const ROW_SELECTOR = `.${ROW_CLASS}`;
+const HANDLE_CLASS = 'twm-sortable-list__handle';
+const HANDLE_SELECTOR = `.${HANDLE_CLASS}`;
+
 export class SortableList {
     /**
      * Create a sortable list.
@@ -60,6 +66,7 @@ export class SortableList {
         this.root = null;
         this.listEl = null;
         this._dragReorder = null;
+        this._pressedHandle = false;
     }
 
     /**
@@ -198,15 +205,30 @@ export class SortableList {
         // placeholder). Created once, bound to the persistent list
         // element; re-attached after each refresh to wire the rebuilt
         // rows. Drag is restricted to the grip handle.
+        //
+        // The item selector is ROW_SELECTOR, the class #createRow puts on
+        // every row: a selector that matches no row makes nothing draggable.
+        //
+        // The handle restriction cannot read `dragstart`'s target: a browser
+        // fires `dragstart` at the draggable element itself (the row), never
+        // at the child the pointer went down on. So the press is recorded on
+        // `mousedown` (which does target the handle) and the guard reads that.
         if (this.allowReorder) {
             if (!this._dragReorder) {
+                this.listEl.addEventListener('mousedown', (e) => {
+                    this._pressedHandle = !!e.target.closest?.(HANDLE_SELECTOR);
+                });
                 this._dragReorder = new DragReorder({
                     container: this.listEl,
-                    itemSelector: '.sortable-list__row',
+                    itemSelector: ROW_SELECTOR,
                     keyAttr: 'index',
                     axis: 'y',
                     indicatorClass: 'twm-sortable-list__drop',
-                    draggableGuard: (e) => !!e.target.closest('.twm-sortable-list__handle'),
+                    draggableGuard: () => {
+                        const fromHandle = this._pressedHandle;
+                        this._pressedHandle = false;
+                        return fromHandle;
+                    },
                     onReorder: (order) => this.#applyReorder(order),
                 });
             }
@@ -229,7 +251,7 @@ export class SortableList {
 
     #createRow(item, index) {
         const row = document.createElement('div');
-        row.className = 'twm-sortable-list__row';
+        row.className = ROW_CLASS;
         row.dataset.index = index;
 
         // Drag handle (if reordering enabled). The drag mechanics are
@@ -237,7 +259,7 @@ export class SortableList {
         // handle is just the grab affordance the drag is restricted to.
         if (this.allowReorder) {
             const handle = document.createElement('div');
-            handle.className = 'twm-sortable-list__handle';
+            handle.className = HANDLE_CLASS;
             handle.innerHTML = '<span class="material-symbols-outlined">drag_indicator</span>';
             row.appendChild(handle);
         }