@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/PropertiesPanel.js

@@ -0,0 +1,155 @@
+import { EditPropertyCommand } from './DiagramEditorCommands.js';
+
+/**
+ * PropertiesPanel — side panel for viewing/editing template properties.
+ * Shows properties of selected template and allows inline editing.
+ */
+export class PropertiesPanel {
+    /**
+     * @param {Object} options
+     * @param {string} options.panelId - Element id for panel container
+     * @param {DiagramEditor} options.editor - Diagram editor instance
+     */
+    constructor(options = {}) {
+        this.panelId = options.panelId || 'properties-panel';
+        this.editor = options.editor;
+        this.currentTemplate = null;
+    }
+
+    /**
+     * Render the properties panel.
+     */
+    render() {
+        if (typeof document === 'undefined') return;
+
+        let panel = document.getElementById(this.panelId);
+        if (!panel) {
+            panel = document.createElement('div');
+            panel.id = this.panelId;
+            // Place after menu bar
+            const menuBar = document.getElementById('menu-bar');
+            if (menuBar && menuBar.nextSibling) {
+                menuBar.parentNode.insertBefore(panel, menuBar.nextSibling);
+            } else {
+                document.body.appendChild(panel);
+            }
+        }
+
+        panel.style.cssText = `
+            position: fixed;
+            right: 0;
+            top: 50px;
+            width: 300px;
+            max-height: calc(100vh - 50px);
+            background: #f9f9f9;
+            border-left: 3px solid #0066cc;
+            padding: 15px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-size: 13px;
+            overflow-y: auto;
+            z-index: 1000;
+            box-shadow: -4px 0 12px rgba(0,0,0,0.15);
+            pointer-events: auto;
+        `;
+
+        this._renderContent(panel);
+    }
+
+    /**
+     * Render panel content.
+     * @private
+     */
+    _renderContent(panel) {
+        panel.innerHTML = '';
+
+        if (!this.currentTemplate) {
+            const empty = document.createElement('div');
+            empty.style.cssText = 'color: #999; padding: 10px;';
+            empty.textContent = 'Select an element to edit properties';
+            panel.appendChild(empty);
+            return;
+        }
+
+        const title = document.createElement('div');
+        title.style.cssText = 'font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px;';
+        title.textContent = this.currentTemplate.name;
+        panel.appendChild(title);
+
+        const properties = [
+            { name: 'id', label: 'ID', readonly: true },
+            { name: 'name', label: 'Name', type: 'text' },
+            { name: 'x', label: 'X', type: 'number' },
+            { name: 'y', label: 'Y', type: 'number' },
+            { name: 'zIndex', label: 'Z-Index', type: 'number' },
+            { name: 'visible', label: 'Visible', type: 'checkbox' },
+        ];
+
+        for (const prop of properties) {
+            const row = document.createElement('div');
+            row.style.cssText = 'margin-bottom: 8px;';
+
+            const label = document.createElement('label');
+            label.style.cssText = 'display: block; font-weight: bold; margin-bottom: 2px;';
+            label.textContent = prop.label;
+            row.appendChild(label);
+
+            let input;
+            if (prop.type === 'checkbox') {
+                input = document.createElement('input');
+                input.type = 'checkbox';
+                input.checked = this.currentTemplate[prop.name];
+                input.style.cssText = 'cursor: pointer;';
+            } else {
+                input = document.createElement('input');
+                input.type = prop.type || 'text';
+                input.value = this.currentTemplate[prop.name];
+                input.style.cssText = `
+                    width: 100%;
+                    padding: 4px;
+                    border: 1px solid #ccc;
+                    border-radius: 3px;
+                    box-sizing: border-box;
+                `;
+                if (prop.readonly) {
+                    input.disabled = true;
+                }
+            }
+
+            if (!prop.readonly) {
+                input.addEventListener('change', (e) => {
+                    const newValue = prop.type === 'checkbox' ? e.target.checked : e.target.value;
+                    this._editProperty(prop.name, newValue);
+                });
+            }
+
+            row.appendChild(input);
+            panel.appendChild(row);
+        }
+    }
+
+    /**
+     * Edit a property via command.
+     * @private
+     */
+    _editProperty(propertyName, newValue) {
+        if (!this.currentTemplate || !this.editor.history) return;
+
+        const oldValue = this.currentTemplate[propertyName];
+        if (oldValue === newValue) return;
+
+        if (!EditPropertyCommand) return;
+
+        const cmd = new EditPropertyCommand(this.editor, this.currentTemplate.id, propertyName, oldValue, newValue);
+        this.editor.history.execute(cmd);
+        this.editor.render();
+        this._renderContent(document.getElementById(this.panelId));
+    }
+
+    /**
+     * Set the selected template and refresh the panel.
+     */
+    setSelected(template) {
+        this.currentTemplate = template;
+        this.render();
+    }
+}

