@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/workspace/parts/ModelFile.js

@@ -0,0 +1,187 @@
+import { pickFile } from '../../charting/toolbar/pickFile.js';
+import { downloadBlob } from '../../exportImage.js';
+
+/** Each page's own title, as it was before any model's file name went in front of it (several models share one page). */
+const PAGE_TITLES = new WeakMap();
+
+/**
+ * ModelFile — the file an EditorPart's model is open from and saved to: its
+ * name, its format (one of the part's ModelFileFormats) and, where the
+ * browser lets a page write a file back (the File System Access API, in
+ * Chrome and Edge), its handle. Open… and Save As… choose one; Save writes
+ * back to it, or (no handle, or no such browser) asks where (Save As). After
+ * opening or saving, the model is marked saved; its edits since make the part
+ * "dirty", which `label` and the page title show.
+ */
+export class ModelFile {
+    /** @param {EditorPart} part */
+    constructor(part) {
+        this.part = part;
+        this.name = null;
+        this.format = null;
+        this.handle = null;
+    }
+
+    get doc() { return this.part.document; }
+    get win() { return this.doc?.defaultView ?? globalThis; }
+
+    /** The format a new file is saved in: the part's `saveFormat()`, else its first. */
+    get defaultFormat() {
+        return this.part.saveFormat?.() ?? this.part.fileFormats()[0] ?? null;
+    }
+
+    /**
+     * What the model is called: the file's name, else (not from a file) the
+     * model's own name, else Untitled; and • when it has changed since it was
+     * opened or saved.
+     */
+    get label() {
+        return `${this.name ?? (this.part.model.name || 'Untitled')}${this.part.model.isDirty?.() ? ' •' : ''}`;
+    }
+
+    /** Open…, Save, Save As… for the File menu. */
+    menuItems() {
+        return [
+            { label: 'Open…', action: () => this.open() },
+            { label: `Save${this.name ? ` (${this.name})` : ''}`, action: () => this.save() },
+            { label: 'Save As…', action: () => this.saveAs() },
+        ];
+    }
+
+    /** Ctrl+O, Ctrl+S and Ctrl+Shift+S, while the part is on the page. */
+    onKey(e) {
+        // Only the part on screen: another in a hidden tab has its own file.
+        if (!(e.ctrlKey || e.metaKey) || e.altKey || !this.part.isShown()) return;
+        const key = e.key.toLowerCase();
+        if (key === 's') { e.preventDefault(); e.shiftKey ? this.saveAs() : this.save(); }
+        else if (key === 'o' && !e.shiftKey) { e.preventDefault(); this.open(); }
+    }
+
+    /**
+     * Ask for a file and open it, replacing the model: its format is the first
+     * of the part's whose extension and contents fit. Keeps its handle, so Save
+     * writes back to it. Returns the new model, or null.
+     */
+    async open() {
+        const chosen = await this.choose();
+        return chosen ? this.adopt(chosen) : null;
+    }
+
+    /**
+     * Ask for a file and read it as a model, without opening it anywhere yet:
+     * `{ model, name, format, handle }`, or null (cancelled, or not a model).
+     * `adopt()` opens it, in this part or another of its kind.
+     */
+    async choose() {
+        const formats = this.part.fileFormats().filter(f => f.imports !== false);
+        const accept = [...new Set(formats.flatMap(f => f.accept.split(',').map(e => e.trim()).filter(Boolean)))];
+        let file = null, handle = null;
+        if (typeof this.win.showOpenFilePicker === 'function') {
+            try {
+                [handle] = await this.win.showOpenFilePicker({ types: [{ description: 'Models', accept: { 'application/octet-stream': accept } }] });
+                file = await handle.getFile();
+            } catch (err) {
+                if (err?.name === 'AbortError') return null;
+                throw err;
+            }
+        } else {
+            file = await pickFile(accept.join(','), this.doc);
+        }
+        if (!file) return null;
+        const bytes = new Uint8Array(await file.arrayBuffer());
+        const text = () => new TextDecoder().decode(bytes);
+        const format = formats.find(f => f.acceptsName(file.name) && f.recognizes(f.readsBytes ? bytes : text()))
+            ?? formats.find(f => f.acceptsName(file.name));
+        if (!format) { this.tell(`Not a file this editor opens: ${file.name}`); return null; }
+        try {
+            return { model: format.import(format.readsBytes ? bytes : text()), name: file.name, format, handle };
+        } catch (err) {
+            this.tell(`Open failed: ${err.message}`);
+            return null;
+        }
+    }
+
+    /** Open what `choose()` read: the part edits its model, from that file. Returns the model. */
+    adopt({ model, name, format, handle = null }) {
+        this.part.replaceModel(model);
+        Object.assign(this, { name, format, handle });
+        this.showState();
+        return model;
+    }
+
+    /** Save to the open file (where the browser can write it back), else Save As. */
+    async save() {
+        if (!this.handle?.createWritable || !this.format) return this.saveAs();
+        return this._write(this.handle, this.format, this.name);
+    }
+
+    /**
+     * Ask where to save (the browser's save dialog where it has one, else a
+     * download), in the open file's format or the default one, and keep it.
+     */
+    async saveAs() {
+        const format = this.format ?? this.defaultFormat;
+        if (!format) return false;
+        const suggested = this.name ?? format.fileName;
+        if (typeof this.win.showSaveFilePicker === 'function') {
+            let handle;
+            try {
+                const ext = format.accept.split(',')[0].trim();
+                handle = await this.win.showSaveFilePicker({ suggestedName: suggested, types: [{ description: format.label, accept: { 'application/octet-stream': [ext] } }] });
+            } catch (err) {
+                if (err?.name === 'AbortError') return false;
+                throw err;
+            }
+            return this._write(handle, format, handle.name ?? suggested);
+        }
+        // No way to write a file: download it (the page cannot write it back later).
+        const { data, mimeType } = format.export(this.part.model);
+        downloadBlob(new this.win.Blob([data], { type: mimeType }), suggested);
+        Object.assign(this, { name: suggested, format, handle: null });
+        this._saved();
+        return true;
+    }
+
+    /** @private */
+    async _write(handle, format, name) {
+        const { data } = format.export(this.part.model);
+        const writable = await handle.createWritable();
+        await writable.write(data);
+        await writable.close();
+        Object.assign(this, { name, format, handle });
+        this._saved();
+        return true;
+    }
+
+    /** @private */
+    _saved() {
+        this.part.model.markSaved?.();
+        this.showState();
+    }
+
+    /** The model now is not from a file (an import, a new model). */
+    forget() {
+        Object.assign(this, { name: null, format: null, handle: null });
+        this.showState();
+    }
+
+    /** Show the saved state: the page title, and anything listening (the part's toolbar). */
+    showState() {
+        const doc = this.doc;
+        if (doc && this.part.isShown()) {
+            if (!PAGE_TITLES.has(doc)) PAGE_TITLES.set(doc, doc.title);
+            doc.title = `${this.label} — ${PAGE_TITLES.get(doc)}`;
+        }
+        this.part.onFileState?.(this);
+    }
+
+    /** Put the page title back (the part is going). */
+    restoreTitle() {
+        if (this.doc && PAGE_TITLES.has(this.doc)) this.doc.title = PAGE_TITLES.get(this.doc);
+    }
+
+    /** @private */
+    tell(message) {
+        (this.win.alert ?? (() => {}))(message);
+    }
+}

