@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -0,0 +1,345 @@
+import { render } from '../dom.js';
+import { EditorShell } from '../EditorShell.js';
+import { EditorPart } from './EditorPart.js';
+import { ArchimateModel } from '../../charting/diagrams/ArchimateModel.js';
+import { ArchimateCanvasEditor, ArchimatePalette, typeTitle } from '../../charting/archimate/index.js';
+import { ArchimateNotation } from '../../archimate.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { ToolbarText } from '../../charting/toolbar/index.js';
+import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
+import { FormDialog } from '../../charting/FormDialog.js';
+import { CsvImportDialog } from '../../charting/archimate/CsvImportDialog.js';
+import { pickFile } from '../../charting/toolbar/pickFile.js';
+import { SettingsManager } from '../../charting/SettingsManager.js';
+import { SettingsViewPropertiesDialog } from '../../charting/SettingsViewPropertiesDialog.js';
+import { CanvasTemplateLibrary } from '../../charting/canvas/CanvasTemplateLibrary.js';
+import { CanvasTemplateMenu } from '../../charting/canvas/CanvasTemplateMenu.js';
+import { CanvasPalette } from '../../charting/canvas/CanvasPalette.js';
+import { ARCHIMATE_FILE_FORMATS } from '../../charting/archimate/archimateFileFormats.js';
+import { ModelTree } from '../../charting/modelTree/ModelTree.js';
+import { buildModelTreePanel } from '../../charting/modelTree/ModelTreePanel.js';
+import { buildAnalysisPanel } from '../../charting/modelTree/AnalysisPanel.js';
+import { ArchimateSpecializationRegistry } from '../../archimateSpecializations.js';
+import { HintPanel } from '../../charting/HintPanel.js';
+import { elementMenuItems } from '../../charting/archimate/elementMenuItems.js';
+import { editElementProperties } from '../../charting/archimate/elementProperties.js';
+import { CustomViewpoints } from '../../charting/archimate/CustomViewpoints.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * ArchimateCanvasPart — the ArchiMate modeller on the diagram editor's own
+ * canvas (phase 4 testbed): the model tree on the left, one tab per view and
+ * an ArchimateCanvasEditor over the current view, and a palette of element
+ * types grouped by layer on the right. Drop or click a palette type to add an
+ * element, or drag one from the tree to show it (with its relationships to
+ * what is shown); drag between two elements to add a relationship (its kind
+ * picked from those the rules allow); every edit is a step on that view's own
+ * undo history. The File menu exports and imports CSV, .archimate and the
+ * Exchange Format.
+ *
+ * Spec (JSON): `elements`, `relationships`, `views`, `name` (as ArchimateModel
+ * takes them), `archimateVersion` ('4' or '3.2'), `distinctShapes` (draw each
+ * element in its notation shape rather than a box), `viewpoint` (a viewpoint name) and
+ * `viewpointMode` ('fade' or 'hide': elements outside it), `analysis` (true adds the
+ * analysis of the selected element, under the palette).
+ */
+export class ArchimateCanvasPart extends EditorPart {
+    static type = 'archimate-canvas';
+    static viewNoun = 'view';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.version = spec.archimateVersion ?? '4';
+        this.distinctShapes = !!spec.distinctShapes;
+        this.viewpoint = spec.viewpoint ?? 'All';
+        this.viewpointMode = spec.viewpointMode ?? 'fade';
+        this.showDerived = !!spec.showDerived;
+        this.settings = new SettingsManager();
+        // A settings change (Model settings…, a view's properties) redraws the canvas.
+        this._unsubscribeSettings = this.settings.onSettingsChange(() => { if (this.mounted) this.editor?.render(); });
+        // The user's specializations (or the defaults), as the main editor offers them; one already loaded is kept.
+        if (!ArchimateSpecializationRegistry.list().length) ArchimateSpecializationRegistry.loadFrom();
+        this._follow(this.model);
+    }
+
+    /**
+     * Re-render on every change to `model`'s views (the editor is rebuilt with the canvas on each
+     * render), and redraw the tree after every edit (an element renamed, an undo).
+     * @private
+     */
+    _follow(model) {
+        this._unsubscribe?.();
+        this._unsubscribeTree?.();
+        this._unsubscribe = model.onChange(() => { if (this.mounted) this.render(); });
+        this._unsubscribeTree = model.onEdit?.(() => this._treePanel?.refresh?.()) ?? null;
+    }
+
+    fileFormats() {
+        return ARCHIMATE_FILE_FORMATS;
+    }
+
+    /** A new file is an Archi file (.archimate). */
+    saveFormat() {
+        return ARCHIMATE_FILE_FORMATS.find(f => f.featureName === 'Archimate');
+    }
+
+    /** The file label in the toolbar (and a ModelsPart's tab) follows the saved state. */
+    onFileState() {
+        super.onFileState();
+        this.menuBar?.refresh?.();
+    }
+
+    /** New view…, then New canvas… and New canvas from template. */
+    newItems() {
+        return [...super.newItems(), ...this.templateMenu.newCanvasItems()];
+    }
+
+    /** File > Templates: the open canvas saved as a model template or into the library. */
+    ownFileItems() {
+        const saveAs = this.model.currentView ? this.templateMenu.saveAsTemplateItems(this.model.currentViewId) : [];
+        return EditorPart.menuGroup('Templates', saveAs);
+    }
+
+    /** File > Import: an Archi canvas template, and a spreadsheet's rows (CSV with mapping). */
+    ownImportItems() {
+        const importTemplate = this.templateMenu.importItem();
+        return [{ separator: true }, ...(importTemplate ? [{ ...importTemplate, label: 'Archi template…' }] : []), { label: 'CSV with mapping…', action: () => this.importCsvMapped() }];
+    }
+
+    /** Import CSV with mapping…: a spreadsheet's rows into this model (CsvImportDialog), the new elements on the open view. */
+    async importCsvMapped() {
+        const file = await pickFile('.csv,.txt,.tsv', this.document);
+        if (!file) return null;
+        return new CsvImportDialog({ model: this.model, view: this.model.currentView, version: this.version, document: this.document, onDone: () => this.render() }).open(await file.text());
+    }
+
+    /** An imported model: follow it, with a fresh tree, and give it a view if it has none. */
+    modelReplaced(model) {
+        if (!model.views().length) model.createView();
+        this._follow(model);
+    }
+
+    /** The model tree over the current model (kept across renders, so its mode and selection stay). */
+    get modelTree() {
+        if (this.tree?.model !== this.model) {
+            this.tree = new ModelTree(this.model, { mode: 'byLayer' });
+            // A view chosen in the tree opens it; an element chosen there is selected on the canvas.
+            this.tree.onSelectionChange((data) => {
+                if (data.kind === 'view' && data.view.id !== this.model.currentViewId) this.model.switchTo(data.view.id);
+                if (data.kind === 'element') { this.selectElement(data.id); this._showAnalysis?.(data.id); }
+            });
+        }
+        return this.tree;
+    }
+
+    createModel(spec) {
+        return new ArchimateModel({
+            name: spec.name ?? '',
+            elements: spec.elements ?? [],
+            relationships: spec.relationships ?? [],
+            views: spec.views?.length ? spec.views : [{ id: 'view-1', name: 'View 1', elementIds: [] }],
+        });
+    }
+
+    /** A view's properties: name, documentation and its settings (routing, grid, background, ...). */
+    showViewProperties(view) {
+        return new SettingsViewPropertiesDialog({ model: this.model, view, settingsManager: this.settings, document: this.document }).open();
+    }
+
+    /**
+     * Ask which relationship a new connection is, among the kinds the rules
+     * allow between the two elements. Resolves to the kind, or null if cancelled.
+     */
+    chooseKind(kinds, from, to, { reason = 'connect' } = {}) {
+        const nesting = reason === 'nesting';
+        return new Promise((resolve) => {
+            new FormDialog({
+                title: nesting ? `${to.name} nested in ${from.name}` : `New relationship: ${from.name} → ${to.name}`,
+                description: nesting
+                    ? `Add the relationship the nesting stands for (${typeTitle(from.type ?? '?')} → ${typeTitle(to.type ?? '?')}), in the model; the nesting shows it, so no line is drawn.`
+                    : `${typeTitle(from.type ?? '?')} → ${typeTitle(to.type ?? '?')}: ${kinds.length} allowed kind${kinds.length === 1 ? '' : 's'}`,
+                fields: [{
+                    key: 'kind', label: 'Kind', type: 'select', value: kinds[0],
+                    choices: kinds.map(k => [k, ArchimateNotation.relationshipType(k)?.description ? `${typeTitle(k)}: ${ArchimateNotation.relationshipType(k).description}` : typeTitle(k)]),
+                }],
+                submitLabel: 'Add',
+                ...(nesting && { cancelLabel: 'No relationship' }),
+                idPrefix: 'archimate-kind-',
+                document: this.document,
+                onApply: ({ kind }) => resolve(kind),
+                onClose: (applied) => { if (!applied) resolve(null); },
+            }).open();
+        });
+    }
+
+    render() {
+        const model = this.model;
+        const view = model.currentView;
+        const doc = this.document;
+        const canvasId = `archimate-canvas-${this.id}`;
+
+        const canvas = doc.createElementNS(SVG_NS, 'svg');
+        canvas.id = canvasId;
+        canvas.setAttribute('viewBox', '0 0 1000 700');
+        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: transparent; box-sizing: border-box;';
+        const elements = doc.createElementNS(SVG_NS, 'g');
+        elements.id = 'elements';
+        canvas.appendChild(elements);
+
+        const tabs = new ViewTabStrip({
+            document: doc,
+            onSelect: (id) => model.switchTo(id),
+            menuItems: (id) => this.viewMenu.items(id),
+        }).render(model.views(), model.currentViewId);
+
+        const { toolbar, side, main, aside } = new EditorShell({ document: doc, sideWidth: '260px', aside: true, asideWidth: this.spec.analysis ? '260px' : '210px' }).mount(this.container);
+        Object.assign(aside.style, { padding: '6px', fontSize: '12px' });
+        // With `analysis`, the palette shares the right with the analysis of the selected element.
+        let paletteHost = aside, analysisHost = null;
+        if (this.spec.analysis) {
+            Object.assign(aside.style, { display: 'flex', flexDirection: 'column', overflow: 'hidden' });
+            paletteHost = aside.appendChild(doc.createElement('div'));
+            Object.assign(paletteHost.style, { flex: '1 1 55%', overflowY: 'auto', minHeight: '0' });
+            analysisHost = aside.appendChild(doc.createElement('div'));
+            analysisHost.setAttribute('data-analysis', '');
+            Object.assign(analysisHost.style, { flex: '1 1 45%', overflowY: 'auto', minHeight: '0', borderTop: '1px solid #ddd' });
+        }
+        side.appendChild(this._treePanel = buildModelTreePanel(doc, {
+            modelTree: this.modelTree,
+            treeDivId: `archimate-canvas-tree-${this.id}`,
+            viewMenu: this.viewMenu,
+            templateMenu: this.templateMenu,
+            elementMenu: (element) => this.elementMenu(element),
+            search: true,
+            version: this.version,
+        }));
+        main.style.flexDirection = 'column';
+        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
+
+        const customViewpoints = CustomViewpoints.load();
+        const previous = this.editor;
+        previous?.dispose();
+        this.editor = new ArchimateCanvasEditor({
+            diagramContainerId: canvasId,
+            view,
+            model,
+            nodeOptions: { archimateVersion: this.version, useDistinctShapes: this.distinctShapes, viewpoint: this.viewpoint, viewpointMode: this.viewpointMode, showDerived: this.showDerived },
+            chooseKind: (kinds, from, to, options) => this.chooseKind(kinds, from, to, options),
+            // The view's settings: background, title, watermark, how invalid relationships show.
+            viewSettings: () => this.settings.getEffectiveSettings(this.model.currentView, 'default'),
+            settingsManager: this.settings,
+            // The user's own viewpoints, after the standard ones.
+            customViewpoints,
+            // Canvas templates: placed on a canvas, saved from its shapes (the browser's library).
+            templateMenu: this.templateMenu,
+            // Version and distinct shapes (⚙ Settings) change the palette too.
+            onNodeOptionsChange: ({ archimateVersion, useDistinctShapes, viewpoint, viewpointMode, showDerived }) => {
+                this.showDerived = !!showDerived;
+                this.version = archimateVersion;
+                this.distinctShapes = !!useDistinctShapes;
+                this.viewpoint = viewpoint;
+                this.viewpointMode = viewpointMode;
+                this.render();
+            },
+        });
+        if (previous) {
+            this.editor.showGrid = previous.showGrid;
+            this.editor.gridSize = previous.gridSize;
+        }
+
+        // A canvas's palette is Archi's canvas palette; another view's, ArchiMate's element types.
+        const isCanvas = view.constructor.kind === 'canvas';
+        const Palette = isCanvas ? CanvasPalette : ArchimatePalette;
+        new Palette({
+            version: this.version,
+            viewpoint: this.viewpoint,
+            customViewpoints,
+            document: doc,
+            // A click adds the type (or box) in the middle of the visible canvas.
+            onPick: (key) => {
+                const r = canvas.getBoundingClientRect();
+                const at = this.editor._clientToDiagram(r.left + r.width / 2, r.top + r.height / 2) ?? { x: 400, y: 300 };
+                if (isCanvas) this.editor.addCanvasBox(key, at);
+                else this.editor.addElement(key, at);
+            },
+        }).render(paletteHost);
+
+        // The tree follows the canvas's selection; a canvas shows its hint, or the selected box's.
+        const hints = (this.hintPanel ??= new HintPanel({ document: doc }));
+        const showHint = (templateId) => hints.mount(canvas.parentElement).show(view.constructor.kind === 'canvas' ? (templateId ? view.hintFor(templateId) : view.hint) : null);
+        const showAnalysis = this._showAnalysis = (elementId) => {
+            if (!analysisHost) return;
+            analysisHost.replaceChildren(buildAnalysisPanel(doc, {
+                model, elementId: elementId && model.getElement(elementId) ? elementId : null,
+                onSelectItem: (info) => this.modelTree.select(info.id, info.kind),
+            }));
+        };
+        this.editor.onSelectionChange(({ templateId }) => {
+            const elementId = templateId && this.editor.templates.get(templateId)?.instance?.elementId;
+            if (elementId && this.modelTree.getSelectedId() !== elementId && this.model.getElement(elementId)) this.modelTree.select(elementId, 'element');
+            showHint(templateId);
+            showAnalysis(elementId);
+        });
+        showHint(null);
+        showAnalysis(this.modelTree.getSelectedKind() === 'element' ? this.modelTree.getSelectedId() : null);
+        // The tree's filters dim what they leave out on the canvas too.
+        this._unsubscribeFilter?.();
+        const dim = () => this.editor?.setElementFilter(this.modelTree.matchingElementIds());
+        this._unsubscribeFilter = this.modelTree.onFilterChange(dim);
+        if (this.modelTree.filtering) dim();
+
+        this.menuBar?.dispose();
+        this.menuBar = new MenuBar({
+            container: toolbar,
+            editor: this.editor,
+            items: [this.fileMenu(), this.editMenu(), ...this.editor.menuBarItems(), new ToolbarText(() => this.fileLabel, { marginLeft: 'auto', color: '#555', fontSize: '12px' })],
+        }).render();
+        this.editor.render();
+    }
+
+    /**
+     * A model element's menu in the tree (elementMenuItems): its properties,
+     * the views it is on, adding it to this one, a view generated for it.
+     */
+    elementMenu(element) {
+        const model = this.model;
+        return elementMenuItems(element, {
+            model, view: model.currentView,
+            editProperties: (el) => editElementProperties(el, {
+                history: model.currentView?.history, version: this.version, document: this.document,
+                onSaved: () => this.render(),
+            }),
+            showIn: (view, instanceId) => {
+                if (view.id !== model.currentViewId) model.switchTo(view.id);   // the part redraws for the new view
+                this.editor?.selectTemplate(instanceId);
+            },
+            addToView: (el) => this.editor?.showElement(el.id, this.editor.visibleCentre()),
+        });
+    }
+
+    /** Select the first box of a model element on the current view (nothing if it is not shown). */
+    selectElement(elementId) {
+        const editor = this.editor;
+        if (!editor) return;
+        const box = [...editor.templates.values()].find(t => t.instance?.elementId === elementId);
+        if (box && editor.selectedTemplateId !== box.id) editor.selectTemplate(box.id);
+    }
+
+    /** Canvas templates over the current model: placed on a canvas, saved from its shapes (the browser's library). */
+    get templateMenu() {
+        if (this._templateMenu?.model !== this.model) {
+            this._templateMenu = new CanvasTemplateMenu(this.model, { library: (this.templateLibrary ??= new CanvasTemplateLibrary()), document: () => this.document });
+        }
+        return this._templateMenu;
+    }
+
+    dispose() {
+        this.menuBar?.dispose();
+        this._unsubscribeSettings?.();
+        this._unsubscribeFilter?.();
+        this._unsubscribe();
+        this._unsubscribeTree?.();
+        super.dispose();
+    }
+}

