Rendering Pipeline

Pipeline Stages

1. Schema parse — parseSchema() validates and normalises the raw JSON. Sets default values, fills in missing optional properties.
2. FormEngine initialise — A FormEngine instance is created with the schema and initialValues. The engine manages field state, computed values, and binding resolution.
3. Section grouping — Controls are grouped by their sectionId. Controls without a sectionId go into the root section.
4. Mode filtering — Controls with modeVisibilitySettings that exclude the current mode are removed from the render list.
5. Visibility rule evaluation — Controls with a visibilityRule expression are evaluated. Hidden controls are removed from the render list reactively.
6. Order sorting — Visible controls within each section are sorted by their order property (ascending). Controls without an order are sorted by their array position.
7. Width layout — Controls with width properties are grouped into rows using the 12-column grid. Controls of width full start a new row; half fills 6 columns; third fills 4; quarter fills 3.
8. ControlRenderer dispatch — Each visible control is passed to ControlRenderer, which dispatches to the registered control component based on type.
9. Action bar — Form-level actions (submit, cancel, custom) are rendered below the last section in a fixed action bar.

Section Structure in Schema

// Form schema sections define grouping containers
{
  "sections": [
    {
      "id": "applicant-section",
      "title": "Applicant Information",
      "order": 1,
      "collapsible": false
    },
    {
      "id": "documents-section",
      "title": "Supporting Documents",
      "order": 2,
      "collapsible": true,
      "defaultOpen": false
    }
  ],
  "controls": [
    { "id": "first-name", "type": "text",  "sectionId": "applicant-section", "order": 1 },
    { "id": "last-name",  "type": "text",  "sectionId": "applicant-section", "order": 2 },
    { "id": "upload-id",  "type": "file-upload", "sectionId": "documents-section", "order": 1 }
  ]
}

Width Grid Layout

Row Packing Rules

The layout engine packs controls into rows greedily:

• A full width control always starts a new row.
• Consecutive non-full controls are packed left-to-right until the row is full (12 columns).
• If the next control doesn't fit in the remaining columns, a new row starts.
• Example: half + half = one row; half + third = one row (9 cols); third + third + third = one row.

ControlRenderer Dispatch

// packages/player-components-react/src/controls/ControlRenderer.tsx
// Simplified dispatch logic

const controlRegistry = getControlRegistry();

const ControlRenderer: React.FC<ControlRendererProps> = ({ control, ...ctx }) => {
  const Component = controlRegistry.get(control.type);

  if (!Component) {
    console.warn(`No renderer registered for control type: ${control.type}`);
    return <UnknownControlFallback type={control.type} />;
  }

  return <Component control={control} {...ctx} />;
};

Action Bar

The action bar renders below the last section. It includes:

• Submit button (hidden in view and design mode)
• Cancel button (optional — configured via actions in the schema)
• Custom action buttons (e.g., Save Draft, Export, Print)