flexdesk 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.2.0",
+    "version": "0.4.0",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {
@@ -57,7 +57,8 @@
     },
     "scripts": {
         "build": "node build.mjs",
-        "check": "node build.mjs --check"
+        "check": "node build.mjs --check",
+        "test": "node tests/run.mjs"
     },
     "devDependencies": {
         "esbuild": "^0.28.1"

package/src/charts/chart_types.js

@@ -17,6 +17,15 @@ export const CHART_TYPES_2D = Object.freeze([
     { value: 'area', label: 'Area' },
     { value: 'area-stacked', label: 'Area (Stacked %)' },
     { value: 'phase', label: 'Phase' },
+    // Categorical part-of-whole. They belong in this list because the list is
+    // what a consumer renders as its chart-type dropdown — but they are NOT
+    // (x[], y[]) charts, and `buildTrace` leaves for them before the switch:
+    // read the early return there before adding a fourth. `indicator` is
+    // deliberately NOT here, because it takes a SCALAR — a dropdown offering it
+    // beside these would offer a rendering of data the chart is not bound to.
+    { value: 'pie', label: 'Pie' },
+    { value: 'donut', label: 'Donut' },
+    { value: 'funnel', label: 'Funnel' },
 ]);
 
 /**
@@ -76,6 +85,7 @@ const INTERPOLATION_MAP = {
  * @param {string} [options.yAxisId] - Y-axis identifier (y, y2, y3, etc.)
  * @param {boolean} [options.showMarkers] - Show data point markers
  * @param {number} [options.seriesIndex] - Index for default color selection
+ * @param {Array<string>} [options.colors] - Per-CATEGORY colors, pie/donut/funnel only
  * @returns {Object} Plotly trace object
  */
 export function buildTrace(options) {
@@ -93,10 +103,62 @@ export function buildTrace(options) {
         showMarkers = false,
         seriesIndex = 0,
         stackGroup = null,
+        colors = null,
     } = options;
 
     const seriesColor = color || getSeriesColor(seriesIndex);
 
+    // ── categorical part-of-whole: pie, donut, funnel ────────────────────
+    // These leave here, ABOVE the switch, and that placement is the whole
+    // point rather than a tidiness. Everything below is written against the
+    // base trace built at the end of the switch — `{type, name, x, y}` — and a
+    // pie has neither an x nor a y: Plotly reads `labels` and `values`, and a
+    // stray `x` rides along ignored right up until someone puts the trace on a
+    // shared axis and it is not ignored any more.
+    //
+    // The marker block further down is the sharper edge. It fires on
+    // `showMarkers` for ANY chart type and assigns `marker = {color, size}` —
+    // which would overwrite `marker.colors`, the per-slice palette, with one
+    // scalar colour and turn a seven-slice pie into a single blue disc. A
+    // `case` in the switch cannot avoid either hazard; leaving before both can.
+    if (chartType === 'pie' || chartType === 'donut' || chartType === 'funnel') {
+        // `seriesIndex` is not consulted: a pie IS the chart, so its slices
+        // start at the top of the palette rather than continuing someone
+        // else's series numbering.
+        const sliceColors = Array.isArray(colors) && colors.length
+            ? colors
+            : y.map((_, i) => getSeriesColor(i));
+
+        if (chartType === 'funnel') {
+            // A funnel is bar-shaped, so it is `marker.color` (singular, and
+            // an array is legal) — NOT the `marker.colors` a pie wants. The
+            // two spellings are not interchangeable and neither errors.
+            return {
+                type: 'funnel',
+                name,
+                y: x,               // stages read down the categorical axis
+                x: y,               // ...and the measure runs across
+                marker: { color: sliceColors },
+                textinfo: 'value+percent initial',
+            };
+        }
+
+        return {
+            type: 'pie',
+            name,
+            labels: x,
+            values: y,
+            marker: { colors: sliceColors },
+            // Plotly sorts slices descending by default. The caller has
+            // already ordered its rows — a dashboard binding carries its own
+            // `sort` — and a second, invisible reordering here makes the chart
+            // disagree with the table beside it and with the config that
+            // produced both.
+            sort: false,
+            ...(chartType === 'donut' ? { hole: 0.55 } : {}),
+        };
+    }
+
     // Determine Plotly trace type and mode
     let plotlyType, mode;
     switch (chartType) {
@@ -697,3 +759,108 @@ export function buildHeatmapTrace(options) {
 
     return trace;
 }
+
+// Delta sense, in the palette's own idiom (Solarized, per COLOR_PALETTE). A
+// caller whose metric is better when it falls — cost, latency, churn — passes
+// its own two colours rather than expecting a flag here: "up is good" is a
+// property of the measure, and this file has never been told what the measure
+// is.
+const DELTA_UP = '#859900';   // Solarized green
+const DELTA_DOWN = '#dc322f'; // Solarized red
+
+/**
+ * Create a Plotly `indicator` trace — a big number, optionally with a gauge
+ * arc under it and a delta against a reference.
+ *
+ * This is NOT reachable through `buildTrace`, and `indicator` is not in
+ * `CHART_TYPES_2D`: `buildTrace`'s contract is two parallel arrays and an
+ * indicator takes a single scalar, so offering it in the same dropdown would
+ * offer a rendering that cannot consume what the dropdown's chart is bound to.
+ *
+ * The returned object is a plain literal and yours to extend — `domain` for
+ * two indicators in one div, `number.prefix` / `number.valueformat` for
+ * currency. Number formatting is deliberately not a parameter: a consumer that
+ * already owns a value formatter and hands Plotly a second one shows the
+ * currency symbol twice, and neither side knows the other did it.
+ *
+ * @param {Object} options
+ * @param {number} options.value - The number to show
+ * @param {number} [options.min] - Gauge floor (default 0)
+ * @param {number} [options.max] - Gauge ceiling; null draws NO gauge
+ * @param {string} [options.title] - Label above the number
+ * @param {Array<{range: number[], color: string}>} [options.steps] - Banded background
+ * @param {number|{value: number, color: string, width: number, thickness: number}} [options.threshold]
+ * @param {string} [options.color] - The gauge bar colour
+ * @param {number} [options.seriesIndex] - Palette index when `color` is absent
+ * @param {number|{reference: number, relative: boolean, increasing: string, decreasing: string}} [options.delta]
+ * @returns {Object} Plotly indicator trace
+ */
+export function buildIndicatorTrace(options) {
+    const {
+        value,
+        min = 0,
+        max = null,
+        title = '',
+        steps = null,
+        threshold = null,
+        color = null,
+        seriesIndex = 0,
+        delta = null,
+    } = options;
+
+    // A gauge with no ceiling has no arc to draw. Inventing one — twice the
+    // value, the next round number — draws a chart that is quietly wrong about
+    // the only thing a gauge communicates, so an absent `max` degrades to the
+    // bare number instead.
+    const hasGauge = typeof max === 'number' && Number.isFinite(max);
+
+    // `0` is an ordinary reference — last month's total was zero — so the test
+    // is `typeof`, never truthiness. Under a truthiness test `delta: 0` drops
+    // the comparison the tile exists to draw, silently and only sometimes.
+    const deltaSpec = typeof delta === 'number' ? { reference: delta }
+                    : (delta && typeof delta === 'object') ? delta
+                    : null;
+
+    const parts = ['number'];
+    if (hasGauge) parts.unshift('gauge');
+    if (deltaSpec) parts.push('delta');
+
+    const trace = {
+        type: 'indicator',
+        mode: parts.join('+'),
+        value,
+    };
+
+    if (title) trace.title = { text: title };
+
+    if (deltaSpec) {
+        trace.delta = {
+            reference: deltaSpec.reference,
+            relative: deltaSpec.relative === true,
+            increasing: { color: deltaSpec.increasing || DELTA_UP },
+            decreasing: { color: deltaSpec.decreasing || DELTA_DOWN },
+        };
+    }
+
+    if (hasGauge) {
+        trace.gauge = {
+            axis: { range: [min, max] },
+            bar: { color: color || getSeriesColor(seriesIndex) },
+        };
+        // Passed through rather than derived. A band means something to the
+        // consumer — a target, an SLA, a red zone — and this file cannot guess
+        // where it sits.
+        if (Array.isArray(steps) && steps.length) trace.gauge.steps = steps;
+
+        if (threshold !== null && threshold !== undefined) {
+            const t = typeof threshold === 'number' ? { value: threshold } : threshold;
+            trace.gauge.threshold = {
+                line: { color: t.color || DELTA_DOWN, width: t.width ?? 3 },
+                thickness: t.thickness ?? 0.9,
+                value: t.value,
+            };
+        }
+    }
+
+    return trace;
+}

package/src/charts/plotly_wrapper.js

@@ -184,36 +184,204 @@ export async function ensurePlotly() {
             + 'or call setPlotlySource("/path/to/plotly.min.js") before rendering a chart.');
     }
 
-    // Start loading — temporarily hide AMD define so Plotly sets window.Plotly
-    // instead of registering itself as an AMD module (conflicts with Monaco loader).
-    _plotlyLoadPromise = new Promise((resolve, reject) => {
+    // Start loading — make Plotly's UMD header take its browser-global branch
+    // WITHOUT asking any other script on the page to give up AMD, even for a
+    // moment.
+    //
+    // ══ WHY THE SCRIPT TAG IS NOT USED FIRST ═══════════════════════════════
+    //
+    // Plotly's header asks one question — `typeof define === 'function' &&
+    // define.amd` — and takes the AMD branch if the answer is yes, leaving
+    // `window.Plotly` unset because nothing calls the anonymous module back. A
+    // `<script>` tag therefore has to change what that question answers, and a
+    // global is the only place to change it. That is what this function used to
+    // do: it hid `define.amd` for the length of the fetch (see
+    // `loadThroughMaskedDefine` below for the two ways a cruder version of that
+    // breaks).
+    //
+    // MASKING IS STILL WRONG, AND MONACO IS THE PROOF. The window lasts as long
+    // as a 4.4 MB download, and any OTHER script that executes inside it asks
+    // the same question and gets the answer meant for Plotly. Monaco's
+    // `editor.main.js` — 3.7 MB, fetched on demand, so it lands wherever it
+    // lands — asks it twice:
+    //
+    //     typeof define=="function"&&define.amd ? define(ne[447], …)   // marked
+    //     … || typeof define=="function"&&define.amd) && (globalThis.monaco = m)
+    //
+    // The first is the copy of `marked` bundled INSIDE `editor.main.js`. Told
+    // there is no AMD, it registers itself as `globalThis.marked` instead of as
+    // the module `vs/base/common/marked/marked` — so Monaco's loader goes
+    // looking for that module as a FILE, which the `min` distribution does not
+    // ship (it is bundled, precisely here). The 404 fails the whole
+    // `vs/editor/editor.main` require:
+    //
+    //     Loading "vs/base/common/marked/marked" failed
+    //     Here are the modules that depend on it: vs/base/browser/markdownRenderer
+    //
+    // The second means `window.monaco` is never set even if the first is
+    // survived. Monaco's `monacoReady` has no reject path, so neither shows up
+    // as a failure: the editor simply never arrives, for the life of the page,
+    // and every consumer sits in its textarea fallback. Measured on the running
+    // deployment on 2026-09-04: 5 boots in 8 lost Monaco this way, 0 in 8 with
+    // the Plotly warm-up removed.
+    //
+    // ══ SO THE GLOBALS ARE NOT TOUCHED AT ALL ══════════════════════════════
+    //
+    // Fetch the source, then evaluate it in a function whose PARAMETERS are
+    // named `define`, `module` and `exports`. Inside that scope `typeof define`
+    // is "undefined" — the answer Plotly needs — while `window.define` is never
+    // read, written or deleted, so no other script can observe anything. The
+    // window is not a window at all: it is one synchronous evaluation, and
+    // nothing else can run inside it by construction.
+    //
+    // The masked-tag path stays as the FALLBACK for a source this page cannot
+    // fetch — a CDN without CORS is the case that matters, and it is exactly the
+    // case where a `<script>` tag still works.
+    _plotlyLoadPromise = (async () => {
+        let code;
+        try {
+            const response = await fetch(_plotlySrc, { credentials: 'same-origin' });
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            code = await response.text();
+        } catch (err) {
+            // The FETCH failed, which a tag may still survive. An evaluation
+            // failure is not caught here: it would fail identically through a
+            // tag, and swallowing it would replace a real message with a
+            // misleading one.
+            return loadThroughMaskedDefine();
+        }
+        return evaluateWithoutAmd(code, _plotlySrc);
+    })();
+
+    return _plotlyLoadPromise;
+}
+
+/**
+ * Run Plotly's bundle with the three UMD globals shadowed as local names.
+ *
+ * `new Function` is not strict, so `this` is the global object inside the body —
+ * which is what Plotly's header is invoked with (`}(self, …)` in 2.x, `this` in
+ * older builds), and is why the browser-global branch still lands `Plotly` on
+ * the window rather than on a scope that disappears.
+ *
+ * @param {string} code the bundle's source
+ * @param {string} src  where it came from, for the debugger's file list
+ * @returns {object} the `Plotly` global
+ */
+function evaluateWithoutAmd(code, src) {
+    // eslint-disable-next-line no-new-func
+    const run = new Function('define', 'module', 'exports',
+                             `${code}\n//# sourceURL=${src}`);
+    run(undefined, undefined, undefined);
+    if (typeof Plotly === 'undefined') {
+        throw new Error(`Plotly.js was evaluated from ${src} but did not define a `
+            + 'Plotly global — the file may not be a Plotly UMD bundle.');
+    }
+    return Plotly;
+}
+
+/**
+ * The `<script>` tag path, for a source this page cannot fetch.
+ *
+ * ══ WHY `define` IS MASKED AND NOT REMOVED ═════════════════════════════════
+ *
+ * Hiding `window.define` outright breaks the page two ways, both observed on a
+ * running deployment on 2026-08-31:
+ *
+ *   1. `window.define = undefined`, restored on load. Monaco's `loader.js`
+ *      installs an AMD loader DURING the window, Plotly's header then sees
+ *      `typeof define === 'function' && define.amd`, registers as an anonymous
+ *      module nothing calls back, and the load "succeeds" with `window.Plotly`
+ *      still undefined:
+ *          This chart could not be drawn: Plotly.js loaded but Plotly global
+ *          not found
+ *      — true, unhelpful, and it sends the reader hunting for a missing file
+ *      that is being served correctly.
+ *
+ *   2. The mirror. Monaco loads in TWO stages: `loader.js` sets `define`, and
+ *      `editor.main.js` arrives later and calls it. If stage two lands while
+ *      `define` is hidden:
+ *          editor.main.js:5 Uncaught TypeError: globalDefine is not a function
+ *      One race costs the chart; the other costs the editor.
+ *
+ * Masking the PROPERTY rather than the function fixes both — `define` stays
+ * callable, `amd` is withheld — and it is still not safe for anybody else who
+ * asks the `define.amd` question inside the window. `ensurePlotly` says what
+ * that costs; this path is taken only when there is no alternative.
+ *
+ * @returns {Promise<object>} the `Plotly` global
+ */
+function loadThroughMaskedDefine() {
+    return new Promise((resolve, reject) => {
+        const hadDefine = 'define' in window;
         const savedDefine = window.define;
-        window.define = undefined;
+        let arrivedDefine;          // what somebody installed mid-window
+        let arrived = false;
+        let guarded = false;
+
+        /** The same function with `amd` withheld. Plotly reads `define.amd` and
+         *  stops; everyone else calls it and it behaves. */
+        const maskAmd = (value) => {
+            if (typeof value !== 'function') return undefined;
+            const masked = function define(...args) { return value.apply(this, args); };
+            for (const key of Object.getOwnPropertyNames(value)) {
+                if (key === 'amd' || key === 'length' || key === 'name') continue;
+                try { masked[key] = value[key]; } catch { /* getters that throw */ }
+            }
+            masked.amd = undefined;
+            return masked;
+        };
+
+        try {
+            Object.defineProperty(window, 'define', {
+                configurable: true,
+                enumerable: true,
+                get: () => maskAmd(arrived ? arrivedDefine : savedDefine),
+                set: (value) => { arrivedDefine = value; arrived = true; },
+            });
+            guarded = true;
+        } catch {
+            // A host that refuses the redefinition still gets the old
+            // behaviour, which is right far more often than it is wrong.
+            window.define = undefined;
+        }
+
+        /** Put the REAL `define` back, exactly once, preferring what arrived. */
+        const release = () => {
+            const value = arrived ? arrivedDefine : savedDefine;
+            if (guarded) {
+                delete window.define;
+                guarded = false;
+            }
+            // `hadDefine` matters: assigning `undefined` leaves an own property
+            // whose value is undefined, and `'define' in window` then answers
+            // true for a global that was never there. Some loaders test that.
+            if (arrived || hadDefine) window.define = value;
+        };
 
         const script = document.createElement('script');
         script.src = _plotlySrc;
         script.async = true;
 
         script.onload = () => {
-            window.define = savedDefine;
+            release();
             if (typeof Plotly !== 'undefined') {
-                console.log('[PlotlyWrapper] Plotly.js loaded successfully');
                 resolve(Plotly);
             } else {
-                reject(new Error('Plotly.js loaded but Plotly global not found'));
+                reject(new Error('Plotly.js loaded but Plotly global not found. '
+                    + 'Something defined an AMD loader while it was loading, so '
+                    + 'Plotly registered as a module instead of a global.'));
             }
         };
 
         script.onerror = () => {
-            window.define = savedDefine;
+            release();
             reject(new Error(`Failed to load Plotly.js from ${_plotlySrc} — `
                 + 'call setPlotlySource() with the path to your copy.'));
         };
 
         document.head.appendChild(script);
     });
-
-    return _plotlyLoadPromise;
 }
 
 /**

package/src/editor/notebook_tab_bar.js

@@ -71,9 +71,25 @@ export class NotebookTabBar {
                 const title = e.target.closest('.tab')?.querySelector('.twm-tab-title');
                 return title?.getAttribute('contenteditable') !== 'true';
             },
-            onDragStart: (e, key) => {
+            onDragStart: (e, key, item) => {
                 // Carry the cross-pane MIME so other panes accept this tab.
                 try { e.dataTransfer.setData(TAB_MIME, key); } catch (_) {}
+                // C33. …AND LET THE HOST ADD ITS OWN, which is the whole of
+                // what a second consumer of this strip needs from it.
+                //
+                // `DragReorder` publishes this hook for exactly this purpose
+                // ("host hook to augment dataTransfer (e.g. add a cross-pane
+                // MIME)", `../ui/components/drag_reorder.js`), and this class
+                // consumed it and stopped there. The tile renderer mounts one
+                // of these per tile and needs to mark the drag as one of ITS
+                // tabs — a different question from "is this an editor tab",
+                // asked of the same gesture.
+                //
+                // ADDITIVE BY CONSTRUCTION: `TAB_MIME` is set first and
+                // unchanged, so `EditorPane`'s existing cross-pane drop cannot
+                // notice that anyone else is listening.
+                try { this.#callbacks.onDragStart?.(e, key, item); }
+                catch (err) { console.error('[tab-bar] onDragStart threw', err); }
             },
             onReorder: (order) => this.#callbacks.onReorder?.(order),
         });
@@ -226,10 +242,30 @@ export class NotebookTabBar {
         this.#container.removeEventListener('dragleave', this.#onStripDragLeave);
     }
 
-    /** Check whether a drag event carries a cross-pane tab (not from this bar). */
+    /** Check whether a drag event carries a cross-pane tab (not from this bar).
+     *
+     *  C33. A HOST MAY NAME A SECOND MIME, at mount, as
+     *  `callbacks.externalTabMimes` — the tile renderer's tabs are not editor
+     *  tabs and do not carry `application/x-ecosim-tab`, so without this the
+     *  strip in tile B would refuse a tab dragged out of tile A's strip. Empty
+     *  by default, so every existing consumer keeps exactly today's admission
+     *  test.
+     *
+     *  THE `isActive()` EARLY RETURN STAYS FIRST AND STAYS UNCHANGED. It is the
+     *  one line that keeps this bar's own reorder from being read as a foreign
+     *  drop, and no widening of the MIME list may be allowed to reach past it.
+     *
+     *  Only `types` is consulted, never `getData` — under the HTML5 protected
+     *  mode `getData` returns the empty string for every event except `drop`,
+     *  so a payload read here would find nothing and arm nothing. */
     #isExternalTabDrag(e) {
         if (this.#dragReorder?.isActive()) return false; // same-pane drag is active
-        try { return e.dataTransfer.types.includes(TAB_MIME); } catch { return false; }
+        const extra = Array.isArray(this.#callbacks.externalTabMimes)
+            ? this.#callbacks.externalTabMimes : [];
+        try {
+            const types = e.dataTransfer.types;
+            return types.includes(TAB_MIME) || extra.some((m) => types.includes(m));
+        } catch { return false; }
     }
 
     // Same-pane reorder is handled by the shared DragReorder module (set