package/src/charting/PropertyListEditor.js

@@ -0,0 +1,96 @@
+import { el } from '../workspace/dom.js';
+
+/** Supported types for user-defined properties. */
+export const PROPERTY_TYPES = ['string', 'integer', 'boolean', 'date'];
+
+/**
+ * Convert a raw string (from a property value input) to the requested type.
+ * Invalid integer/boolean/date fall back to the string, preserving user input.
+ */
+export function coercePropertyValue(raw, type) {
+    if (type === 'integer') {
+        const n = Number(raw);
+        return Number.isFinite(n) && raw.trim() !== '' ? Math.trunc(n) : raw;
+    }
+    if (type === 'boolean') {
+        if (/^true$/i.test(raw) || raw === '1') return true;
+        if (/^false$/i.test(raw) || raw === '0') return false;
+        return raw;
+    }
+    if (type === 'date') {
+        const d = new Date(raw);
+        return !isNaN(d.getTime()) ? raw : raw;
+    }
+    return raw;
+}
+
+/** Convert a property value to a display/editable string. */
+export function stringifyPropertyValue(value) {
+    return value == null ? '' : String(value);
+}
+
+/**
+ * PropertyListEditor — an editable list of user-defined, typed properties
+ * (`[{name, type, value}]`): a row per property (name, type, value, remove) and
+ * "+ Add property". `collect()` reads them back typed; rows without a name are
+ * dropped. `PropertyListEditor.field(properties)` is the FormDialog field for it.
+ */
+export class PropertyListEditor {
+    constructor(properties, doc) {
+        this.doc = doc;
+        this.rows = [];
+        this.list = el({ style: { display: 'flex', flexDirection: 'column', gap: '6px' } }, doc);
+        for (const prop of properties) this._addRow(prop);
+        this.element = el({
+            style: { gridColumn: '1 / -1' },
+            children: [
+                this.list,
+                {
+                    tag: 'button', attrs: { type: 'button' }, text: '+ Add property',
+                    style: { marginTop: '6px', padding: '3px 10px', fontSize: '12px' },
+                    on: { click: () => this._addRow() },
+                },
+            ],
+        }, doc);
+    }
+
+    _addRow(prop = { name: '', type: 'string', value: '' }) {
+        const entry = {};
+        const input = { padding: '3px 6px', border: '1px solid #ccc', borderRadius: '3px' };
+        entry.row = el({
+            style: { display: 'flex', alignItems: 'center', gap: '6px' },
+            children: [
+                { tag: 'input', attrs: { type: 'text', placeholder: 'name', value: prop.name || '' }, style: { ...input, flex: '1 1 auto' }, ref: (n) => { entry.name = n; } },
+                {
+                    tag: 'select', style: { ...input, flex: '0 0 80px' },
+                    on: { change: () => { entry.value.type = entry.type.value === 'date' ? 'date' : 'text'; } },
+                    children: PROPERTY_TYPES.map(t => ({ tag: 'option', attrs: { value: t, selected: t === (prop.type || 'string') }, text: t })),
+                    ref: (n) => { entry.type = n; },
+                },
+                {
+                    tag: 'input', attrs: { type: prop.type === 'date' ? 'date' : 'text', placeholder: 'value', value: stringifyPropertyValue(prop.value) },
+                    style: { ...input, flex: '1 1 auto' }, ref: (n) => { entry.value = n; },
+                },
+                {
+                    tag: 'button', attrs: { type: 'button', 'aria-label': 'Remove property' }, text: '×',
+                    style: { flex: '0 0 24px', padding: '2px 4px' },
+                    on: { click: () => { entry.row.remove(); this.rows = this.rows.filter(r => r !== entry); } },
+                },
+            ],
+        }, this.doc);
+        this.list.appendChild(entry.row);
+        this.rows.push(entry);
+    }
+
+    /** A FormDialog field (`custom`) editing `properties`; its value is the collected list. */
+    static field(properties = [], { key = 'properties', document: doc = globalThis.document } = {}) {
+        const editor = new PropertyListEditor(properties ?? [], doc);
+        return { key, label: '', type: 'custom', element: editor.element, read: () => editor.collect() };
+    }
+
+    collect() {
+        return this.rows
+            .map(({ name, type, value }) => ({ name: name.value.trim(), type: type.value, value: coercePropertyValue(value.value, type.value) }))
+            .filter(p => p.name !== '');
+    }
+}

