Component API

This page is a flat reference of every custom element FlowPad registers. The narrative version is in FlowPad components and shells.

Tag registration order

projects/matrix-3/packages/flowpad/src/index.ts:36-101 is the authoritative list. Tags are registered idempotently (if (!customElements.get(...))). Order:

pipeline-editor       → PipelineEditorShell
transport-log         → TransportLogShell
execution-status      → ExecutionStatusShell
results-panel         → ResultsPanelShell
flowpad-control       → FlowpadControlShell
flowpad-app           → FlowpadAppShell
mx-split              → MxSplitShell           (from @open-matrix/core)
mx-dock               → MxDockShell            (from @open-matrix/core)
mx-theme              → MxThemeShell           (from @open-matrix/core)
flowpad-actor-tree    → FlowpadActorTree
flowpad-example-list  → FlowpadExampleList
flowpad-package-browser → FlowpadPackageBrowser
flowpad-sidebar       → FlowpadSidebar
vlm-visualization     → VLMVisualizationShell
data-viewer           → DataViewerShell        (from @open-matrix/core/flow/viewers)
tree-viewer           → TreeViewerShell
table-viewer          → TableViewerShell
error-viewer          → ErrorViewerShell

API summary table

Tag	Accepts	Emits
`<flowpad-app>`	`runFlow{exampleIndex?}`, `runFromCode{code,modeHint?,sourceFormatHint?}`, `selectExample{index}`, `setTargetMount{mount}`, `loadExample{name}`, `clearResults`, `snapshot.tree.oracle`	`flowStarted`, `executionPlanned`, `flowCompleted`, `flowError`, `exampleLoaded`
`<flowpad-control>`	`setLabel{label}`, `ping`	`labelChanged{label}`, `pong{mount}`
`<pipeline-editor>`	`setCode{code}`, `getCode`, `clear`, `focus`, `setMode{mode}`, `requestRun{code,mode?}`	`codeChanged{code}`, `runRequested{code,mode}`, `modeChanged{mode}`, `focusRequested`
`<results-panel>`	`addResult{data,type?,label?,query?}`, `removeResult{id}`, `clearResults`	`resultAdded{id,mount,type,label?}`, `resultRemoved{id}`, `resultsCleared{count}`
`<execution-status>`	`setStatus{state,message?}`	`statusChanged{state,message}`
`<transport-log>`	`addEntry{timestamp,direction,topic,payload}`, `clear`	`entryClicked{index}`, `entryAdded{entry,removedFirst}`, `cleared`
`<flowpad-sidebar>`	`setCatalog`, `setTree`, `setSelectedNode`, `setExamples`, `clearExamples`, `setStatus`	`filterChanged`, `collapseToggled`, `refreshRequested`, `nodeSelected`, `nodeToggled`, `exampleSelected`, `packageActorSelected`, `packageSelected`
`<flowpad-actor-tree>`	`setTree{roots,status?}`, `setSelectedNode{mount?}`, `setStatus{status}`	`nodeSelected{mount,componentClass}`, `refreshRequested`, `nodeToggled{mount,expanded}`
`<flowpad-package-browser>`	`setCatalog{packages,entries,loading?,error?}`, `setFilter{filter}`	`packageSelected{packageName,mounts,types}`, `actorSelected{mount}`
`<flowpad-example-list>`	`setExamples{examples,actorMount?,actorClass?}`, `setSelectedExample{key?}`, `clear`	`exampleSelected{endpointMount,exampleIndex,operation,payload,label,rawCode?}`
`<vlm-visualization>`	see VLMVisualization.ts	see VLMVisualization.ts

Result viewers (re-registered)

These come from @open-matrix/core/flow/viewers. ResultsPanel uses them as result children.

Tag	Notes
`<data-viewer>`	Generic value pretty-printer. Accepts `setData`.
`<tree-viewer>`	Tree explorer for component schemas. Accepts `setTree`, `expandAll`, `collapseAll`.
`<table-viewer>`	Sortable table for record arrays. Accepts `setRows`, `sortBy`, `setColumns`.
`<error-viewer>`	Error pane with stack and remediation hints. Accepts `setError`.

Layout primitives (re-registered)

Tag	Notes
`<mx-split>`	Two-pane resizable container. Attributes: `direction` (`horizontal` default, `vertical`), `position` (% in 0–100), `min`, `max`.
`<mx-dock>`	Tabbed dock. Children with a `slot=tab-<name>` attribute become tabs.
`<mx-theme>`	Design-token sink. Listens for `$tokens` ops and applies them as CSS custom properties to the host's shadow root.

Attributes consumed from the host element

<matrix-dsl-host> (the page's root host) carries these attributes; FlowPad components read them:

Attribute	Read by	Meaning
`data-runtime-root`	`ExecutionStatusShell`	Runtime authority root
`data-authority-root`	`ExecutionStatusShell`, `FlowpadAppShell`	Configured authority root
`data-platform-root`	`ExecutionStatusShell`	Platform root for federation
`data-target-source` / `data-target-kind`	`ExecutionStatusShell`	Catalog target metadata
`data-requested-root` / `data-target-unavailable-reason`	`ExecutionStatusShell`	Diagnostics

Pattern B contract reminder

Every shell extends MatrixActorHtmlElement. Every actor extends MatrixActor. Communication shell ↔ actor goes through the bus, never direct method calls. Shells set name on child elements before insertion. None of the components use innerHTML to create <mx-*> elements.

Component API ​

Tag registration order ​

API summary table ​

Result viewers (re-registered) ​

Layout primitives (re-registered) ​

Attributes consumed from the host element ​

Pattern B contract reminder ​

See also ​