package/src/workspace/parts/ArchimateEditorPart.js

@@ -0,0 +1,79 @@
+import { el } from '../dom.js';
+import { EditorPart } from './EditorPart.js';
+import { ArchimateModel } from '../../charting/diagrams/ArchimateModel.js';
+import { ArchimateDiagramEditor } from '../../charting/ArchimateDiagramEditor.js';
+import { ARCHIMATE_SERVICES } from '../archimateServices.js';
+
+/** Toolbar features on by default; a spec's `features` overrides any of them. */
+const DEFAULT_FEATURES = Object.freeze({
+    search: true, version: true, viewpoint: true, distinctShapes: true, showDerived: true,
+    exportCSV: true, importCSV: true, exportArchimate: true, importArchimate: true, exportExchange: true, importExchange: true,
+});
+
+/**
+ * ArchimateEditorPart — the ArchiMate modeller as a workbench part: toolbar,
+ * model tree, one tab per open view and the canvas, filling its pane.
+ *
+ * Spec (JSON): `elements`, `relationships`, `views` (as ArchimateModel takes
+ * them), `features` (toolbar controls, see DEFAULT_FEATURES), `analysis`
+ * (true adds the analysis panel on the right).
+ *
+ * The part builds the ArchimateModel and hands it to ArchimateDiagramEditor,
+ * which works in the part's own container (its regions get ids unique to the
+ * part). Views — new, duplicate, rename, delete — come from EditorPart's
+ * ViewMenu, which the editor's tabs, tree and File menu all use. Like
+ * ChartPart it needs the engine, so register it explicitly.
+ */
+export class ArchimateEditorPart extends EditorPart {
+    static type = 'archimate-editor';
+    static viewNoun = 'view';
+
+    createModel(spec) {
+        return new ArchimateModel({
+            name: spec.name ?? '',
+            elements: spec.elements ?? [],
+            relationships: spec.relationships ?? [],
+            views: spec.views ?? [],
+        });
+    }
+
+    /** The editor's model once it exists: an import replaces it. */
+    get model() {
+        return this.editor?.model ?? this._model;
+    }
+
+    /** The editor's view menu (over its current model), so the part and editor offer one menu. */
+    get viewMenu() {
+        return this.editor?.viewMenu ?? super.viewMenu;
+    }
+
+    /** Element ids for the editor's regions, unique to this part. */
+    regionIds() {
+        const prefix = `archimate-${this.id ?? 'editor'}`;
+        return {
+            app: `${prefix}-app`, toolbar: `${prefix}-toolbar`, tree: `${prefix}-tree`,
+            diagram: `${prefix}-diagram`, analysis: this.spec.analysis ? `${prefix}-analysis` : undefined,
+        };
+    }
+
+    render() {
+        // Built once: the editor keeps itself up to date from the model from then on.
+        if (this.editor) return;
+        const ids = this.regionIds();
+        Object.assign(this.container.style, { height: '100%', display: 'flex', flexDirection: 'column' });
+        this.container.appendChild(el({ attrs: { id: ids.app }, style: { flex: '1 1 auto', minHeight: '0' } }, this.document));
+        this.editor = new ArchimateDiagramEditor({
+            model: this.model,
+            document: this.document,
+            fullPage: false,
+            appContainerId: ids.app,
+            toolbarContainerId: ids.toolbar,
+            treeContainerId: ids.tree,
+            diagramContainerId: ids.diagram,
+            analysisContainerId: ids.analysis,
+            features: { ...DEFAULT_FEATURES, ...(this.spec.features ?? {}) },
+            workspace: ARCHIMATE_SERVICES,
+        });
+        this.editor.render();
+    }
+}