package/src/charting/PropertyLog.js

@@ -0,0 +1,92 @@
+/**
+ * PropertyLog — Universal undo/redo by recording mutations.
+ * Two patterns:
+ *   1. Property mutation: record(getObj, property, oldValue, newValue)
+ *   2. Complex mutation: record(getObj, property, oldState, newState) where oldState/newState are functions
+ * Undo applies old. Redo applies new. Flexible handling for both simple and complex changes.
+ */
+export class PropertyLog {
+    constructor() {
+        this.changes = [];
+        this.currentIndex = -1;
+    }
+
+    /**
+     * Record a change.
+     * For property mutation: record(getObj, 'property', oldValue, newValue)
+     * For complex state: record(getObj, 'complexKey', undoFn, redoFn)
+     *
+     * @param {object|function} objOrGetter - Object or function that returns it
+     * @param {string} key - Property name or operation key
+     * @param {*} oldValueOrUndoFn - Value to restore on undo, or function to call
+     * @param {*} newValueOrRedoFn - Value to apply on redo, or function to call
+     */
+    record(objOrGetter, key, oldValueOrUndoFn, newValueOrRedoFn) {
+        if (this.currentIndex < this.changes.length - 1) {
+            this.changes = this.changes.slice(0, this.currentIndex + 1);
+        }
+
+        const getObj = typeof objOrGetter === 'function' ? objOrGetter : () => objOrGetter;
+
+        this.changes.push({
+            getObj,
+            key,
+            old: oldValueOrUndoFn,
+            new: newValueOrRedoFn,
+        });
+        this.currentIndex++;
+    }
+
+    /**
+     * Undo: apply old value or call undo function.
+     */
+    undo() {
+        if (this.currentIndex < 0) return false;
+        const change = this.changes[this.currentIndex];
+        const obj = change.getObj();
+        console.log(`[UNDO] key=${change.key}, old=${change.old}, obj=${obj ? 'found' : 'null'}`);
+        if (obj) {
+            if (typeof change.old === 'function') {
+                change.old();
+            } else {
+                obj[change.key] = change.old;
+                console.log(`[UNDO] applied: ${change.key}=${obj[change.key]}`);
+            }
+        }
+        this.currentIndex--;
+        return true;
+    }
+
+    /**
+     * Redo: apply new value or call redo function.
+     */
+    redo() {
+        if (this.currentIndex >= this.changes.length - 1) return false;
+        this.currentIndex++;
+        const change = this.changes[this.currentIndex];
+        const obj = change.getObj();
+        console.log(`[REDO] key=${change.key}, new=${change.new}, obj=${obj ? 'found' : 'null'}`);
+        if (obj) {
+            if (typeof change.new === 'function') {
+                change.new();
+            } else {
+                obj[change.key] = change.new;
+                console.log(`[REDO] applied: ${change.key}=${obj[change.key]}`);
+            }
+        }
+        return true;
+    }
+
+    canUndo() {
+        return this.currentIndex >= 0;
+    }
+
+    canRedo() {
+        return this.currentIndex < this.changes.length - 1;
+    }
+
+    clear() {
+        this.changes = [];
+        this.currentIndex = -1;
+    }
+}

