@fluentcommerce/ai-skills 0.1.0 → 0.3.0

package/content/dev/skills/fluent-mystique-builder/components/fc.list.wrapper.bppmetrics.md

@@ -0,0 +1,69 @@
+---
+alias: "fc.list.wrapper.bppmetrics"
+aliases:
+  - fc.list.wrapper.bppmetrics
+category: wrapper
+module: Core
+---
+# fc.list.wrapper.bppmetrics
+
+List wrapper that transforms Metrics API batch-processing data into a format readable by the `fc.list` component, used for BPP (Batch Processing Pipeline) metrics dashboards.
+
+## When to Use
+- Displaying batch-processing pipeline metrics in a tabular list
+- BPP Metrics Dashboard pages
+- Any page that needs to render Metrics API batch data in an `fc.list` table
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `rowLimit` | number | No | Maximum number of rows displayed in the table (default: `100`) |
+| `hideEmptyRecords` | boolean | No | When `true`, hides rows where all cells except the date column are empty |
+
+## Data Binding
+Transforms Metrics API batch-processing response data into the row/column format expected by `fc.list`. The page-level `data.query` should point to a Metrics API BPP endpoint.
+
+## Descendants
+Yes -- accepts `fc.list` (or other list-compatible components) as children. The wrapper feeds transformed data into its descendants.
+
+## Composition Patterns
+- `fc.page` > `fc.list.wrapper.bppmetrics` > `fc.list` for a BPP metrics table
+- Combine with gauge or bar chart wrappers for a full BPP dashboard
+- Use `hideEmptyRecords: true` with `rowLimit` to focus on active processing periods
+
+## Gotchas
+- Only transforms Metrics API BPP data -- will not work with standard GraphQL entity queries
+- Must wrap an `fc.list` descendant to be useful -- the wrapper itself renders nothing visible
+- `rowLimit` defaults to 100 -- set explicitly for pages with large datasets
+- `hideEmptyRecords` only affects rows where non-date columns are all empty
+
+## Manifest Example
+```json
+{
+  "component": "fc.list.wrapper.bppmetrics",
+  "props": {
+    "rowLimit": 50,
+    "hideEmptyRecords": true
+  },
+  "descendants": [
+    {
+      "component": "fc.list",
+      "props": {
+        "dataSource": "bppMetrics",
+        "attributes": [
+          { "label": "Date", "value": "{{node.date}}" },
+          { "label": "Processed", "value": "{{node.processed}}" },
+          { "label": "Failed", "value": "{{node.failed}}" },
+          { "label": "Pending", "value": "{{node.pending}}" }
+        ]
+      }
+    }
+  ]
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.list.wrapper.feed.md

@@ -0,0 +1,65 @@
+---
+alias: "fc.list.wrapper.feed"
+aliases:
+  - fc.list.wrapper.feed
+category: wrapper
+module: Core
+---
+# fc.list.wrapper.feed
+
+List wrapper that converts Metrics API feed data into a format readable by the `fc.list` component, used for Feeds Dashboard displays.
+
+## When to Use
+- Displaying inventory feed metrics in a tabular list
+- Any page that needs to render Metrics API feed data in an `fc.list` table
+- Feeds Dashboard in the Big Inventory web app
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+
+No component-specific configuration properties. Uses standard `dataSource` and `descendants` configuration.
+
+## Data Binding
+Transforms Metrics API feed response data into the row/column format expected by `fc.list`. The page-level `data.query` should point to a Metrics API feed endpoint. This wrapper handles the data shape conversion automatically.
+
+## Descendants
+Yes -- accepts `fc.list` (or other list-compatible components) as children. The wrapper feeds transformed data into its descendants.
+
+## Composition Patterns
+- `fc.page` > `fc.list.wrapper.feed` > `fc.list` for a feeds metrics table
+- Often paired with `fc.chart.area.wrapper.feed` on the same dashboard page
+- Combine with `fc.daterange.wrapper.forwarder` for time-filtered feed data
+
+## Gotchas
+- Only transforms Metrics API feed data -- will not work with standard GraphQL entity queries
+- Must wrap an `fc.list` descendant to be useful -- the wrapper itself renders nothing visible
+- Designed specifically for the Feeds Dashboard use case in Fluent Big Inventory
+- Similar to `fc.list.wrapper.source` but for feed data (different Metrics API shape)
+
+## Manifest Example
+```json
+{
+  "component": "fc.list.wrapper.feed",
+  "descendants": [
+    {
+      "component": "fc.list",
+      "props": {
+        "dataSource": "feedMetrics",
+        "attributes": [
+          { "label": "Feed", "value": "{{node.name}}" },
+          { "label": "Total", "value": "{{node.total}}" },
+          { "label": "Success", "value": "{{node.success}}" },
+          { "label": "Failed", "value": "{{node.failed}}" }
+        ]
+      }
+    }
+  ]
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.list.wrapper.source.md

@@ -0,0 +1,64 @@
+---
+alias: "fc.list.wrapper.source"
+aliases:
+  - fc.list.wrapper.source
+category: wrapper
+module: Core
+---
+# fc.list.wrapper.source
+
+List wrapper that converts Metrics API data into a format readable by the `fc.list` component, used for Sources Dashboard displays.
+
+## When to Use
+- Displaying inventory source metrics in a tabular list
+- Any page that needs to render Metrics API data in an `fc.list` table
+- Sources Dashboard in the Big Inventory web app
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+
+No component-specific configuration properties. Uses standard `dataSource` and `descendants` configuration.
+
+## Data Binding
+Transforms Metrics API response data into the row/column format expected by `fc.list`. The page-level `data.query` should point to a Metrics API endpoint. This wrapper handles the data shape conversion automatically.
+
+## Descendants
+Yes -- accepts `fc.list` (or other list-compatible components) as children. The wrapper feeds transformed data into its descendants.
+
+## Composition Patterns
+- `fc.page` > `fc.list.wrapper.source` > `fc.list` for a sources metrics table
+- Often paired with `fc.chart.bar.wrapper.source` on the same dashboard page
+- Combine with `fc.daterange.wrapper.forwarder` for time-filtered source data
+
+## Gotchas
+- Only transforms Metrics API data -- will not work with standard GraphQL entity queries
+- Must wrap an `fc.list` descendant to be useful -- the wrapper itself renders nothing visible
+- Designed specifically for the Sources Dashboard use case in Fluent Big Inventory
+
+## Manifest Example
+```json
+{
+  "component": "fc.list.wrapper.source",
+  "descendants": [
+    {
+      "component": "fc.list",
+      "props": {
+        "dataSource": "sourceMetrics",
+        "attributes": [
+          { "label": "Source", "value": "{{node.name}}" },
+          { "label": "Total", "value": "{{node.total}}" },
+          { "label": "Success", "value": "{{node.success}}" },
+          { "label": "Failed", "value": "{{node.failed}}" }
+        ]
+      }
+    }
+  ]
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.modal.button.addItem.md

@@ -0,0 +1,60 @@
+---
+alias: "fc.modal.button.addItem"
+aliases:
+  - fc.modal.button.addItem
+category: action
+module: OMS
+---
+
+# fc.modal.button.addItem
+
+Add-item button used inside product search modals for order revision. Renders as an icon button (+) that calls an `onAddItem` callback with the current row's data.
+
+## When to Use
+- Inside a product search list within an order revision modal
+- As an action column in a product search `fc.list` to add items to an order
+- Part of the OMS order revision workflow
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `onAddItem` | `(item: any) => void` | Yes | Callback function invoked with the selected product's node data when the button is clicked |
+
+## Data Binding
+Reads the current row's data from the `useData()` hook (`context.data.node`). When clicked, passes the entire node object to the `onAddItem` callback.
+
+## Descendants
+No -- renders a single `IconButton` with a `+` icon.
+
+## Composition Patterns
+- Used internally by the OMS `ProductSearchModal` component
+- Injected as a column in the product search list: `type: "component"` > `fc.modal.button.addItem`
+- The `onAddItem` callback is typically wired to the order revision logic to add the selected product
+
+## Gotchas
+- This is an OMS module component -- requires the OMS plugin to be loaded.
+- The `onAddItem` prop is a function reference, not a manifest-configurable string. It is typically injected programmatically by `ProductSearchModal`, not directly in manifest JSON.
+- Reads from `useData().context.data.node` which means it must be inside a list row context where `node` is the current item.
+- Renders as a small icon button with `GoPlus` icon -- not a full-size button.
+- Registered with category `content` in the OMS component registry.
+
+## Manifest Example
+```json
+{
+  "label": "",
+  "type": "component",
+  "align": "right",
+  "options": {
+    "component": "fc.modal.button.addItem",
+    "props": {
+      "onAddItem": "handleAddItem"
+    }
+  }
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.modal.button.md

@@ -0,0 +1,21 @@
+---
+alias: "fc.modal.button"
+aliases:
+  - fc.modal.button
+category: action
+module: Core
+---
+# fc.modal.button
+
+Button that opens a modal dialog. Can execute a GraphQL query and display results in the modal.
+
+## When to Use
+- Show detail information in a popup
+- Confirmation dialogs
+- Secondary data display without page navigation
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.mutation.inline.md

@@ -0,0 +1,88 @@
+---
+alias: "fc.mutation.inline"
+aliases:
+  - fc.mutation.inline
+category: action
+module: Core
+---
+
+# fc.mutation.inline
+
+Inline mutation card that auto-generates a form from a GraphQL mutation schema, renders it in a card, and submits the mutation on form submit.
+
+## When to Use
+- Display an inline editable form for a GraphQL mutation (e.g. `updateOrder`, `createFulfilment`)
+- Build quick-edit cards that introspect the mutation schema to generate form fields automatically
+- Provide inline update forms on detail pages without requiring a drawer or modal
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `title` | string | No | Card title displayed above the form |
+| `width` | CardWidth | No | Card width on 12-column grid |
+| `highlight` | string | No | Top border highlight color |
+| `mutation` | MutationConfig | Yes | Mutation configuration object (see below) |
+
+### MutationConfig Structure
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | Yes | GraphQL mutation name (e.g. `"updateOrder"`, `"createFulfilment"`) |
+| `label` | string | Yes | Display label for the mutation action |
+| `args` | Record<string, any> | No | Pre-filled argument values -- supports template strings `"{{id}}"` |
+| `overrides` | Record<string, ExtendedFormField> | No | Per-field overrides for label, component, value, validation, etc. |
+| `filter` | MutationFieldFilter | No | Include/exclude specific fields: `{ type: "include"\|"exclude", names: string[] }` |
+| `postSubmit` | PostSubmitType | No | Action after successful submission (e.g. refresh page, navigate) |
+
+## Data Binding
+For update mutations, the component auto-generates a query from the mutation name (e.g. `updateOrder` -> `order` query) to pre-populate form fields. Template strings in `args` are resolved against the current data context.
+
+## Descendants
+No -- form fields are auto-generated from the GraphQL mutation schema.
+
+## Composition Patterns
+- `fc.page` > `fc.mutation.inline` for inline edit forms on detail pages
+- `fc.column` > `fc.mutation.inline` alongside `fc.card.attribute` for view + edit layout
+- For drawer-based mutations, use `fc.mutation.button` (MutationButton) instead
+
+## Gotchas
+- The `mutation.name` must exactly match a GraphQL mutation in the schema. The component introspects the schema via `getMutationInputArg()`.
+- For `update` mutations (name starts with "update"), the component auto-fetches current entity data to pre-populate the form.
+- Fields with pre-set values in `args` are hidden from the form (treated as locked values) and re-injected on submit.
+- The `filter` prop allows include/exclude lists to control which fields appear in the generated form.
+- `overrides` can customize individual field components, labels, default values, and validation rules.
+- On submit, shows a loading overlay and calls `refreshPage()` after completion. Error toast appears on failure.
+- Registered with category `content` in the component registry.
+
+## Manifest Example
+```json
+{
+  "component": "fc.mutation.inline",
+  "props": {
+    "title": "Update Order",
+    "width": "half",
+    "mutation": {
+      "name": "updateOrder",
+      "label": "Save Changes",
+      "args": {
+        "id": "{{id}}"
+      },
+      "filter": {
+        "type": "include",
+        "names": ["status", "type", "attributes"]
+      },
+      "overrides": {
+        "type": {
+          "label": "Order Type",
+          "component": "fc.mutation.order.type"
+        }
+      }
+    }
+  }
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.mystique.collapsible.attributes.md

@@ -0,0 +1,83 @@
+---
+alias: "fc.mystique.collapsible.attributes"
+aliases:
+  - fc.mystique.collapsible.attributes
+category: content
+module: Core
+---
+
+# fc.mystique.collapsible.attributes
+
+Collapsible display for entity attributes with expand/collapse toggle, supporting both comma-separated character mode and line-by-line display modes.
+
+## When to Use
+- Displaying a large number of entity attributes in a compact, expandable format
+- List row cells where space is limited but attributes need to be accessible
+- Any component that shows entity attributes with a "More / Less" toggle pattern
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `collapseOn` | `"characters"` / `"lines"` | No | Display and collapse mode. `"characters"` shows comma-separated truncated by character count; `"lines"` shows one attribute per line truncated by line count. Default behavior is `"characters"` (fallback for no config or misconfiguration). |
+| `collapseLimit` | number | Yes | Cutoff value: number of characters (when `collapseOn: "characters"`) or number of lines (when `collapseOn: "lines"`) before truncation |
+| `hideKeys` | boolean | No | When `true`, hides attribute names and shows values only. Default: `false` -- shows **Name:** value format with bold keys. |
+| `exclude` | string[] | No | Array of attribute names to exclude from the display |
+
+## Data Binding
+Requires `dataSource` pointing to an array of attributes or a GraphQL Connection of attributes. The data must be objects with `name` and `value` fields. The component handles both flat arrays and Connection format (with `edges[].node`).
+
+Example: `"dataSource": "node.product.attributes"`
+
+## Descendants
+No -- self-contained display component.
+
+## Composition Patterns
+- `fc.list` column `type: "component"` > `fc.mystique.collapsible.attributes` for expandable attribute cells
+- `fc.card.attribute` alongside `fc.mystique.collapsible.attributes` for mixed detail views
+- Inside `fc.tabs.card` for an "Attributes" tab with collapsible display
+
+## Gotchas
+- `collapseLimit` is required -- without it, the component cannot determine when to truncate.
+- In `"characters"` mode: counts the total character length of the comma-separated string, appends "..." when collapsed, and renders attribute keys as bold HTML (uses `dangerouslySetInnerHTML`).
+- In `"lines"` mode: counts the number of attribute rows (one attribute per line), slices the array at the limit.
+- The "More" / "Less" toggle only appears when the content exceeds the `collapseLimit`.
+- If `collapseOn` is set to an invalid value, an error is logged and the component falls back to character-based truncation.
+- The data prop accepts both `Attribute[]` and `Connection<Attribute>` -- it auto-detects Connection format via the `edges` property.
+- Different from `fc.mystique.collapsible.text` which collapses a single text string by character count.
+
+## Manifest Example
+```json
+{
+  "component": "fc.mystique.collapsible.attributes",
+  "dataSource": "node.product.attributes",
+  "props": {
+    "collapseOn": "lines",
+    "collapseLimit": 3,
+    "hideKeys": false,
+    "exclude": ["internalId", "systemRef"]
+  }
+}
+```
+
+### Inside a list column
+```json
+{
+  "label": "Attributes",
+  "type": "component",
+  "options": {
+    "component": "fc.mystique.collapsible.attributes",
+    "props": {
+      "collapseOn": "characters",
+      "collapseLimit": 80,
+      "hideKeys": true
+    },
+    "dataSource": "node.attributes"
+  }
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.mystique.collapsible.text.md

@@ -0,0 +1,33 @@
+---
+alias: "fc.mystique.collapsible.text"
+aliases:
+  - fc.mystique.collapsible.text
+category: content
+module: Core
+---
+# fc.mystique.collapsible.text
+
+Show more/less text with character cutoff toggle.
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `text` | string | **Yes** | Content text |
+| `charCutoff` | number | **Yes** | Character threshold for collapsing |
+
+## Validation Rules
+P13 (CRITICAL — both text and charCutoff required)
+
+## Manifest Example
+```json
+{
+  "component": "fc.mystique.collapsible.text",
+  "props": { "text": "{{description}}", "charCutoff": 200 }
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.mystique.link.md

@@ -0,0 +1,30 @@
+---
+alias: "fc.mystique.link"
+aliases:
+  - fc.mystique.link
+category: content
+module: Core
+---
+# fc.mystique.link
+
+Styled hyperlink for navigation within the app or to external URLs.
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `label` | string | No | Display text |
+| `link` | string | No | Destination URL (supports templates) |
+
+## Manifest Example
+```json
+{
+  "component": "fc.mystique.link",
+  "props": { "label": "View Order", "link": "/orders/{{id}}" }
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.order.itemDetails.md

@@ -0,0 +1,20 @@
+---
+alias: "fc.order.itemDetails"
+aliases:
+  - fc.order.itemDetails
+category: content
+module: OMS
+---
+# fc.order.itemDetails
+
+Drawer showing detailed order item information — product, quantity, pricing, attributes.
+
+## When to Use
+- Order detail page — click item to see full details
+- Item-level attribute inspection
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.order.shipmentDetails.md

@@ -0,0 +1,20 @@
+---
+alias: "fc.order.shipmentDetails"
+aliases:
+  - fc.order.shipmentDetails
+category: content
+module: OMS
+---
+# fc.order.shipmentDetails
+
+Drawer showing shipment/consignment tracking details.
+
+## When to Use
+- Fulfilment detail page — shipment tracking view
+- Consignment tracking display
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.

package/content/dev/skills/fluent-mystique-builder/components/fc.page.filter.select.md

@@ -0,0 +1,87 @@
+---
+alias: "fc.page.filter.select"
+aliases:
+  - fc.page.filter.select
+category: layout
+module: Core
+---
+# fc.page.filter.select
+
+Page-level dropdown select that changes a variable on the page GraphQL query, enabling dynamic data filtering.
+
+## When to Use
+- Filtering a list page by status, type, or category
+- Switching data views on a dashboard (e.g., time period, entity type)
+- Any page where the user should be able to select from predefined filter options that alter the page query
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `name` | string | No | Variable name on the GraphQL query (default: `"filter_value"`) |
+| `options` | SelectOption[] | **Yes** | Dropdown options array: `[{ label, value }]` |
+| `defaultValue` | string | No | Pre-selected value on page load |
+
+### SelectOption
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `label` | string | **Yes** | Human-readable display text |
+| `value` | string | **Yes** | Value passed to the GraphQL query variable |
+
+## Data Binding
+Sets a variable (named by `name` prop, default `"filter_value"`) on the page-level GraphQL query. The page query must reference this variable for the filter to take effect.
+
+## Descendants
+No -- this is a self-contained input component.
+
+## Composition Patterns
+- `fc.page` > `fc.page.filter.select` + `fc.list` for filtered list pages
+- Multiple `fc.page.filter.select` components for multi-dimension filtering
+- Combine with `fc.filterPanel` for advanced filtering setups
+
+## Gotchas
+- The `name` prop must match a variable in the page-level GraphQL query -- otherwise the selection has no effect
+- `options` is required -- an empty options array renders a blank dropdown
+- Default value must match one of the option `value` strings exactly
+
+## Manifest Example
+```json
+{
+  "component": "fc.page",
+  "props": {
+    "title": "Orders"
+  },
+  "data": {
+    "query": "query ($filter_value: [String]) { orders(status: $filter_value) { edges { node { id ref status } } } }"
+  },
+  "descendants": [
+    {
+      "component": "fc.page.filter.select",
+      "props": {
+        "name": "filter_value",
+        "defaultValue": "CREATED",
+        "options": [
+          { "label": "Created", "value": "CREATED" },
+          { "label": "Complete", "value": "COMPLETE" },
+          { "label": "All", "value": "" }
+        ]
+      }
+    },
+    {
+      "component": "fc.list",
+      "props": {
+        "dataSource": "orders",
+        "attributes": [
+          { "label": "Ref", "value": "{{node.ref}}" },
+          { "label": "Status", "value": "{{node.status}}" }
+        ]
+      }
+    }
+  ]
+}
+```
+
+## AI Parse Notes
+- **Primary intent:** Declarative Mystique component definition for manifests.
+- **Selection signals:** Match by `alias`, category, and required `Key Props`.
+- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
+- **Safety checks:** Validate required props and data bindings before manifest generation.