package/src/workspace/parts/ChartPart.js

@@ -0,0 +1,115 @@
+import { Part } from '../Part.js';
+import { el } from '../dom.js';
+import { RenderEngine } from '../../index.js';
+
+/**
+ * ChartPart — hosts one RenderEngine chart in a pane.
+ *
+ * Two things drive the shape of this class:
+ *
+ *  1. **RenderEngine is per-container.** Its constructor reads
+ *     `container.clientWidth/clientHeight` and builds a renderer sized to them,
+ *     so each pane owns its own engine — there is no shared instance to pass in
+ *     via `ctx`. A pane that has just been created has zero size until layout
+ *     runs, so construction is deferred to the first non-zero measurement.
+ *  2. **Panes resize.** GridNode panes are drag-resizable and SplitNode panes
+ *     are splitter-resizable, so a chart must re-render at the new size. The
+ *     renderer is sized at construction, so a resize means rebuilding the
+ *     engine; that is debounced to a frame to avoid thrashing mid-drag.
+ *
+ * `spec.channel`, if set, feeds the chart from the ContextBus: whatever arrives
+ * replaces `options.data` and re-renders. That is the mashup wiring — the chart
+ * never knows which part produced the data.
+ */
+export class ChartPart extends Part {
+    static type = 'chart';
+    static subscribes = [];
+
+    constructor(spec = {}) {
+        super(spec);
+        this.chartType = spec.chartType ?? 'bar';
+        this.chartOptions = { ...(spec.options ?? {}) };
+        if (spec.data !== undefined) this.chartOptions.data = spec.data;
+        this.rendererType = spec.rendererType ?? 'svg';
+        this.channel = spec.channel ?? null;
+        this.engine = null;
+        this._rafId = null;
+        this._lastSize = '';
+        // refreshChart() resolves its container via document.getElementById(id)
+        // and silently no-ops when it finds nothing, so the host element needs a
+        // real DOM id. Namespaced rather than using the bare part id, which
+        // would collide with whatever ids the consumer's own page already uses.
+        this.chartId = `ws-chart-${this.id}`;
+    }
+
+    render() {
+        this.canvasHost = this.container.appendChild(el({
+            cls: 'ws-chart',
+            attrs: { id: this.chartId },
+        }));
+
+        if (this.channel) {
+            this.subscribe(this.channel, data => {
+                if (data == null) return;
+                this.chartOptions.data = data;
+                this._draw();
+            });
+        }
+
+        const ro = new ResizeObserver(() => this._scheduleDraw());
+        ro.observe(this.canvasHost);
+        this.onDispose(() => ro.disconnect());
+        this.onDispose(() => { if (this._rafId) cancelAnimationFrame(this._rafId); });
+
+        // Draw straight away when the host is already sized, instead of waiting
+        // for ResizeObserver's initial delivery. That delivery only lands on the
+        // next rendering-lifecycle tick — a visibly blank pane for a frame — and
+        // in an environment that isn't painting it never lands at all, leaving
+        // the chart permanently empty. ResizeObserver then only has to handle
+        // what it is actually for: later resizes.
+        this._drawIfSized();
+    }
+
+    _drawIfSized() {
+        const { clientWidth: w, clientHeight: h } = this.canvasHost;
+        if (w <= 0 || h <= 0) return false;
+        this._lastSize = `${w}x${h}`;
+        this._draw();
+        return true;
+    }
+
+    _scheduleDraw() {
+        const { clientWidth: w, clientHeight: h } = this.canvasHost;
+        if (w <= 0 || h <= 0) return;
+        const size = `${w}x${h}`;
+        if (size === this._lastSize) return;
+        this._lastSize = size;
+        if (this._rafId) cancelAnimationFrame(this._rafId);
+        this._rafId = requestAnimationFrame(() => { this._rafId = null; this._draw(); });
+    }
+
+    _draw() {
+        const { clientWidth: w, clientHeight: h } = this.canvasHost;
+        if (w <= 0 || h <= 0) return;
+        // The renderer is sized at construction, so a resize means a new engine.
+        this.canvasHost.textContent = '';
+        this.engine = new RenderEngine(this.canvasHost, { rendererType: this.rendererType });
+        this.engine.register(this.chartId, this.chartType, this.chartOptions);
+        this.engine.refreshChart(this.chartId);
+    }
+
+    /** Append a point to a bounded window — see REFERENCE.md's streaming section. */
+    addDataPoint(pointOrFactory, opts) {
+        this.engine?.addDataPoint(this.chartId, pointOrFactory, opts);
+    }
+
+    serialize() {
+        return {
+            ...super.serialize(),
+            chartType: this.chartType,
+            rendererType: this.rendererType,
+            ...(this.channel ? { channel: this.channel } : {}),
+            options: { ...this.chartOptions },
+        };
+    }
+}