package/src/charting/SettingsCascade.js

@@ -0,0 +1,93 @@
+/**
+ * SettingsCascade — resolve values through ordered levels of overrides.
+ *
+ * Levels are supplied most specific first, each `{ key, label, style }` where
+ * `style` holds only the values that level sets. A property's value comes from
+ * the first level that sets it (not `undefined`), else the schema default; the
+ * resolution also says which level supplied it. Line styles (EdgeStyleCascade)
+ * and editor settings (SettingsManager) both resolve through this.
+ */
+export class SettingsCascade {
+    /**
+     * @param {Array<{key: string, label: string, style: Object}>} levels
+     * @param {ReadonlyArray<{key: string, default: *}>} properties
+     */
+    constructor(levels = [], properties = []) {
+        this.levels = levels;
+        this.properties = properties;
+    }
+
+    level(key) {
+        return this.levels.find(l => l.key === key) ?? null;
+    }
+
+    /**
+     * Resolve over every level, optionally with an extra most-specific one first.
+     * @returns {{style: Object, sources: Object<string, string>}} sources hold level labels, or 'Default'
+     */
+    resolveWith(first = null) {
+        return this._resolve(first ? [first, ...this.levels] : this.levels);
+    }
+
+    /**
+     * What a level inherits: the resolution over every level below it.
+     * Pass `null` for what something above every level would get.
+     */
+    inheritedBy(levelKey) {
+        const at = levelKey === null ? -1 : this.levels.findIndex(l => l.key === levelKey);
+        if (levelKey !== null && at < 0) throw new Error(`Unknown style level "${levelKey}"`);
+        return this._resolve(this.levels.slice(at + 1));
+    }
+
+    _resolve(chain) {
+        const style = {}, sources = {};
+        for (const { key, default: fallback } of this.properties) {
+            const from = chain.find(l => l.style?.[key] !== undefined);
+            style[key] = from ? from.style[key] : fallback;
+            sources[key] = from ? from.label : 'Default';
+        }
+        return { style, sources };
+    }
+}
+
+/**
+ * FormDialog fields for cascading properties at one level: each shows the
+ * level's own value and offers "Inherit", labelled with the value and the
+ * level it would come from. A property's `type`, `choices`, `min`/`max` and
+ * `label` come from its schema entry; a `boolean` property is a select of
+ * `true`/`false` (read back with `readInheritableFields`).
+ *
+ * @param {ReadonlyArray<Object>} properties - Schema entries ({key, label, type, choices?, ...})
+ * @param {Object} own - The level's own values (unset keys inherit)
+ * @param {{style: Object, sources: Object}} inherited - What unset values resolve to (`inheritedBy`)
+ * @returns {Array<Object>} FormDialog fields
+ */
+export function inheritableFields(properties, own, inherited) {
+    return properties.map((p) => {
+        const choices = p.type === 'boolean' ? (p.choices ?? [['true', 'Yes'], ['false', 'No']]) : p.choices;
+        const shown = (value) => choices?.find(([v]) => v === String(value))?.[1] ?? String(value);
+        const value = own[p.key];
+        return {
+            ...p,
+            type: p.type === 'boolean' ? 'select' : p.type,
+            choices,
+            value: p.type === 'boolean' && value !== undefined ? String(value) : value,
+            inherit: {
+                text: `Inherit: ${shown(inherited.style[p.key])} (${inherited.sources[p.key]})`,
+                short: `Inherit (${inherited.sources[p.key]})`,
+                value: inherited.style[p.key],
+            },
+        };
+    });
+}
+
+/**
+ * Values read back from `inheritableFields`, as the schema's types: a
+ * boolean select becomes true/false; undefined (inherit) stays undefined.
+ */
+export function readInheritableFields(properties, values) {
+    return Object.fromEntries(properties.map(({ key, type }) => {
+        const v = values[key];
+        return [key, v === undefined ? undefined : type === 'boolean' ? v === 'true' || v === true : v];
+    }));
+}

