`;
}
// The selected node's configuration, shown in the right panel.
private _renderInspector(node: FlowNodeInstance) {
const type = this.registry.get(node.type);
const renderConfig = type?.renderConfig;
const update = (data: Record) => {
node.data = {...node.data, ...data};
this._commit();
};
// The guard keeps the consumer's config DOM in place across value-only
// re-renders (so live-typing inputs keep focus); it rebuilds when the node
// changes, the state is replaced, or a branch is added / removed /
// replaced (ids, not count — a swap like delete-last keeps the count).
const configKey = [node.id, this._configRevision, nodeOutputs(node, type).map(p => p.id).join('|')];
return html`
`;
}
/** Replace one of the node's output ports (per-instance override), keeping its id. */
private _updateBranch(node: FlowNodeInstance, portId: string, patch: Partial) {
const type = this.registry.get(node.type);
node.outputs = nodeOutputs(node, type).map(p => (p.id === portId ? {...p, ...patch, id: p.id} : p));
this._commit();
}
/** Persist the built-in conditions editor's draft onto the branch and close it. Undoable. */
private _saveBranchConditions(node: FlowNodeInstance, port: FlowPort, conditions: FlowBranchConditions) {
this._pushHistory();
this._updateBranch(node, port.id, {data: {...port.data, conditions}});
this._selectedBranch = null;
}
// The branch editor: rename an output branch and configure its conditions.
private _renderBranchEditor(node: FlowNodeInstance, port: FlowPort) {
const type = this.registry.get(node.type);
const renderBranchConfig = type?.renderBranchConfig;
const update = (patch: Partial) => this._updateBranch(node, port.id, patch);
// Stable while the branch name is live-typed; rebuilds (with the fresh port
// object) when the branch, its condition data, or the state changes.
const configKey = [node.id, port.id, this._configRevision, JSON.stringify(port.data ?? null)];
// A loop branch's editor matches its amber pill and wire, and says so.
const conn = this._state.connections.find(c => c.source.node === node.id && c.source.port === port.id);
const isLoop = !!conn && loopConnections(this._state.nodes, this._state.connections).has(conn);
const accent = isLoop ? 'rgb(var(--zn-color-warning))' : type?.color ?? 'rgb(var(--zn-color-primary))';
const loopTarget = isLoop ? this._state.nodes.find(n => n.id === conn!.target.node) : undefined;
const loopTargetLabel = loopTarget
? loopTarget.label ?? this.registry.get(loopTarget.type)?.label ?? loopTarget.type
: '';
return html`
`;
}
// The right panel: branch editor or node inspector when something is selected,
// otherwise the sidebar (status / errors / version history).
private _renderRightPanel() {
const branch = this._branchSelection();
if (branch) return this._renderBranchEditor(branch.node, branch.port);
const selected = this._state.nodes.find(n => n.id === this._selectedNodeId);
return selected ? this._renderInspector(selected) : this._renderSidebar();
}
// Full-width action bar above the panels; only shown when actions are slotted.
private _renderHeader() {
const hasHeader = this._hasSlot.test('header-left') || this._hasSlot.test('header-right');
return html`
`;
}
// The right panel: a slot for version history / status, defaulting to a
// configuration-errors summary derived from `errorNodes`.
private _renderSidebar() {
const errors = this.errorNodes
.map(id => this._state.nodes.find(n => n.id === id))
.filter((n): n is FlowNodeInstance => !!n);
return html`
`;
}
// Bottom-left of the canvas: flashes as each auto-save lands, otherwise
// shows how long ago the last one happened.
private _renderAutoSaveStatus() {
if (this.autoSave === null || (!this._justSaved && this._lastSavedAt === null)) return '';
const label = this._justSaved
? 'Auto-saved'
: `Last saved ${timeAgo(Math.max(0, this._statusNow - (this._lastSavedAt ?? 0)))}`;
return html`
${label}
`;
}
// Offered when a loaded flow differs from a fresh auto-saved draft.
private _renderRestorePrompt() {
if (!this._restorePrompt) return '';
return html`
An auto-saved draft from ${timeAgo(Date.now() - this._restorePrompt.savedAt)} differs from this flow.