---
name: mystique-manifest-components
description: "Core Mystique manifest components: fc.list attribute schema, fc.page, fc.card.attribute, Handlebars helpers, props reference."
load: on-demand
relevant-skills:
  - mystique-builder
  - mystique-validate
  - mystique-analyze
  - mystique-diff
  - ui-test
  - feature-plan
  - implementation-map
---

# Mystique Manifest Component Reference

## fc.list — Table/List Component

Renders a data table with column headers, pagination, filtering, and responsive card mode.

### Attribute (Column) Schema

`fc.list` uses `props.attributes[]` (NOT `columns[]`) to define table columns.

```json
{
  "component": "fc.list",
  "dataSource": "orders",
  "props": {
    "defaultPageSize": 100,
    "responsiveness": "card",
    "filter": { "enabled": true, "exclude": ["workflowRef", "workflowVersion"] },
    "attributes": [
      {
        "label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
        "template": "{{node.ref}}",
        "link": "#/orders/{{node.id}}/{{node.retailer.id}}/{{node.ref}}",
        "condition": "{{and node.id node.retailer.id node.ref}}"
      },
      {
        "label": "i18n:fc.om.orders.index.list.column.status.heading",
        "type": "component"
      }
    ]
  }
}
```

### Attribute Fields

| Field | Type | Required | Purpose |
|-------|------|----------|---------|
| `label` | string | Yes | Column header text or i18n key |
| `template` | string | No* | Handlebars expression for cell value |
| `link` | string | No | Clickable URL pattern (Handlebars) |
| `condition` | string | No | Handlebars condition for visibility |
| `type` | string | No | `"component"` renders registered component instead of text |

*Either `template` or `type: "component"` is required.

### Handlebars Helpers Available in Templates

| Helper | Example | Purpose |
|--------|---------|---------|
| `{{currency value currencyCode}}` | `{{currency node.totalPrice node.items.edges.0.node.currency}}` | Format currency |
| `{{dateStringFormatter date}}` | `{{dateStringFormatter node.createdOn}}` | Format date string |
| `{{dateRelative date}}` | `{{dateRelative node.createdOn}}` | Relative time ("2 hours ago") |
| `{{capitalise text}}` | `{{capitalise status}}` | Capitalize text |
| `{{and a b c}}` | `{{and node.id node.retailer.id node.ref}}` | Boolean AND condition |

### fc.list Props

| Prop | Type | Purpose |
|------|------|---------|
| `dataSource` | string | JSONPath scoping data context (matches key in page `data.query`) |
| `defaultPageSize` | number | Rows per page (default varies) |
| `responsiveness` | string | `"card"` for mobile card view |
| `filter` | object | `{ enabled: boolean, exclude: string[] }` — field-level filter controls |
| `attributes` | array | Column definitions (see above) |

## fc.page — Page Container

Wraps a full page with title bar, breadcrumbs, and optional actions (workflow user actions).

Key props: `title` (i18n key), `actions` (enables user action buttons from workflow).

Data provided via `data.query` (single) or `dataSources` (multiple independent queries).

## fc.card.attribute — Attribute Card

Displays entity fields in a card layout. Used on detail pages.

## fc.conditional — Conditional Rendering

Shows/hides descendants based on data conditions. Props: `value`, `matches`.

## fc.tabs.card — Tabbed Content

Tab container with child tab panels. Each tab has `label` and `descendants`.