package/src/charting/SettingsDialog.js

@@ -0,0 +1,53 @@
+import { FormDialog } from './FormDialog.js';
+import { MODEL_SETTINGS_PROPERTIES } from './SettingsManager.js';
+import { inheritableFields, readInheritableFields } from './SettingsCascade.js';
+
+/** Settings a model sets or inherits from the tool, and the tool sets for every model. */
+const CHECKING = MODEL_SETTINGS_PROPERTIES.filter(p => p.key === 'invalidRelationships');
+
+/**
+ * SettingsDialog — app-level settings (theme; a model's edge routing and grid),
+ * as a FormDialog. Settings are saved via SettingsManager, which broadcasts
+ * changes to observers (e.g. diagram tabs re-render).
+ *
+ * Usage:
+ *   showGlobalSettingsDialog(document, settingsManager, 'default');
+ */
+
+const ROUTING_CHOICES = [['straight', 'shortest path'], ['curved', 'curved'], ['orthogonal', 'orthogonal'], ['polyline', 'polyline']];
+
+/**
+ * @param {Document} doc - document to append dialog to
+ * @param {SettingsManager} settingsManager - settings manager instance
+ * @param {string} modelId - model id to load/save model settings for
+ */
+export function showGlobalSettingsDialog(doc, settingsManager, modelId = 'default') {
+    const tool = settingsManager.getToolSettings();
+    const model = settingsManager.getModelSettings(modelId);
+    const modelOwn = settingsManager.getModelOverrides(modelId);
+    const fromTool = settingsManager.cascade(null, modelId).inheritedBy('model');
+    const [checking] = CHECKING;
+    return new FormDialog({
+        title: 'Global Settings',
+        fields: [
+            { type: 'heading', label: 'Tool' },
+            { key: 'theme', label: 'Theme', type: 'select', value: tool.theme, choices: [['light', 'light'], ['dark', 'dark']] },
+            { key: 'toolInvalidRelationships', label: checking.label, type: 'select', value: tool.invalidRelationships ?? checking.default, choices: checking.choices },
+            { type: 'heading', label: 'Model' },
+            ...inheritableFields(CHECKING, modelOwn, fromTool),
+            { key: 'edgeRouting', label: 'Default edge routing', type: 'select', value: model.edgeRouting, choices: ROUTING_CHOICES },
+            { key: 'gridSize', label: 'Default grid size', type: 'number', value: model.gridSize || 16, min: 0 },
+            { key: 'showGrid', label: 'Show grid by default', type: 'checkbox', value: !!model.showGrid },
+        ],
+        submitLabel: 'Save',
+        idPrefix: 'global-settings-',
+        document: doc,
+        onApply: ({ theme, toolInvalidRelationships, edgeRouting, gridSize, showGrid, ...rest }) => {
+            settingsManager.saveToolSettings({ theme, invalidRelationships: toolInvalidRelationships });
+            // The model's own choice, or undefined to inherit the tool's.
+            settingsManager.saveModelSettings(modelId, readInheritableFields(CHECKING, rest));
+            // Observers (e.g. DiagramTabs) re-render on these notifications.
+            settingsManager.saveModelSettings(modelId, { edgeRouting, gridSize: Number.isFinite(gridSize) ? Math.trunc(gridSize) : 0, showGrid });
+        },
+    }).open();
+}

