flexdesk 0.16.1 → 0.17.1

package/src/core/state_guard.js

@@ -19,8 +19,12 @@ const HOOK_REGISTRY = {
     datasetProxyCache: new WeakMap(),
 };
 
-const STACK_CACHE = new Map();
+const STACK_CACHE_LIMIT = 500;
+/** `url:line:col` at the end of a frame, in V8 (`at fn (url:1:2)`) and in Firefox/WebKit (`fn@url:1:2`). */
+const FRAME_LOCATION = /(?:\(|@|\bat\s+)([^()\s@][^()\s]*?):\d+(?::\d+)?\)?\s*$/;
 const DATA_ATTRIBUTE_PREFIX = 'data-';
+/** Set by the DOM hooks below: one hook frame sits between the writer and handle*Mutation. */
+const VIA_DOM_HOOK = Symbol('state-guard:via-dom-hook');
 const EVENT_CHANNELS = Object.freeze({
     READY: 'state-guard:ready',
     VIOLATION: 'state-guard:violation',
@@ -41,13 +45,15 @@ export class StateGuardService {
         this.mode = this.config.mode;
         this.allowedAttributes = new Set(this.config.allowedAttributes.map((attr) => attr.toLowerCase()));
         this.allowedAttributePrefixes = this.config.allowedAttributePrefixes.map((attr) => attr.toLowerCase());
-        this.allowedDatasetKeys = new Set(this.config.allowedDatasetKeys.map((key) => key.toLowerCase()));
+        this.allowedDatasetKeys = new Set(this.config.allowedDatasetKeys.map(normalizeDatasetKey));
         this.moduleOverrides = (this.config.moduleOverrides ?? []).map((entry) => ({
             pattern: entry.pattern,
             attributes: new Set(entry.attributes.map((attr) => attr.toLowerCase())),
-            datasetKeys: new Set(entry.datasetKeys.map((key) => key.toLowerCase())),
+            datasetKeys: new Set(entry.datasetKeys.map(normalizeDatasetKey)),
             attributePrefixes: entry.attributePrefixes.map((prefix) => prefix.toLowerCase()),
         }));
+        this.moduleFramePattern = this.config.moduleFramePattern;
+        this.stackCache = new Map();
         this.#installHooks();
     }
 
@@ -78,7 +84,7 @@ export class StateGuardService {
         const entry = {
             pattern,
             attributes: new Set(attributes.map((attr) => String(attr).toLowerCase())),
-            datasetKeys: new Set(datasetKeys.map((key) => String(key).toLowerCase())),
+            datasetKeys: new Set(datasetKeys.map(normalizeDatasetKey)),
             attributePrefixes: attributePrefixes.map((prefix) => String(prefix).toLowerCase()),
         };
         this.moduleOverrides.push(entry);
@@ -121,7 +127,11 @@ export class StateGuardService {
         }
     }
 
-    handleAttributeMutation(element, action, attribute, value) {
+    /**
+     * Check one attribute write. The write is attributed to the caller of this
+     * method, or to the caller of the patched DOM API when it came through one.
+     */
+    handleAttributeMutation(element, action, attribute, value, options = {}) {
         const attrName = this.#normalizeAttribute(attribute);
         if (!this.#shouldGuard(attrName)) {
             return;
@@ -132,15 +142,19 @@ export class StateGuardService {
             element,
             value,
             source: 'attribute',
+            stack: new Error().stack,
+            writerFrame: options?.[VIA_DOM_HOOK] ? 2 : 1,
         });
     }
 
-    handleDatasetMutation(element, key, value, { deleting = false } = {}) {
-        const attrName = this.#datasetKeyToAttribute(key);
+    handleDatasetMutation(element, key, value, { deleting = false, [VIA_DOM_HOOK]: viaHook = false } = {}) {
+        const attrName = datasetKeyToAttribute(key);
         if (!this.#shouldGuard(attrName)) {
             return;
         }
         this.#evaluateMutation({
+            stack: new Error().stack,
+            writerFrame: viaHook ? 2 : 1,
             action: deleting ? 'dataset:delete' : 'dataset:set',
             attribute: attrName,
             element,
@@ -190,8 +204,8 @@ export class StateGuardService {
         return true;
     }
 
-    #evaluateMutation({ action, attribute, element, value, source }) {
-        const moduleKey = this.#resolveModuleFromStack();
+    #evaluateMutation({ action, attribute, element, value, source, stack, writerFrame }) {
+        const moduleKey = this.#resolveModuleFromStack(stack, writerFrame);
         if (this.#isAllowedForModule(moduleKey, attribute)) {
             return;
         }
@@ -246,44 +260,47 @@ export class StateGuardService {
         return String(attribute).toLowerCase();
     }
 
-    #datasetKeyToAttribute(key) {
-        if (!key && key !== 0) {
-            return '';
-        }
-        const normalized = String(key)
-            .replace(/([A-Z])/g, '-$1')
-            .replace(/[^a-zA-Z0-9_-]/g, '-')
-            .toLowerCase()
-            .replace(/-{2,}/g, '-')
-            .replace(/^-+/, '')
-            .replace(/-+$/, '');
-        if (!normalized) {
-            return '';
-        }
-        return `${DATA_ATTRIBUTE_PREFIX}${normalized}`;
-    }
-
-    #resolveModuleFromStack() {
-        const stack = new Error().stack;
+    /**
+     * The module a write is attributed to. `stack` was captured in a
+     * handle*Mutation method (frame 0); `writerFrame` is the index of the frame
+     * that made the write (1 for a direct call, 2 through a DOM hook). Without a
+     * `moduleFramePattern` that writer's location (its URL or path, line and
+     * column dropped) is the module. With one, the first frame from the writer
+     * up whose location matches is used, and the module is the pattern's first
+     * capture group, or that frame's whole location when it has none.
+     */
+    #resolveModuleFromStack(stack, writerFrame) {
         if (!stack) {
             return null;
         }
-        if (STACK_CACHE.has(stack)) {
-            return STACK_CACHE.get(stack);
+        const cacheKey = `${writerFrame}\n${stack}`;
+        if (this.stackCache.has(cacheKey)) {
+            return this.stackCache.get(cacheKey);
         }
-        const lines = stack.split('\n');
-        let modulePath = null;
-        for (const line of lines) {
-            const match = line.match(/(js_new\/[^)\s]+)/);
+        const locations = [];
+        for (const line of String(stack).split('\n')) {
+            const match = line.match(FRAME_LOCATION);
             if (match) {
-                modulePath = match[1];
-                break;
+                locations.push(match[1]);
+            }
+        }
+        const callers = locations.slice(writerFrame);
+        let modulePath = null;
+        if (!this.moduleFramePattern) {
+            modulePath = callers[0] ?? null;
+        } else {
+            for (const location of callers) {
+                const match = location.match(this.moduleFramePattern);
+                if (match) {
+                    modulePath = match[1] ?? location;
+                    break;
+                }
             }
         }
-        if (STACK_CACHE.size > 500) {
-            STACK_CACHE.clear();
+        if (this.stackCache.size > STACK_CACHE_LIMIT) {
+            this.stackCache.clear();
         }
-        STACK_CACHE.set(stack, modulePath);
+        this.stackCache.set(cacheKey, modulePath);
         return modulePath;
     }
 
@@ -299,6 +316,36 @@ export class StateGuardService {
     }
 }
 
+/**
+ * The attribute a dataset key writes: `fooBar` -> `data-foo-bar`, as the DOM
+ * maps it. Empty for a key that names nothing.
+ */
+function datasetKeyToAttribute(key) {
+    if (!key && key !== 0) {
+        return '';
+    }
+    const normalized = String(key)
+        .replace(/([A-Z])/g, '-$1')
+        .replace(/[^a-zA-Z0-9_-]/g, '-')
+        .toLowerCase()
+        .replace(/-{2,}/g, '-')
+        .replace(/^-+/, '')
+        .replace(/-+$/, '');
+    if (!normalized) {
+        return '';
+    }
+    return `${DATA_ATTRIBUTE_PREFIX}${normalized}`;
+}
+
+/**
+ * An allow-list dataset key in the one spelling the guard compares: the
+ * attribute's, without `data-`. `fooBar` and `foo-bar` are the same key, so an
+ * allow-list may use either.
+ */
+function normalizeDatasetKey(key) {
+    return datasetKeyToAttribute(key).slice(DATA_ATTRIBUTE_PREFIX.length);
+}
+
 function installDomHooks(service) {
     if (HOOK_REGISTRY.installed) {
         HOOK_REGISTRY.service = service;
@@ -316,21 +363,13 @@ function installDomHooks(service) {
 
     Element.prototype.setAttribute = function patchedSetAttribute(name, value) {
         const guard = HOOK_REGISTRY.service;
-        try {
-            guard?.handleAttributeMutation(this, 'setAttribute', name, value);
-        } catch (error) {
-            throw error;
-        }
+        guard?.handleAttributeMutation(this, 'setAttribute', name, value, { [VIA_DOM_HOOK]: true });
         return nativeSetAttribute.call(this, name, value);
     };
 
     Element.prototype.removeAttribute = function patchedRemoveAttribute(name) {
         const guard = HOOK_REGISTRY.service;
-        try {
-            guard?.handleAttributeMutation(this, 'removeAttribute', name, undefined);
-        } catch (error) {
-            throw error;
-        }
+        guard?.handleAttributeMutation(this, 'removeAttribute', name, undefined, { [VIA_DOM_HOOK]: true });
         return nativeRemoveAttribute.call(this, name);
     };
 
@@ -362,7 +401,7 @@ function wrapDataset(service) {
                     const guard = HOOK_REGISTRY.service;
                     const key = typeof prop === 'string' ? prop : null;
                     if (guard && key) {
-                        guard.handleDatasetMutation(proxyState.element, key, value);
+                        guard.handleDatasetMutation(proxyState.element, key, value, { [VIA_DOM_HOOK]: true });
                     }
                     return Reflect.set(target, prop, value);
                 },
@@ -370,7 +409,10 @@ function wrapDataset(service) {
                     const guard = HOOK_REGISTRY.service;
                     const key = typeof prop === 'string' ? prop : null;
                     if (guard && key) {
-                        guard.handleDatasetMutation(proxyState.element, key, undefined, { deleting: true });
+                        guard.handleDatasetMutation(proxyState.element, key, undefined, {
+                            deleting: true,
+                            [VIA_DOM_HOOK]: true,
+                        });
                     }
                     return Reflect.deleteProperty(target, prop);
                 },

package/src/core/state_guard_config.js

@@ -16,7 +16,6 @@ const DEFAULT_ALLOWED_ATTRIBUTES = Object.freeze([
     'aria-busy',
     'role',
     'title',
-    'twm-has-tooltip',
     'data-tooltip',
     'data-help-topic',
 ]);
@@ -31,7 +30,6 @@ const DEFAULT_ALLOWED_DATASET_KEYS = Object.freeze([
     'deleting',
     // Notification center
     'notification-id',
-    'notificationId',
     // Plotly.js internal attributes (third-party charting library)
     'unformatted',
     'toggle',
@@ -46,56 +44,37 @@ const DEFAULT_ALLOWED_DATASET_KEYS = Object.freeze([
     'group',
     'trace',
     'point',
-    'curveNumber',
-    'pointNumber',
+    'curve-number',
+    'point-number',
     // UI state keys used by original HTML structure
     'active-content',
-    'activeContent',
     'panel-content',
-    'panelContent',
     'collapsible-id',
-    'collapsibleId',
     'collapsible-default',
-    'collapsibleDefault',
-    'twm-collapsible-header',
-    'collapsibleHeader',
-    'twm-collapsible-content',
-    'collapsibleContent',
+    'collapsible-header',
+    'collapsible-content',
     'collapsible-group',
-    'collapsibleGroup',
     'collapsible-exclusive',
-    'collapsibleExclusive',
     'collapsible-float',
-    'collapsibleFloat',
     'collapsible-fill',
-    'collapsibleFill',
     'tool',
     'tab',
     'role',
     'op',
     'func-name',
-    'funcName',
     'func-expr',
-    'funcExpr',
     'arity',
     'tooltip',
-    'twm-latex-tooltip',
-    'latexTooltip',
+    'latex-tooltip',
     'node-type',
-    'nodeType',
-    'twm-node-name',
-    'nodeName',
+    'node-name',
     'lang',
     'playback-control',
-    'playbackControl',
     // Simulation/scenario state keys
     'status',
     'scenario-id',
-    'scenarioId',
     'run-id',
-    'runId',
     'run-state',
-    'runState',
     'selected',
     'active',
     'disabled',
@@ -105,53 +84,33 @@ const DEFAULT_ALLOWED_DATASET_KEYS = Object.freeze([
     'hidden',
     // Node/canvas state keys
     'node-id',
-    'nodeId',
     'connector-id',
-    'connectorId',
     'connector-type',
-    'connectorType',
     'connection-id',
-    'connectionId',
     'input-index',
-    'inputIndex',
     'output-index',
-    'outputIndex',
     'port-index',
-    'portIndex',
     // Scenario editor keys
     'source',
     'series-id',
-    'seriesId',
     'dataset-id',
-    'datasetId',
     'mirror-input-bound',
-    'mirrorInputBound',
     'mirror-change-bound',
-    'mirrorChangeBound',
     'mirror-input',
-    'mirrorInput',
     'bound',
     'field',
     'key',
     'namespace',
     'namespace-id',
-    'namespaceId',
     'tab-id',
-    'tabId',
     'param-id',
-    'paramId',
     'target-id',
-    'targetId',
     'override-type',
-    'overrideType',
     // Tree view component keys
     'item-id',
-    'itemId',
     'category-id',
-    'categoryId',
     // Calibration page keys
     'info-for',
-    'infoFor',
     'column',
     // Data page keys
     'readonly',
@@ -174,53 +133,102 @@ const DEFAULT_ALLOWED_DATASET_KEYS = Object.freeze([
     'description',
     // DSL generator keys
     'dsl-state',
-    'dslState',
     'dsl-section-registered',
-    'dslSectionRegistered',
     'dsl-scrollbars-installed',
-    'dslScrollbarsInstalled',
     'dsl-tabs-bound',
-    'dslTabsBound',
     'dsl-controls-bound',
-    'dslControlsBound',
     // Inline highlighter keys
     'inline-hl',
-    'inlineHl',
-    'tooltip',
     // Overlay scrollbar keys (UI-only, not state storage)
     'scrollable',
     'scrollable-x',
-    'scrollableX',
     'scrollable-y',
-    'scrollableY',
     // ManagedWindow component keys
     'window-id',
-    'windowId',
     // Help system keys
     'help-topic',
-    'helpTopic',
-]);
-
-const DEFAULT_OVERRIDES = Object.freeze([
-    {
-        // Panel controller writes dataset hooks for field identification/focus.
-        pattern: /js_new\/ui\/controllers\/panel_controller\.js/,
-        datasetKeys: ['field', 'descriptor-key', 'descriptorKey'],
-        attributes: ['data-field', 'data-descriptor-key'],
-        attributePrefixes: [],
-    },
+    // FlexDesk widgets: every literal data key written under src/ is listed
+    // here (tests/state_guard_defaults.test.mjs scans for them), so the
+    // shell, dialogs, forms, tooltips and editors pass a strict guard.
+    'accent',
+    'act',
+    'action-idx',
+    'action-value',
+    'add',
+    'category',
+    'code',
+    'data',
+    'direction',
+    'dismiss',
+    'entry',
+    'error',
+    'extra',
+    'flow',
+    'from',
+    'gap',
+    'group-id',
+    'item',
+    'kind',
+    'lane',
+    'leaf-id',
+    'level',
+    'list-action',
+    'match',
+    'mode',
+    'node',
+    'note-id',
+    'notification-summary',
+    'open',
+    'pager',
+    'pane',
+    'pane-id',
+    'parameter',
+    'placeholder',
+    'placement',
+    'port',
+    'record-key',
+    'ref',
+    'refusal',
+    'refusal-for',
+    'renameable',
+    'row-key',
+    'rule',
+    'scope',
+    'shape',
+    'slot',
+    'slot-idx',
+    'split-id',
+    'state',
+    'step',
+    'syntax',
+    'tile-id',
+    'tile-type',
+    'tip',
+    'to',
+    'tone',
+    'tooltip-max-width',
+    'tooltip-placement',
+    'twm-flow-item',
+    'twm-flow-title',
+    'twm-icon',
+    'twm-required',
+    'twm-tabs',
+    'twm-tail',
+    'verb',
 ]);
 
-const DEFAULT_MODE = typeof window !== 'undefined' && Boolean(window.__ECOSIM_DEBUG__)
-    ? 'strict'
-    : 'warn';
-
 export const DEFAULT_STATE_GUARD_CONFIG = Object.freeze({
-    mode: DEFAULT_MODE,
+    mode: 'warn',
     allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
     allowedAttributePrefixes: DEFAULT_ALLOWED_ATTRIBUTE_PREFIXES,
     allowedDatasetKeys: DEFAULT_ALLOWED_DATASET_KEYS,
-    moduleOverrides: DEFAULT_OVERRIDES,
+    // FlexDesk ships no module overrides: which of YOUR modules may write which
+    // keys is yours to say, through `moduleOverrides` or `allow()`.
+    moduleOverrides: Object.freeze([]),
+    // null: a write is attributed to the frame that made it. A RegExp (or a
+    // literal string) picks the first frame from there up whose location
+    // matches instead; its first capture group, if any, names the module.
+    moduleFramePattern: null,
 });
 
 export function normalizeStateGuardConfig(config = {}) {
@@ -241,6 +249,9 @@ export function normalizeStateGuardConfig(config = {}) {
         moduleOverrides: normalizeOverrides(
             config.moduleOverrides ?? DEFAULT_STATE_GUARD_CONFIG.moduleOverrides,
         ),
+        moduleFramePattern: config.moduleFramePattern == null || config.moduleFramePattern === ''
+            ? DEFAULT_STATE_GUARD_CONFIG.moduleFramePattern
+            : patternToRegExp(config.moduleFramePattern),
     };
 }
 

package/src/editor/editor_pane.js

@@ -21,7 +21,7 @@
  *   └──────────────────────────────┘
  */
 
-import { NotebookTabBar } from './notebook_tab_bar.js';
+import { NotebookTabBar, getTabDragMime } from './notebook_tab_bar.js';
 
 export class EditorPane {
     /** @type {string} */
@@ -141,7 +141,7 @@ export class EditorPane {
             if (this.#isExternalTabDrag(e)) {
                 e.preventDefault();
                 this.#editorContainer.classList.remove('notebook-editor-container--drop-target');
-                const filePath = e.dataTransfer.getData('application/x-ecosim-tab')
+                const filePath = e.dataTransfer.getData(getTabDragMime())
                     || e.dataTransfer.getData('text/plain');
                 if (filePath) {
                     this.#callbacks.onDropFromOtherPane?.(this.#id, filePath);
@@ -248,7 +248,7 @@ export class EditorPane {
 
     /** Check if a drag event is carrying a tab from another pane. */
     #isExternalTabDrag(e) {
-        try { return e.dataTransfer.types.includes('application/x-ecosim-tab'); } catch { return false; }
+        try { return e.dataTransfer.types.includes(getTabDragMime()); } catch { return false; }
     }
 
     dispose() {