package/src/workspace/parts/ContentPart.js

@@ -0,0 +1,34 @@
+import { Part } from '../Part.js';
+import { render } from '../dom.js';
+
+/**
+ * ContentPart — static content declared as a JSON element tree.
+ *
+ * The default way to put fixed content in a pane, and the shape the shell's
+ * guardrail points at: structure stays data rather than an HTML string, so it
+ * can be stored, serialized and composed like any other part spec, and its text
+ * cannot inject markup. `HtmlPart` is the escape hatch for genuinely external
+ * or server-supplied HTML.
+ *
+ *   { id: 'about', type: 'content', title: 'About', content: [
+ *       { tag: 'h3', text: 'Try these' },
+ *       { tag: 'ul', children: [
+ *           { tag: 'li', text: 'Pick a region' },
+ *       ]},
+ *   ]}
+ *
+ * `content` is one spec or an array of them — see `dom.js`'s `el()` for the
+ * full spec shape.
+ */
+export class ContentPart extends Part {
+    static type = 'content';
+
+    render() {
+        render(this.container, this.spec.content ?? []);
+    }
+
+    /** Content is plain JSON, so it round-trips through serialization as-is. */
+    serialize() {
+        return { ...super.serialize(), content: this.spec.content ?? [] };
+    }
+}