package/src/charting/SettingsManager.js

@@ -0,0 +1,179 @@
+import { SettingsCascade } from './SettingsCascade.js';
+import { LocalJsonStore } from './storage/LocalJsonStore.js';
+
+/**
+ * SettingsManager — editor settings across tool, model and view levels.
+ *
+ * Hierarchy: Tool (global) ← Model (per model) ← View (per tab, overrides)
+ *
+ * Tool settings (localStorage): theme, zoom
+ * Model settings (localStorage, per model id): edge routing, grid, watermark
+ * View settings (on the view object): overrides of model settings, plus title/background
+ *
+ * Model-level values resolve view → model → default through the shared
+ * SettingsCascade, the same resolver line styles use.
+ */
+
+/** Settings a model sets and a view may override; labels and types drive the settings forms. */
+export const MODEL_SETTINGS_PROPERTIES = Object.freeze([
+    {
+        key: 'edgeRouting', label: 'Routing', type: 'select', default: 'straight',
+        choices: [['straight', 'Straight'], ['orthogonal', 'Orthogonal'], ['curved', 'Curved'], ['polyline', 'Around shapes']],
+    },
+    { key: 'gridSize', label: 'Grid size', type: 'number', default: 16, min: 0 },
+    { key: 'showGrid', label: 'Show grid', type: 'boolean', default: false, choices: [['true', 'Shown'], ['false', 'Hidden']] },
+    { key: 'watermark', label: 'Watermark', type: 'text', default: '' },
+    {
+        key: 'watermarkRotation', label: 'Watermark angle', type: 'select', default: '-45°',
+        choices: ['0°', '-45°', '45°', '-90°', '90°'].map(r => [r, r]),
+    },
+    { key: 'watermarkRepeat', label: 'Watermark repeat', type: 'select', default: 'none', choices: [['none', 'Once'], ['repeat', 'Repeat'], ['tile', 'Tile']] },
+    { key: 'watermarkOpacity', label: 'Watermark opacity %', type: 'number', default: 20, min: 0, max: 100 },
+    {
+        key: 'invalidRelationships', label: 'Invalid relationships', type: 'select', default: 'highlight',
+        choices: [['highlight', 'Highlight (red, dashed)'], ['tooltip', 'Warn in the tooltip only'], ['off', 'Do not check']],
+    },
+]);
+
+/** Settings that only a view has. */
+export const VIEW_SETTINGS_DEFAULTS = Object.freeze({
+    title: '',
+    titlePosition: 'none',
+    background: '#ffffff',
+    backgroundImage: '',
+});
+
+export const TOOL_SETTINGS_DEFAULTS = Object.freeze({
+    theme: 'light',
+    defaultZoom: 1,
+});
+
+export class SettingsManager {
+    /**
+     * @param {Object} [options]
+     * @param {Storage} [options.storage] - Defaults to localStorage when available
+     */
+    constructor({ storage } = {}) {
+        this._storage = storage;
+        this._toolStore = new LocalJsonStore('archimate-tool-settings', ...(storage !== undefined ? [storage] : []));
+        this._toolSettings = { ...TOOL_SETTINGS_DEFAULTS, ...this._toolStore.load({}) };
+        this._modelSettings = {}; // model id -> settings
+        this._listeners = []; // settings change callbacks
+    }
+
+    /** Call `callback(event)` on every settings change. @returns {() => void} unsubscribe */
+    onSettingsChange(callback) {
+        this._listeners.push(callback);
+        return () => { this._listeners = this._listeners.filter(cb => cb !== callback); };
+    }
+
+    _notifyListeners(event) {
+        this._listeners.forEach(cb => {
+            try {
+                cb(event);
+            } catch (err) {
+                console.warn('Settings listener error:', err);
+            }
+        });
+    }
+
+    _modelStore(modelId) {
+        return new LocalJsonStore(`archimate-model-settings-${modelId}`, ...(this._storage !== undefined ? [this._storage] : []));
+    }
+
+    // ── Tool Settings (app-wide) ──
+
+    saveToolSettings(settings) {
+        this._toolSettings = { ...this._toolSettings, ...settings };
+        this._toolStore.save(this._toolSettings);
+        this._notifyListeners({ type: 'tool', settings: this._toolSettings });
+    }
+
+    getToolSettings() {
+        return { ...this._toolSettings };
+    }
+
+    // ── Model Settings (per-model defaults) ──
+
+    /** The model level holds only what is set on it; unset settings come from the tool level, then defaults. */
+    initModelSettings(modelId, initial = {}) {
+        this._modelSettings[modelId] = {
+            ...this._modelStore(modelId).load({}),
+            ...initial,
+        };
+    }
+
+    /** What the model level itself sets (unset keys inherit from the tool level). */
+    getModelOverrides(modelId) {
+        if (!this._modelSettings[modelId]) {
+            this.initModelSettings(modelId);
+        }
+        return { ...this._modelSettings[modelId] };
+    }
+
+    /** A model's settings resolved: its own, then the tool's, then defaults. */
+    getModelSettings(modelId) {
+        return { ...this.getModelOverrides(modelId), ...this.cascade(null, modelId).inheritedBy('view').style };
+    }
+
+    saveModelSettings(modelId, settings) {
+        if (!this._modelSettings[modelId]) {
+            this.initModelSettings(modelId);
+        }
+        this._modelSettings[modelId] = { ...this._modelSettings[modelId], ...settings };
+        this._modelStore(modelId).save(this._modelSettings[modelId]);
+        this._notifyListeners({ type: 'model', modelId, settings: this._modelSettings[modelId] });
+    }
+
+    // ── View Settings (per-view overrides) ──
+
+    initViewSettings(view, initial = {}) {
+        view._settings = { ...VIEW_SETTINGS_DEFAULTS, ...initial };
+    }
+
+    getViewSettings(view) {
+        if (!view._settings) {
+            this.initViewSettings(view);
+        }
+        return { ...view._settings };
+    }
+
+    saveViewSettings(view, settings) {
+        if (!view._settings) {
+            this.initViewSettings(view);
+        }
+        view._settings = { ...view._settings, ...settings };
+        this._notifyListeners({ type: 'view', viewId: view.id, settings: view._settings });
+    }
+
+    // ── Resolve Settings (hierarchy: tool ← model ← view) ──
+
+    /** The cascade for one view: its own settings, then the model's, then the tool's, then defaults. */
+    cascade(view, modelId) {
+        return new SettingsCascade([
+            { key: 'view', label: 'View', style: view?._settings ?? {} },
+            { key: 'model', label: 'Model', style: this.getModelOverrides(modelId) },
+            { key: 'tool', label: 'Tool', style: this._toolSettings },
+        ], MODEL_SETTINGS_PROPERTIES);
+    }
+
+    /**
+     * Effective settings for rendering a specific view:
+     * view overrides > model settings > defaults, plus tool and view-only settings.
+     */
+    getEffectiveSettings(view, modelId) {
+        const tool = this.getToolSettings();
+        const viewSettings = view?._settings ?? {};
+        return {
+            theme: tool.theme,
+            defaultZoom: tool.defaultZoom,
+            ...this.cascade(view, modelId).resolveWith().style,
+            title: viewSettings.title,
+            titlePosition: viewSettings.titlePosition,
+            background: viewSettings.background,
+            backgroundImage: viewSettings.backgroundImage,
+        };
+    }
+}
+
+export const settingsManager = new SettingsManager();