package/src/workspace/parts/ModelsPart.js

@@ -0,0 +1,135 @@
+import { Part } from '../Part.js';
+import { WorkArea } from '../workArea.js';
+import { el } from '../dom.js';
+
+/**
+ * ModelsPart — several models open at once (as Archi's model tree holds
+ * several): one editor part per model (any EditorPart type, `editorType`),
+ * each a tab in a work area, so each keeps its own file, unsaved state and
+ * undo history, and two can sit side by side. Copy and paste go between
+ * them as between any two editors.
+ *
+ * The editor parts it hosts find it as `ctx.models` and offer, in their File
+ * menu, New model, Open… in a new tab and Close model. A tab shows its file's
+ * name and • while it has unsaved changes; closing one with unsaved changes
+ * asks first; the page title follows the model in front. The last model
+ * closed leaves a new, empty one.
+ *
+ * Spec: `{ id, type: 'models', editorType, models?: [editor part spec], newModel?: editor part spec }`:
+ * `models` are opened at the start (one empty one without), `newModel` is what New model makes.
+ */
+export class ModelsPart extends Part {
+    static type = 'models';
+
+    constructor(spec = {}) {
+        super(spec);
+        if (!spec.editorType) throw new TypeError('ModelsPart needs an editorType (the editor part type, e.g. "archimate-canvas")');
+        this.editorType = spec.editorType;
+        /** The ids of the editor parts open here, in the order opened. */
+        this.modelIds = [];
+        this.work = null;
+        this._next = 1;
+    }
+
+    get registry() {
+        return this.ctx?.registry ?? null;
+    }
+
+    render() {
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
+        const host = this.container.appendChild(el({ style: { flex: '1 1 auto', minHeight: '0' } }));
+        this.work = new WorkArea({
+            placeholder: { cls: 'ws-workarea-empty', text: 'No model open' },
+            // A tab's × asks first when its model has unsaved changes (closeModel closes it).
+            beforeClose: (id) => { this.closeModel(id); return false; },
+            onChange: () => this.activeModel()?.file?.showState?.(),
+        });
+        this.work.render(host, { ...this.ctx, models: this });
+        const specs = this.spec.models?.length ? this.spec.models : [this.spec.newModel ?? {}];
+        const parts = specs.map(spec => this.newModel(spec));
+        if (parts[0]) this.work.focus(parts[0].id);
+    }
+
+    /** The editor parts open here, in order. */
+    models() {
+        return this.modelIds.map(id => this.registry?.get(id)).filter(Boolean);
+    }
+
+    /** The editor part of the model in front (the selected tab of the active group). */
+    activeModel() {
+        const id = this.work?.activePart();
+        return id ? this.registry?.get(id) ?? null : null;
+    }
+
+    /**
+     * Open a new model in a tab: an editor part of `editorType` made from `spec`
+     * (default the spec's `newModel`, an empty model). Returns the part.
+     */
+    newModel(spec = this.spec.newModel ?? {}) {
+        const id = spec.id && !this.registry.has(spec.id) ? spec.id : this._freshId();
+        const part = this.registry.add({ ...spec, id, type: this.editorType });
+        this.modelIds.push(id);
+        this.work.open(id);
+        this.fileStateChanged(part);
+        return part;
+    }
+
+    /**
+     * Ask for a file (as `from`'s Open… does) and open it in a new tab,
+     * leaving `from`'s model as it is. Returns the new part, or null.
+     */
+    async openInNewTab(from) {
+        const chosen = await from.file.choose();
+        if (!chosen) return null;
+        const part = this.newModel();
+        part.file.adopt(chosen);
+        return part;
+    }
+
+    /**
+     * Close a model's tab; with unsaved changes, only once confirmed. The last
+     * one closed leaves a new, empty model. Returns whether it closed.
+     */
+    closeModel(id) {
+        const part = this.registry?.get(id);
+        if (!part || !this.modelIds.includes(id)) return false;
+        if (part.model?.isDirty?.() && !this.confirm(`"${this.labelOf(part)}" has unsaved changes. Close it anyway?`)) return false;
+        this.work.close(id);
+        this.modelIds = this.modelIds.filter(m => m !== id);
+        this.registry.remove(id);
+        if (!this.modelIds.length) this.newModel();
+        else this.activeModel()?.file?.showState?.();
+        return true;
+    }
+
+    /** A model's tab label: what its toolbar and the page title call it (ModelFile#label). */
+    labelOf(part) {
+        return part.fileLabel;
+    }
+
+    /** An editor part's file or saved state changed: its tab says so. */
+    fileStateChanged(part) {
+        part.title = this.labelOf(part);
+        this.work?.refreshLabels();
+    }
+
+    /** Ask the user (the page's confirm). @protected */
+    confirm(message) {
+        const win = this.container?.ownerDocument?.defaultView ?? globalThis;
+        return typeof win.confirm === 'function' ? win.confirm(message) : true;
+    }
+
+    /** @private */
+    _freshId() {
+        let id;
+        do { id = `${this.id}-model-${this._next++}`; } while (this.registry.has(id));
+        return id;
+    }
+
+    dispose() {
+        this.work?.dispose();
+        for (const id of this.modelIds) this.registry?.remove(id);
+        this.modelIds = [];
+        super.dispose();
+    }
+}