package/src/workspace/parts/DetailPart.js

@@ -0,0 +1,46 @@
+import { Part } from '../Part.js';
+import { el, render } from '../dom.js';
+
+/**
+ * DetailPart — renders whatever arrives on a channel as a property table.
+ *
+ * The canonical *consumer*, and the part that demonstrates why ContextBus
+ * retains values: put one of these behind an inactive tab, select something in
+ * a ListPart, then reveal the tab — it mounts already populated, because
+ * `subscribe()` replays the retained value at mount time.
+ */
+export class DetailPart extends Part {
+    static type = 'detail';
+    static subscribes = ['selection:item'];
+
+    constructor(spec = {}) {
+        super(spec);
+        this.channel = spec.channel ?? 'selection:item';
+        this.empty = spec.empty ?? 'Nothing selected.';
+    }
+
+    render() {
+        this.body = this.container.appendChild(el({ cls: 'ws-detail' }));
+        this._draw(undefined);
+        // subscribe() registers the unsubscribe on the disposer list for us.
+        this.subscribe(this.channel, value => this._draw(value));
+    }
+
+    _draw(value) {
+        render(this.body, this._spec(value));
+    }
+
+    /** Value → element spec. Pure data in, pure data out; el() does the DOM. */
+    _spec(value) {
+        if (value == null) return { tag: 'p', cls: 'ws-muted', text: this.empty };
+        if (typeof value !== 'object') return { tag: 'span', text: String(value) };
+        return {
+            tag: 'dl',
+            cls: 'ws-proplist',
+            children: Object.entries(value).flatMap(([k, v]) => [
+                { tag: 'dt', text: k },
+                { tag: 'dd', text: typeof v === 'object' ? JSON.stringify(v) : String(v) },
+            ]),
+        };
+    }
+}