@peter.prib/renderengine 0.5.0 → 0.7.0

package/package.json

@@ -1,70 +1,70 @@
-{
-  "name": "@peter.prib/renderengine",
-  "version": "0.5.0",
-  "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
-  "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "browser": "dist/renderengine.umd.js",
-  "exports": {
-    ".": "./src/index.js",
-    "./workspace": "./src/workspace/index.js",
-    "./src/*": "./src/*",
-    "./dist/*": "./dist/*",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "src/",
-    "dist/*.umd.js",
-    "examples/archimate.html",
-    "examples/diagram-editor.html",
-    "examples/data-model.html",
-    "README.md",
-    "REFERENCE.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "start": "node scripts/open.mjs examples/archimate.html",
-    "archimate": "node scripts/open.mjs examples/archimate.html",
-    "diagram": "node scripts/open.mjs examples/diagram-editor.html",
-    "datamodel": "node scripts/open.mjs examples/data-model.html",
-    "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
-    "build": "rollup -c",
-    "prepublishOnly": "npm test && npm run build",
-    "screenshots": "node scripts/screenshots/screenshots.mjs"
-  },
-  "keywords": [
-    "archimate",
-    "archi",
-    "diagram",
-    "diagram-editor",
-    "modelling",
-    "charts",
-    "svg",
-    "canvas",
-    "render",
-    "engine",
-    "graphics"
-  ],
-  "author": "Peter Prib <peter.prib@gmail.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/peter.prib/renderengine.git"
-  },
-  "homepage": "https://gitlab.com/peter.prib/renderengine#readme",
-  "bugs": {
-    "url": "https://gitlab.com/peter.prib/renderengine/-/issues"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-node-resolve": "^15.3.1",
-    "rollup": "^3.30.0"
-  }
-}
+{
+  "name": "@peter.prib/renderengine",
+  "version": "0.7.0",
+  "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "browser": "dist/renderengine.umd.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./workspace": "./src/workspace/index.js",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src/",
+    "dist/*.umd.js",
+    "examples/archimate.html",
+    "examples/diagram-editor.html",
+    "examples/data-model.html",
+    "README.md",
+    "REFERENCE.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "start": "node scripts/open.mjs examples/archimate.html",
+    "archimate": "node scripts/open.mjs examples/archimate.html",
+    "diagram": "node scripts/open.mjs examples/diagram-editor.html",
+    "datamodel": "node scripts/open.mjs examples/data-model.html",
+    "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
+    "build": "rollup -c",
+    "prepublishOnly": "npm test && npm run build",
+    "screenshots": "node scripts/screenshots/screenshots.mjs"
+  },
+  "keywords": [
+    "archimate",
+    "archi",
+    "diagram",
+    "diagram-editor",
+    "modelling",
+    "charts",
+    "svg",
+    "canvas",
+    "render",
+    "engine",
+    "graphics"
+  ],
+  "author": "Peter Prib <peter.prib@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/peter.prib/renderengine.git"
+  },
+  "homepage": "https://gitlab.com/peter.prib/renderengine#readme",
+  "bugs": {
+    "url": "https://gitlab.com/peter.prib/renderengine/-/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "rollup": "^3.30.0"
+  }
+}

package/src/archimateArchiFormat.js