package/src/workspace/styles.js

@@ -0,0 +1,258 @@
+/**
+ * Shell CSS, shipped as a string and injected once into document.head.
+ *
+ * Light DOM by design: a mashup shell hosts parts that bring their own CSS, and
+ * a consumer stylesheet (workbench.css, say) cannot cross a shadow boundary —
+ * every adapted part would render unstyled. Encapsulation for genuinely
+ * untrusted parts is an iframe's job, not the shell's. Everything here is
+ * therefore prefixed `ws-`, and every colour is a custom property so a consumer
+ * can retheme without overriding rules.
+ *
+ * Grid geometry constants here MUST match GridNode.js's ROW_UNIT_PX/GRID_GAP_PX.
+ *
+ * CSS stays a string. The "build it from JS and JSON" guardrail is about
+ * markup — a stylesheet is not a DOM tree, and shredding it into style objects
+ * would cost readability for nothing.
+ */
+import { el } from './dom.js';
+
+export const WORKSPACE_STYLE_ID = 'ws-workspace-styles';
+
+export const WORKSPACE_CSS = `
+.ws-workspace {
+  --ws-bg: #ffffff;
+  --ws-fg: #1a1a1a;
+  --ws-panel-bg: #f3f3f3;
+  --ws-accent: #4a90e2;
+  --ws-border: #cccccc;
+  --ws-toolbar-bg: #222222;
+  --ws-toolbar-fg: #ffffff;
+  --ws-tabbar-bg: #ebebeb;
+  --ws-tab-bg: transparent;
+  --ws-tab-fg: #333333;
+  --ws-muted: #6b6b6b;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+  font-size: 13px;
+  background: var(--ws-bg);
+  color: var(--ws-fg);
+  box-sizing: border-box;
+}
+.ws-workspace *, .ws-workspace *::before, .ws-workspace *::after { box-sizing: inherit; }
+
+/* The values above are the light theme, repeated here only as the pre-JS
+   default so the shell never flashes unstyled. Themes themselves live in
+   themes.js as data and are applied as inline custom properties — see the
+   note there on why there is no [data-theme="dark"] block to go with this. */
+
+/* ── Chrome ─────────────────────────────────────────────────────────────── */
+.ws-toolbar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px; flex: 0 0 auto;
+  background: var(--ws-toolbar-bg); color: var(--ws-toolbar-fg);
+}
+.ws-toolbar-title { font-weight: 600; }
+.ws-toolbar-spacer { flex: 1; }
+.ws-perspectives { display: flex; gap: 2px; }
+.ws-perspective-btn {
+  padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
+  color: var(--ws-toolbar-fg); background: rgba(127,127,127,.12);
+  border: 1px solid rgba(127,127,127,.25); border-radius: 4px 4px 0 0;
+}
+.ws-perspective-btn:hover { background: rgba(127,127,127,.25); }
+.ws-perspective-btn.ws-active {
+  background: var(--ws-accent); color: #000;
+  border-bottom-color: var(--ws-accent);
+}
+
+.ws-theme-picker { display: flex; align-items: center; gap: 5px; }
+.ws-theme-picker label { font-size: 11px; opacity: .7; }
+.ws-theme-select {
+  font: inherit; font-size: 12px; padding: 3px 6px; cursor: pointer;
+  color: var(--ws-toolbar-fg); background: rgba(127,127,127,.25);
+  border: 1px solid rgba(127,127,127,.4); border-radius: 3px;
+}
+/* The dropdown list itself is painted by the OS against the page, not the
+   toolbar, so its own colours have to come from the panel vars or the options
+   render as light-on-light in a dark theme. */
+.ws-theme-select option { background: var(--ws-panel-bg); color: var(--ws-fg); }
+
+.ws-root { flex: 1 1 auto; min-height: 0; display: flex; }
+.ws-root > .ws-node { flex: 1 1 auto; min-width: 0; min-height: 0; }
+
+/* ── Layout nodes ───────────────────────────────────────────────────────── */
+.ws-node { min-width: 0; min-height: 0; }
+
+.ws-split-row, .ws-split-col { display: flex; height: 100%; width: 100%; }
+.ws-split-row { flex-direction: row; }
+.ws-split-col { flex-direction: column; }
+.ws-split-pane { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
+.ws-split-pane > .ws-node { flex: 1 1 auto; min-width: 0; min-height: 0; }
+
+.ws-splitter { background: var(--ws-border); flex: 0 0 5px; }
+.ws-splitter-row { cursor: col-resize; }
+.ws-splitter-col { cursor: row-resize; }
+.ws-splitter:hover, .ws-splitting .ws-splitter { background: var(--ws-accent); }
+.ws-splitting { user-select: none; }
+
+.ws-tabs { display: flex; flex-direction: column; height: 100%; width: 100%; }
+.ws-tabstrip {
+  display: flex; gap: 2px; flex: 0 0 auto; overflow-x: auto;
+  background: var(--ws-tabbar-bg); border-bottom: 1px solid var(--ws-border);
+}
+.ws-tab {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 10px 6px 14px; font: inherit; font-size: 12px; cursor: pointer;
+  background: var(--ws-tab-bg); color: var(--ws-tab-fg);
+  border: none; border-bottom: 2px solid transparent; white-space: nowrap;
+  user-select: none;
+}
+.ws-tab:hover { background: rgba(127,127,127,.15); }
+.ws-tab:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: -2px; }
+.ws-tab-active { border-bottom-color: var(--ws-accent); font-weight: 600; }
+.ws-tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
+.ws-tabclose {
+  flex: 0 0 auto; width: 16px; height: 16px; padding: 0; border: none; border-radius: 3px;
+  background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 14px;
+  cursor: pointer; opacity: 0;
+}
+/* Revealed on hover or while active, so a strip of tabs is not a row of
+   crosses — but always reachable, never display:none, or it could not be hit. */
+.ws-tab:hover .ws-tabclose, .ws-tab-active .ws-tabclose, .ws-tabclose:focus { opacity: .7; }
+.ws-tabclose:hover { opacity: 1; background: rgba(127,127,127,.3); }
+.ws-tabbody { flex: 1 1 auto; min-height: 0; position: relative; }
+.ws-tabpane { position: absolute; inset: 0; overflow: auto; }
+
+/* Which group the next view opens into. WorkArea only applies this once there
+   is more than one group — with one, it is not a question anyone is asking. */
+.ws-group-active > .ws-tabstrip { box-shadow: inset 0 2px 0 var(--ws-accent); }
+.ws-workarea-empty {
+  display: flex; align-items: center; justify-content: center; height: 100%;
+  color: var(--ws-muted); font-size: 13px; background: var(--ws-panel-bg);
+}
+
+/* Action bar — filled by WorkArea from the focused view's own actions. */
+.ws-actionbar {
+  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+  padding: 4px 8px; min-height: 0;
+}
+.ws-actionbar-empty { padding: 0; }
+.ws-action {
+  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
+  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
+  color: var(--ws-fg); background: var(--ws-panel-bg);
+  border: 1px solid var(--ws-border); border-radius: 4px;
+}
+.ws-action:hover:not(:disabled) { border-color: var(--ws-accent); }
+.ws-action:disabled { opacity: .45; cursor: default; }
+.ws-action-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--ws-border); }
+
+/* Outline rail — the focused view's own tree, mounted as a pooled part. */
+.ws-outline { height: 100%; overflow: auto; background: var(--ws-panel-bg); }
+.ws-outline-empty { display: flex; align-items: center; justify-content: center; }
+.ws-outline-none { color: var(--ws-muted); font-size: 12px; padding: 12px; text-align: center; }
+
+.ws-grid {
+  display: grid; gap: 14px; grid-auto-rows: 20px;
+  padding: 14px; overflow: auto; height: 100%; width: 100%;
+  align-content: start; background: var(--ws-panel-bg);
+}
+.ws-pane {
+  display: flex; flex-direction: column; min-width: 0; min-height: 0;
+  position: relative; overflow: hidden;
+  background: var(--ws-bg); border: 1px solid var(--ws-border); border-radius: 6px;
+}
+.ws-pane-header {
+  flex: 0 0 auto; padding: 6px 10px; font-size: 12px; font-weight: 600;
+  background: var(--ws-panel-bg); border-bottom: 1px solid var(--ws-border);
+  cursor: move; user-select: none;
+  display: flex; align-items: center; gap: 8px;
+}
+.ws-pane-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Buttons live here so _attachDragMove's closest('.ws-pane-controls') check
+   keeps a click from starting a pane drag. */
+.ws-pane-controls { flex: 0 0 auto; display: flex; gap: 2px; cursor: default; }
+.ws-pane-btn {
+  font: inherit; font-size: 12px; font-weight: normal; line-height: 1;
+  padding: 2px 6px; cursor: pointer; border-radius: 3px;
+  color: var(--ws-fg); background: transparent; border: 1px solid transparent;
+}
+.ws-pane-btn:hover { background: rgba(127,127,127,.25); border-color: var(--ws-border); }
+.ws-pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+.ws-pane-dragging { opacity: .75; z-index: 10; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
+.ws-resize-handle {
+  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; color: var(--ws-muted); cursor: nwse-resize; user-select: none;
+}
+
+/* ── Parts ──────────────────────────────────────────────────────────────── */
+.ws-part-host { height: 100%; width: 100%; min-width: 0; min-height: 0; display: flex; }
+.ws-part { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: 10px; }
+/* A chart sizes itself to its host, so padding would shrink it every re-render. */
+.ws-part[data-part-type="chart"] { padding: 0; overflow: hidden; }
+.ws-part[data-part-type="diagram-editor"] { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.ws-part-missing { padding: 10px; color: #c0392b; font-size: 12px; }
+.ws-muted { color: var(--ws-muted); }
+
+.ws-list { list-style: none; margin: 0; padding: 0; }
+.ws-list-item {
+  display: block; width: 100%; text-align: left; padding: 5px 8px;
+  font: inherit; cursor: pointer; color: inherit;
+  background: transparent; border: none; border-radius: 3px;
+}
+.ws-list-item:hover { background: rgba(127,127,127,.15); }
+.ws-list-item-active { background: var(--ws-accent); color: #000; }
+
+.ws-proplist { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
+.ws-proplist dt { color: var(--ws-muted); font-size: 12px; }
+.ws-proplist dd { margin: 0; word-break: break-word; }
+
+.ws-chart { width: 100%; height: 100%; min-height: 120px; }
+
+/* Make chart chrome follow the theme.
+ *
+ * RenderEngine hard-codes its axis/label colours for a light background
+ * (#333 titles, #666 ticks, black category labels and axis line, #999 tick
+ * marks, #eee gridlines) and exposes no option to change them, so on a dark
+ * theme the title and labels render nearly invisible against --ws-bg.
+ *
+ * These are emitted as SVG *presentation attributes*, which sit below author
+ * CSS in the cascade — so a stylesheet rule overrides them with no change to
+ * the engine. Matching on the exact literal keeps the override surgical:
+ * anything deliberately coloured (bars, series palettes, white node initials
+ * in a graph) is left alone, because only the engine's own default greys are
+ * selected.
+ *
+ * The trade-off is that these selectors are coupled to those literals — if the
+ * engine's defaults change, the override silently stops matching. test/
+ * workspace.test.js pins the literal set for exactly that reason.
+ *
+ * Scoped to the workspace, NOT to .ws-chart: a chart is just as often rendered
+ * into a plain adopted container (AdapterPart wrapping an existing panel, as
+ * csv-chart-builder does) as into a ChartPart, and scoping to ChartPart's own
+ * class silently left every one of those unthemed.
+ *
+ * Each has its own var so a consumer can retheme chart chrome independently
+ * of the shell; all default to the shell's own colours. */
+.ws-workspace svg text[fill="#333"],
+.ws-workspace svg text[fill="black"] { fill: var(--ws-chart-fg, var(--ws-fg)); }
+.ws-workspace svg text[fill="#666"] { fill: var(--ws-chart-muted, var(--ws-muted)); }
+.ws-workspace svg path[stroke="black"] { stroke: var(--ws-chart-axis, var(--ws-fg)); }
+.ws-workspace svg path[stroke="#999"] { stroke: var(--ws-chart-tick, var(--ws-muted)); }
+.ws-workspace svg path[stroke="#eee"] { stroke: var(--ws-chart-grid, var(--ws-border)); }
+`;
+
+/** Inject the shell stylesheet once per document. */
+export function ensureStyles(doc = document) {
+    if (doc.getElementById(WORKSPACE_STYLE_ID)) return;
+    doc.head.appendChild(el({
+        tag: 'style',
+        attrs: { id: WORKSPACE_STYLE_ID },
+        text: WORKSPACE_CSS,
+    }, doc));
+}

