@echelon-framework/designer-page

Page Designer model, serializer, and palette for Echelon visual page builder.

Part of the Echelon Framework — Angular-based, config-driven dashboard & low-code platform.

Installation

npm install @echelon-framework/designer-page

Usage

import { PageDesignerModel, serialize } from '@echelon-framework/designer-page';

// Create model from existing PageConfig
const model = PageDesignerModel.fromConfig(pageConfig);

// Manipulate
model.addWidget({ id: 'title', type: 'page-title', layout: { x: 0, y: 0, w: 12 } });
model.addDatasource({ id: 'clients', config: { kind: 'transport', endpoint: '/api/clients' } });
model.addHandler({ on: 'table.select', actions: [{ setDatasource: 'selected', from: '$event' }] });

// Serialize to PageBuilder TS source
const tsCode = serialize(model);
// → "PageBuilder.create('my-page').title('...').ds('clients')..."

// Get snapshot
const snapshot = model.snapshot();
// → { widgets: [...], datasources: [...], handlers: [...] }

Features

• Mutable model — add/remove/update widgets, datasources, computed, handlers
• Undo/redo support — snapshot-based state tracking
• TS serializer — generates valid PageBuilder chain from model state
• Layout management — 12-col grid positioning

License

BUSL-1.1