@@ -207,6 +207,8 @@ export function parseArchiModel(xml) {
         elements: [],
         relationships: [],
         views: [],
+        // The Views sub-folders that hold no view (each a path of folder steps); a view carries its own.
+        emptyViewFolders: [],
         // The model's own documentation (Archi's "purpose") and properties, in order (keys may repeat).
         documentation: _childText(root, 'purpose'),
         properties: _propertyPairs(root),
@@ -240,8 +242,10 @@ function _folderStep(folder) {
 }
 
 /** Every view in the Views folder, sub-folders included, in file order; each
- *  remembers its sub-folder path (`archiFolder`). @private */
+ *  remembers its sub-folder path (`archiFolder`). A sub-folder with nothing in
+ *  it is kept as its path (`emptyViewFolders`), as Archi shows it. @private */
 function _walkViewFolder(folder, model, path = []) {
+    if (path.length && !folder.children.some(c => c.tagName === 'element' || c.tagName === 'folder')) model.emptyViewFolders.push(path);
     for (const child of folder.children) {
         if (child.tagName === 'element') {
             const view = _parseView(child);
@@ -754,6 +758,7 @@ export function toArchimateModel(archiModel) {
         id: archiModel.id ?? undefined,
         name: archiModel.name ?? '', elements, relationships, folders, elementFolders, views,
         documentation: archiModel.documentation || undefined, properties: archiModel.properties ?? [],
+        emptyViewFolders: archiModel.emptyViewFolders ?? [],
         // The specializations written for element types Archi lacks are not the model's own.
         archi: archiModel.archi ? {
             ...archiModel.archi,
@@ -1372,6 +1377,7 @@ export function toArchiExport(model) {
         documentation: model.documentation,
         properties: model.properties,
         archi: model.archi,
+        emptyViewFolders: model.emptyViewFolders ?? [],
         elements: model.elements(),
         relationships: model.relationships(),
     }, views];
@@ -1406,7 +1412,8 @@ function _propertyLines(pairs, indent) {
  */
 function _inSubFolders(items, write, indent = '    ') {
     const lines = [];
-    const direct = items.filter(item => !item.archiFolder?.length);
+    // An empty folder comes as {archiFolder, folderOnly}: it makes its folders and writes nothing itself.
+    const direct = items.filter(item => !item.archiFolder?.length && !item.folderOnly);
     // Sub-folders in the order they are first named, each holding the items one level deeper.
     const groups = new Map();
     for (const item of items.filter(item => item.archiFolder?.length)) {
@@ -1492,7 +1499,8 @@ export function toArchiXML(model, views) {
                     { id: rel.id, ...(name && { name }), source: rel.source, target: rel.target, ...(directed && { directed: 'true' }) }, rel, indent);
             }));
         } else if (folder.type === 'diagrams') {
-            body.push(..._inSubFolders(viewArray, (view, indent) => _serializeView(view).map(line => indent.slice(4) + line)));
+            const emptyFolders = (model.emptyViewFolders ?? []).map(archiFolder => ({ archiFolder, folderOnly: true }));
+            body.push(..._inSubFolders([...viewArray, ...emptyFolders], (view, indent) => _serializeView(view).map(line => indent.slice(4) + line)));
         } else {
             body.push(..._inSubFolders(items.map(item => ({ ...item, archiFolder: item.el.archiFolder })),
                 ({ el, type, original, profile }, indent) => _serializeConcept(`archimate:${_toPascalType(type)}`,

package/src/archimateExchangeFormat.js

@@ -80,7 +80,7 @@ export function parseExchangeModel(xml) {
         key: definitions.get(p.getAttribute('propertyDefinitionRef') ?? p.getAttribute('identifierRef')) ?? '',
         value: _text(p, 'value') ?? '',
     }));
-    const folders = _organizationPaths(root);
+    const { paths: folders, emptyViewFolders } = _organizationPaths(root);
 
     const model = {
         id: root.getAttribute('identifier'),
@@ -91,6 +91,7 @@ export function parseExchangeModel(xml) {
         elements: [],
         relationships: [],
         views: [],
+        emptyViewFolders,
     };
     for (const el of _kids(_kid(root, 'elements'), 'element')) {
         model.elements.push(_inFolder(_parseElement(el, pairs(el)), folders));
@@ -116,26 +117,31 @@ function _inFolder(item, folders) {
  * The folder path of every item the organizations hold, by its id: each
  * labelled item it is in, outermost first. An outermost item named as one of
  * Archi's top-level folders is that folder, not a sub-folder (Archi exports
- * its folders so); any other is a sub-folder.
+ * its folders so); any other is a sub-folder. An empty sub-folder of Views
+ * is kept as its path, as parseArchiModel keeps one.
  * @private
+ * @returns {{paths: Map<string, Array>, emptyViewFolders: Array<Array>}}
  */
 function _organizationPaths(root) {
     const topNames = new Set(ARCHI_FOLDERS.map(f => f.name));
+    const viewsName = ARCHI_FOLDERS.find(f => f.type === 'diagrams').name;
     const paths = new Map();
+    const emptyViewFolders = [];
     let made = 0;
-    const walk = (item, path, outermost) => {
+    const walk = (item, path, outermost, top) => {
         for (const child of _kids(item, 'item')) {
             const ref = child.getAttribute('identifierRef');
             if (ref) { paths.set(ref, path); continue; }
             const name = _text(child, 'label') ?? '';
-            if (outermost && topNames.has(name)) { walk(child, path, false); continue; }
+            if (outermost && topNames.has(name)) { walk(child, path, false, name); continue; }
             const documentation = _text(child, 'documentation');
             const step = { id: child.getAttribute('identifier') ?? `folder-${++made}`, name, ...(documentation && { documentation }) };
-            walk(child, [...path, step], false);
+            if (top === viewsName && !_kids(child, 'item').length) emptyViewFolders.push([...path, step]);
+            walk(child, [...path, step], false, top);
         }
     };
-    for (const organization of _kids(root, 'organizations')) walk(organization, [], true);
-    return paths;
+    for (const organization of _kids(root, 'organizations')) walk(organization, [], true, null);
+    return { paths, emptyViewFolders };
 }
 
 /** An element as parseArchiModel gives it (type: Archi's class name). @private */
@@ -390,7 +396,8 @@ export function toExchangeXML(model, views = []) {
     });
 
     const viewLines = diagrams.flatMap(view => _viewLines(view, { ids, known, propertyLines, textLines }));
-    const organizationLines = _organizationLines({ elements, relationships, views: diagrams, ids });
+    const emptyFolders = (model.emptyViewFolders ?? []).map(archiFolder => ({ archiFolder, folderOnly: true }));
+    const organizationLines = _organizationLines({ elements, relationships, views: [...diagrams, ...emptyFolders], ids });
 
     // Read once every property is defined: the model's, the concepts' and the views'.
     const modelLines = [
@@ -534,7 +541,8 @@ function _organizationLines({ elements, relationships, views, ids }) {
             if (step.documentation) lines.push(`${indent}  <documentation>${escapeXml(step.documentation)}</documentation>`);
             lines.push(...write(inner, `${indent}  `), `${indent}</item>`);
         }
-        for (const item of items.filter(i => !i.archiFolder?.length)) lines.push(`${indent}<item identifierRef="${ids.ref(item.id)}"/>`);
+        // An empty folder ({archiFolder, folderOnly}) makes its folders and lists nothing itself.
+        for (const item of items.filter(i => !i.archiFolder?.length && !i.folderOnly)) lines.push(`${indent}<item identifierRef="${ids.ref(item.id)}"/>`);
         return lines;
     };
     return ARCHI_FOLDERS.filter(f => inFolder.get(f.type).length).flatMap(folder => [

package/src/charting/ArchimateDiagramEditor.js

@@ -303,7 +303,7 @@ export class ArchimateDiagramEditor extends DiagramEditor {
             library: this.templateLibrary,
             document: () => this.document,
         });
-        this.tree = new this.workspace.ModelTree(model, { mode: 'byLayer' });
+        this.tree = new this.workspace.ModelTree(model, { mode: 'byLayer', ...(this.settingsManager?.treeOptions?.() ?? {}) });
         this.currentView = model.currentView ?? this.tree.getSelectedView();
         this._wireTreeSelection();
         this._unsubscribeModel = model.onChange(() => this._onModelChange());

package/src/charting/Axis.js

@@ -27,6 +27,26 @@ export class Axis {
         return ticks;
     }
 
+    /**
+     * How often a category label fits along an axis `width` wide: 1 (every
+     * label), 2 (every other), … — so a long series (a minute of samples, a
+     * day of timestamps) shows readable labels rather than an overprinted
+     * smear. Estimated from the longest label at `fontSize` (a character is
+     * about 0.6 em wide), with a small gap between labels.
+     * @param {Array<*>} labels
+     * @param {number} width
+     * @param {Object} [options]
+     * @param {number} [options.fontSize=12] - In px
+     * @returns {number} the step: draw label i when i % step === 0
+     */
+    static categoryLabelStep(labels, width, { fontSize = 12 } = {}) {
+        const count = labels?.length ?? 0;
+        if (count < 2 || !(width > 0)) return 1;
+        const longest = Math.max(...labels.map(l => String(l ?? '').length));
+        const need = longest * fontSize * 0.6 + 6;
+        return Math.max(1, Math.ceil(need / (width / count)));
+    }
+
     /**
      * Format a numeric value for axis labels (k/M suffixes, fixed decimals).
      * @param {number} v

package/src/charting/DiagramEditor.js

@@ -59,6 +59,9 @@ import {
  * toolbar container) to itself.
  */
 export class DiagramEditor {
+    /** How a selected shape (besides the one with handles) is marked: an outline `pad` outside it, tinted. */
+    static SELECTION_OUTLINE = Object.freeze({ pad: 4, stroke: '#0066cc', strokeWidth: 2, dash: '5,3', fill: 'rgba(0, 102, 204, 0.08)' });
+
     /**
      * @param {Object} options
      * @param {string} [options.diagramContainerId] - Id of the SVG (or its container) to draw into
@@ -389,6 +392,7 @@ export class DiagramEditor {
         svgElement.addEventListener('contextmenu', (e) => {
             e.stopPropagation();
             e.preventDefault();
+            this.selectForMenu(elementId, { extend: e.ctrlKey || e.metaKey || e.shiftKey });
             this._showOrderingMenu(elementId, e.clientX, e.clientY);
         });
     }
@@ -914,16 +918,31 @@ export class DiagramEditor {
     showModelCheck() {
         const checker = this.model?.checker?.(this.checkerOptions());
         if (!checker) return [];
-        const findings = checker.run();
+        return this.showFindings(checker.run());
+    }
+
+    /**
+     * Some findings in the model check's dialog (each shown when chosen, with
+     * its actions), under `title` (text, or a function of the findings) and
+     * saying `empty` when there are none.
+     */
+    showFindings(findings, { title = null, empty = undefined } = {}) {
         new ModelCheckDialog({
             findings,
             onReveal: (finding) => this.revealFinding(finding),
             actionsFor: (finding) => this.findingActions(finding),
             document: this.document ?? document,
+            title: typeof title === 'function' ? title(findings) : title,
+            ...(empty !== undefined && { empty }),
         }).open();
         return findings;
     }
 
+    /** Edits of the whole model this editor offers (the Edit menu shows them): none here; a subclass adds its own. */
+    modelMenuItems() {
+        return [];
+    }
+
     /** What can be done about a finding, beside showing it (`[{label, action}]`): nothing here; a subclass offers its own (Merge…). */
     findingActions(finding) {
         return [];
@@ -1051,9 +1070,11 @@ export class DiagramEditor {
             if (!t) continue;
             const b = box(t);
             if (id !== this.selectedTemplateId) {
+                // Set off the shape's own border, and tinted, so it shows on any box.
+                const { pad, stroke, strokeWidth, dash, fill } = this.constructor.SELECTION_OUTLINE;
                 layer.appendChild(this._svg('rect', {
-                    class: 'selection-outline', x: b.x1, y: b.y1, width: b.x2 - b.x1, height: b.y2 - b.y1,
-                    fill: 'none', stroke: '#0066cc', 'stroke-width': 1.5, 'stroke-dasharray': '4,3',
+                    class: 'selection-outline', x: b.x1 - pad, y: b.y1 - pad, width: b.x2 - b.x1 + 2 * pad, height: b.y2 - b.y1 + 2 * pad,
+                    fill, stroke, 'stroke-width': strokeWidth, 'stroke-dasharray': dash, rx: 3,
                 }));
             }
             if (this.arrangement.isLocked(id)) {
@@ -3146,6 +3167,17 @@ export class DiagramEditor {
      * @param {string} templateId
      * @param {{extend?: boolean}} [options]
      */
+    /**
+     * Before a shape's menu: with `extend` (Ctrl, ⌘ or Shift held) the shape
+     * joins the selection; otherwise a shape outside the selection becomes it.
+     * A shape already selected leaves the selection as it is, so the menu acts
+     * on all of it (Merge, Match size, Properties of N shapes).
+     */
+    selectForMenu(templateId, { extend = false } = {}) {
+        if (this.selectedIds.has(templateId)) return;
+        this.selectTemplate(templateId, { extend });
+    }
+
     selectTemplate(templateId, { extend = false } = {}) {
         if (extend) {
             if (this.selectedIds.has(templateId)) {

package/src/charting/Dialog.js

@@ -0,0 +1,195 @@
+import { el } from '../workspace/dom.js';
+
+/**
+ * Dialog — the one dialog frame: a title (the handle that moves it), an
+ * optional ✕, a body that scrolls between the title and the buttons (which
+ * stay in view), and Escape or a click outside to close. It fits the window.
+ * A subclass (FormDialog) or a host gives it its content: `content()` and
+ * `buttons` as specs, or fill `body` after open(). `titleBar` takes more
+ * beside the title (a link); `footer`, more beside the buttons.
+ *
+ * open() shows it over the page; open(host) places it in `host` instead, with
+ * no overlay — a dialog's content shown as a pane or a tab, which has a frame
+ * and a close control of its own.
+ */
+export class Dialog {
+    /**
+     * @param {Object} options
+     * @param {string} options.title
+     * @param {Array<{label: string, action: (dialog: Dialog) => void, primary?: boolean, submit?: boolean}>} [options.buttons]
+     * @param {boolean} [options.closeButton] - A ✕ in the title bar
+     * @param {'tall'|'wide'} [options.size] - Tall: most of the window's height; wide: most of its width
+     * @param {string|string[]} [options.cls] - Extra class names on the frame
+     * @param {Document} [options.document]
+     * @param {(applied: boolean) => void} [options.onClose] - Once, when it closes: whether it was applied
+     */
+    constructor({ title, buttons = [], closeButton = false, size = null, cls = null, document: doc = globalThis.document, onClose = null } = {}) {
+        this.title = title;
+        this.buttons = buttons;
+        this.closeButton = closeButton;
+        this.size = size;
+        this.cls = cls;
+        this.doc = doc;
+        this.onClose = onClose;
+        this._applied = false;
+        /** The page-covering backdrop, while open over the page. */
+        this.overlay = null;
+        /** The dialog itself. */
+        this.frame = null;
+        this.titleBar = null;
+        this.body = null;
+        this.footer = null;
+        this._host = null;
+    }
+
+    /** The frame's tag: a FormDialog's is a <form>. @protected */
+    get frameTag() { return 'div'; }
+
+    /** The body's specs (empty: a host fills `body` after open()). @protected */
+    content() { return []; }
+
+    /** Events on the frame itself (a form's submit). @protected */
+    frameEvents() { return {}; }
+
+    /** Open over the page, or in `host` (no overlay, not moved, no ✕). */
+    open(host = null) {
+        this._host = host;
+        const inline = !!host;
+        const frame = {
+            tag: this.frameTag,
+            cls: ['re-dialog', this.size && `re-dialog-${this.size}`, inline && 're-dialog-inline', ...[].concat(this.cls ?? [])],
+            attrs: { role: inline ? null : 'dialog', 'aria-label': this.title },
+            style: inline ? Dialog.INLINE_STYLE : { ...Dialog.FRAME_STYLE, ...(Dialog.SIZE_STYLE[this.size] ?? {}) },
+            ref: (n) => { this.frame = n; },
+            on: {
+                ...this.frameEvents(),
+                keydown: (e) => { if (e.key === 'Escape' && !inline) this.close(); },
+            },
+            children: [
+                {
+                    cls: 're-dialog-title', ref: (n) => { this.titleBar = n; },
+                    style: { display: 'flex', alignItems: 'center', gap: '8px', margin: '0 0 8px', flex: '0 0 auto' },
+                    children: [
+                        {
+                            // The title is the handle that moves the dialog.
+                            tag: 'h3', text: this.title, attrs: { title: inline ? null : 'Drag to move' },
+                            style: { margin: '0', fontSize: '14px', cursor: inline ? 'default' : 'move', userSelect: 'none', flex: '1 1 auto' },
+                            on: inline ? {} : { mousedown: (e) => this._startMove(e) },
+                        },
+                        this.closeButton && !inline && {
+                            tag: 'button', cls: 're-dialog-close', text: '✕', attrs: { type: 'button', title: 'Close', 'aria-label': 'Close' },
+                            style: { border: 'none', background: 'transparent', fontSize: '16px', cursor: 'pointer', color: '#666', padding: '0 4px' },
+                            on: { click: () => this.close() },
+                        },
+                    ].filter(Boolean),
+                },
+                {
+                    // The content scrolls; the title and the buttons stay in view.
+                    cls: 're-dialog-body', ref: (n) => { this.body = n; },
+                    style: { overflowY: 'auto', flex: '1 1 auto', minHeight: '0', paddingRight: '4px' },
+                    children: this.content(),
+                },
+                {
+                    cls: 're-dialog-footer', ref: (n) => { this.footer = n; },
+                    style: { display: this.buttons.length ? 'flex' : 'none', justifyContent: 'flex-end', alignItems: 'center', gap: '8px', marginTop: '16px', flex: '0 0 auto' },
+                    children: this.buttons.map(b => ({
+                        tag: 'button', text: b.label, attrs: { type: b.submit ? 'submit' : 'button' },
+                        style: b.primary ? Dialog.PRIMARY_BUTTON_STYLE : null,
+                        on: b.submit ? {} : { click: () => b.action(this) },
+                    })),
+                },
+            ],
+        };
+        if (inline) {
+            host.appendChild(el(frame, this.doc));
+        } else {
+            this.overlay = el({
+                cls: 're-dialog-overlay', style: Dialog.OVERLAY_STYLE,
+                on: { mousedown: (e) => { if (e.target === this.overlay) this.close(); } },
+                children: [frame],
+            }, this.doc);
+            this.doc.body.appendChild(this.overlay);
+        }
+        this.frame.querySelector?.('input:not([type=checkbox]), select, textarea')?.focus();
+        return this;
+    }
+
+    /** Add to the footer (a host's own buttons, a pager), and show it. */
+    addToFooter(...nodes) {
+        this.footer.append(...nodes);
+        this.footer.style.display = 'flex';
+        return this;
+    }
+
+    /** Add beside the title (a link), before the ✕. */
+    addToTitle(...nodes) {
+        const close = this.titleBar.children[1] ?? null;
+        for (const node of nodes) this.titleBar.insertBefore(node, close);
+        return this;
+    }
+
+    /** Whether it is showing. */
+    get isOpen() { return !!(this.overlay || (this._host && this.frame?.parentNode)); }
+
+    /** Close it (once), telling onClose whether it was applied. */
+    close() {
+        if (!this.isOpen) return;
+        (this.overlay ?? this.frame).remove();
+        this.overlay = null;
+        this._host = null;
+        this.onClose?.(this._applied);
+    }
+
+    /**
+     * Move the dialog by its title: from then on it sits where it was dropped
+     * (fixed position), kept inside the window.
+     * @protected
+     */
+    _startMove(e) {
+        if (e.button !== 0 || !this.frame) return;
+        e.preventDefault();
+        const view = this.doc.defaultView;
+        const box = this.frame.getBoundingClientRect();
+        const grab = { x: e.clientX - box.left, y: e.clientY - box.top };
+        Object.assign(this.frame.style, { position: 'fixed', margin: '0', left: `${box.left}px`, top: `${box.top}px` });
+        const move = (ev) => {
+            const width = view?.innerWidth ?? Infinity, height = view?.innerHeight ?? Infinity;
+            const left = Math.min(Math.max(0, ev.clientX - grab.x), Math.max(0, width - box.width));
+            const top = Math.min(Math.max(0, ev.clientY - grab.y), Math.max(0, height - 40));
+            this.frame.style.left = `${left}px`;
+            this.frame.style.top = `${top}px`;
+        };
+        const end = () => {
+            this.doc.removeEventListener('mousemove', move);
+            this.doc.removeEventListener('mouseup', end);
+        };
+        this.doc.addEventListener('mousemove', move);
+        this.doc.addEventListener('mouseup', end);
+    }
+
+    static OVERLAY_STYLE = {
+        position: 'fixed', inset: '0', background: 'rgba(0,0,0,0.25)', zIndex: '10001',
+        display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'sans-serif',
+    };
+
+    static FRAME_STYLE = {
+        background: '#fff', color: '#222', border: '1px solid #bbb', borderRadius: '6px', padding: '16px 18px',
+        minWidth: '360px', maxWidth: '90vw', maxHeight: '90vh', boxSizing: 'border-box',
+        display: 'flex', flexDirection: 'column',
+        boxShadow: '0 6px 24px rgba(0,0,0,0.2)', fontSize: '12px',
+    };
+
+    static SIZE_STYLE = {
+        tall: { height: '85vh', width: 'min(1100px, 90vw)' },
+        wide: { width: '90vw' },
+    };
+
+    /** In a host: fills it, as content, not a floating box. */
+    static INLINE_STYLE = {
+        display: 'flex', flexDirection: 'column', height: '100%', boxSizing: 'border-box', padding: '10px 12px', fontSize: '12px',
+    };
+
+    static PRIMARY_BUTTON_STYLE = {
+        background: '#0066cc', color: '#fff', border: '1px solid #0066cc', borderRadius: '3px', padding: '4px 14px',
+    };
+}