package/src/workspace/themes.js

@@ -0,0 +1,96 @@
+/**
+ * themes.js — built-in theme variable sets, as data.
+ *
+ * A theme is a plain map of CSS custom properties. Keeping them here as JS
+ * objects rather than as `[data-theme=…]` blocks in the stylesheet is what lets
+ * the shell enumerate them: the toolbar's theme picker is built from whatever
+ * is registered, so a consumer's own theme appears in it automatically with no
+ * CSS change. It also keeps one source of truth — a CSS block plus a JS map
+ * would be two.
+ *
+ * `styles.js` still carries the light values as plain defaults on
+ * `.ws-workspace`, so the shell looks right in the moment before a theme is
+ * applied rather than flashing unstyled.
+ *
+ * Any subset of these keys is valid in a custom theme; unset ones fall back to
+ * the stylesheet defaults, because `applyTheme` clears the previous theme's
+ * properties before writing the new one's.
+ */
+
+export const THEME_VARS = [
+    '--ws-bg', '--ws-fg', '--ws-panel-bg', '--ws-accent', '--ws-border',
+    '--ws-toolbar-bg', '--ws-toolbar-fg', '--ws-tabbar-bg', '--ws-tab-bg',
+    '--ws-tab-fg', '--ws-muted',
+];
+
+export const LIGHT_THEME = {
+    '--ws-bg': '#ffffff',
+    '--ws-fg': '#1a1a1a',
+    '--ws-panel-bg': '#f3f3f3',
+    '--ws-accent': '#4a90e2',
+    '--ws-border': '#cccccc',
+    '--ws-toolbar-bg': '#222222',
+    '--ws-toolbar-fg': '#ffffff',
+    '--ws-tabbar-bg': '#ebebeb',
+    '--ws-tab-bg': 'transparent',
+    '--ws-tab-fg': '#333333',
+    '--ws-muted': '#6b6b6b',
+};
+
+export const DARK_THEME = {
+    '--ws-bg': '#1e1e1e',
+    '--ws-fg': '#f0f0f0',
+    '--ws-panel-bg': '#252526',
+    '--ws-accent': '#ffcc00',
+    '--ws-border': '#3a3a3a',
+    '--ws-toolbar-bg': '#141414',
+    '--ws-toolbar-fg': '#f0f0f0',
+    '--ws-tabbar-bg': '#2a2a2a',
+    '--ws-tab-bg': 'transparent',
+    '--ws-tab-fg': '#d0d0d0',
+    '--ws-muted': '#9a9a9a',
+};
+
+/** Higher contrast than `dark`, for low-light or accessibility needs. */
+export const MIDNIGHT_THEME = {
+    '--ws-bg': '#0b0e14',
+    '--ws-fg': '#e6e6e6',
+    '--ws-panel-bg': '#111722',
+    '--ws-accent': '#59c2ff',
+    '--ws-border': '#1f2733',
+    '--ws-toolbar-bg': '#060911',
+    '--ws-toolbar-fg': '#e6e6e6',
+    '--ws-tabbar-bg': '#0e131c',
+    '--ws-tab-bg': 'transparent',
+    '--ws-tab-fg': '#b9c2cf',
+    '--ws-muted': '#8b97a8',
+};
+
+/** Warm, low-blue paper tone — easier than pure white for long sessions. */
+export const SEPIA_THEME = {
+    '--ws-bg': '#fbf3e4',
+    '--ws-fg': '#3b3228',
+    '--ws-panel-bg': '#f2e7d2',
+    '--ws-accent': '#b58900',
+    '--ws-border': '#ded0b4',
+    '--ws-toolbar-bg': '#4a4033',
+    '--ws-toolbar-fg': '#fbf3e4',
+    '--ws-tabbar-bg': '#eee0c6',
+    '--ws-tab-bg': 'transparent',
+    '--ws-tab-fg': '#5b5040',
+    '--ws-muted': '#8a7c65',
+};
+
+export const BUILTIN_THEMES = {
+    light: LIGHT_THEME,
+    dark: DARK_THEME,
+    midnight: MIDNIGHT_THEME,
+    sepia: SEPIA_THEME,
+};
+
+/**
+ * The picker's "follow the OS" option. Not a theme itself — it resolves to
+ * `light` or `dark` at apply time and re-resolves when the OS setting changes,
+ * which is why it is a reserved name rather than an entry in BUILTIN_THEMES.
+ */
+export const SYSTEM_THEME = 'system';