@fluentcommerce/ai-skills 0.1.0 → 0.3.0

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

@@ -0,0 +1,98 @@
+---
+alias: "fc.chart.area.wrapper.feed"
+aliases:
+  - fc.chart.area.wrapper.feed
+category: wrapper
+module: Core
+---
+# fc.chart.area.wrapper.feed
+
+Area chart wrapper that converts Metrics API feed data into a Recharts-readable format, used for Feeds Dashboard visualizations.
+
+> **Note:** `fc.chart.area.md` lists this as an alias. This file documents the wrapper-specific behavior and Metrics API integration. For general area chart usage with standard GraphQL data, see `fc.chart.area`.
+
+## When to Use
+- Visualizing inventory feed metrics as area charts (cumulative trends)
+- Feeds Dashboard area chart displays
+- Any Metrics API feed data that needs area chart visualization
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `dataSource` | string | **Yes** | Path to Metrics API GraphQL feed data |
+| `path` | string | No | Sub-path to chart data within the data source |
+| `XAxis` | Axis | **Yes** | X-axis configuration (tick lines, axis lines) |
+| `YAxis` | Axis | No | Y-axis configuration |
+| `chartContainerConfig` | ChartContainerConfig | No | Responsive container sizing |
+| `tooltip` | boolean | No | Show hover tooltips |
+| `legend` | boolean | No | Show chart legend |
+| `cartesianGrid` | CartesianGrid | No | Grid line configuration |
+| `title` | string | No | Chart card title |
+| `width` | CardWidth | No | Card width: `"quarter"`, `"third"`, `"half"`, `"two-thirds"`, `"full"`, or 1-12 (default: `"full"`) |
+| `noCard` | boolean | No | Render without card background when `true` |
+
+### Axis
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `tickLine` | boolean | No | Show axis tick lines (default: `true`) |
+| `axisline` | boolean | No | Show axis line (default: `true`) |
+
+### CartesianGrid
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `strokeDasharray` | string | **Yes** | Pattern of dashes and gaps for grid lines, e.g., `"3 3"` |
+
+### ChartContainerConfig
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `width` | string/number | No | Container width (default: `"100%"`) |
+| `aspect` | number | No | Width/height ratio (default: `1`) |
+| `maxHeight` | number | No | Maximum container height (default: `200`) |
+| `height` | string/number | No | Fixed or percentage height |
+| `minWidth` | string/number | No | Minimum container width |
+| `minHeight` | string/number | No | Minimum container height |
+| `debounce` | number | No | Resize event debounce in ms (default: `1`) |
+
+## Data Binding
+Transforms Metrics API feed response data into the array-of-objects format expected by Recharts. The `dataSource` prop points to the Metrics API result path. The optional `path` prop drills into a sub-path of the data.
+
+## Descendants
+No -- self-contained chart component.
+
+## Composition Patterns
+- `fc.page` > `fc.chart.area.wrapper.feed` alongside `fc.list.wrapper.feed` for full Feeds Dashboard
+- Use `noCard: true` when embedding inside an `fc.card.multi`
+- Pair with `fc.daterange.wrapper.forwarder` for time-filtered feed charts
+
+## Gotchas
+- Only works with Metrics API feed data -- use `fc.chart.area` for standard GraphQL data
+- `dataSource` and `XAxis` are required
+- `cartesianGrid.strokeDasharray` is required when `cartesianGrid` is specified
+- Default `maxHeight` is `200` (different from bar chart wrapper's `300`)
+
+## Manifest Example
+```json
+{
+  "component": "fc.chart.area.wrapper.feed",
+  "props": {
+    "title": "Feed Activity",
+    "dataSource": "feedMetrics",
+    "width": "half",
+    "XAxis": { "tickLine": false },
+    "YAxis": { "axisline": false },
+    "cartesianGrid": { "strokeDasharray": "3 3" },
+    "tooltip": true,
+    "legend": true,
+    "chartContainerConfig": {
+      "maxHeight": 250,
+      "aspect": 2
+    }
+  }
+}
+```
+
+## 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.chart.bar.md

@@ -0,0 +1,52 @@
+---
+alias: "fc.chart.bar"
+aliases:
+  - fc.chart.bar
+  - fc.chart.bar.wrapper.source
+  - fc.chart.line
+  - fc.chart.area
+  - fc.chart.area.wrapper.feed
+  - fc.chart.gauge
+  - fc.chart.gauge.wrapper.threshold
+category: content
+module: Core
+---
+# fc.chart.bar
+
+Recharts-based data visualization. Covers: bar charts (comparisons), line charts (trends), area charts (cumulative), gauge charts (thresholds).
+
+## When to Use
+- Analytics dashboards
+- Data trend visualization
+- KPI gauge displays
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `dataSource` | string | **Yes** | Path to chart data |
+| `xAxis` | AxisConfig | No | X-axis data key, ticks, labels |
+| `yAxis` | AxisConfig | No | Y-axis configuration |
+| `bars` / `lines` / `areas` | ChartSeries[] | No | Series definitions with dataKey, color |
+| `legend` | boolean | No | Show legend |
+| `tooltip` | boolean | No | Show hover tooltips |
+| `title` | string | No | Chart title |
+| `width` | CardWidth | No | Chart container width |
+
+## Manifest Example
+```json
+{
+  "component": "fc.chart.bar",
+  "props": {
+    "dataSource": "orderMetrics",
+    "title": "Orders by Status",
+    "bars": [{ "dataKey": "count", "color": "#1976d2" }],
+    "xAxis": { "dataKey": "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.

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

@@ -0,0 +1,104 @@
+---
+alias: "fc.chart.bar.wrapper.source"
+aliases:
+  - fc.chart.bar.wrapper.source
+category: wrapper
+module: Core
+---
+# fc.chart.bar.wrapper.source
+
+Bar chart wrapper that converts Metrics API source data into a Recharts-readable format, used for Sources Dashboard visualizations.
+
+> **Note:** `fc.chart.bar.md` lists this as an alias. This file documents the wrapper-specific behavior and Metrics API integration. For general bar chart usage with standard GraphQL data, see `fc.chart.bar`.
+
+## When to Use
+- Visualizing inventory source metrics as bar charts
+- Sources Dashboard bar chart displays
+- Any Metrics API data that needs bar chart visualization
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `dataSource` | string | **Yes** | Path to Metrics API GraphQL data |
+| `XAxis` | Axis | **Yes** | X-axis configuration (data key, ticks, labels) |
+| `YAxis` | Axis | No | Y-axis configuration |
+| `bars` | Bar[] | **Yes** | Bar series definitions (data keys, colors, stacking) |
+| `chartContainerConfig` | ResponsiveContainerConfig | No | Responsive container sizing |
+| `legend` | boolean | No | Show chart legend (generated from Bar `name` or `dataKey`) |
+| `tooltip` | boolean | No | Show hover tooltips on bars |
+| `title` | string | No | Chart card title |
+| `width` | CardWidth | No | Card width: `"quarter"`, `"third"`, `"half"`, `"two-thirds"`, `"full"`, or 1-12 (default: `"full"`) |
+| `noCard` | boolean | No | Render without card background when `true` |
+
+### Axis
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `dataKey` | string | No | Key in the data for axis values |
+| `tick` | boolean | No | Show axis ticks (default: `true`) |
+| `tickLine` | boolean | No | Show axis tick lines (default: `true`) |
+| `axisline` | boolean | No | Show axis line (default: `true`) |
+| `label` | string | No | Axis label text |
+| `offset` | number | No | Label offset from axis (y-axis default: `-20`) |
+| `angle` | number | No | Label rotation angle (y-axis default: `-90`) |
+| `position` | string | No | Label position: `"insideBottom"`, `"insideLeft"`, `"top"`, `"right"`, etc. |
+
+### Bar
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `dataKey` | string | **Yes** | Data key for bar values (must be unique per bar) |
+| `stackId` | string | No | Stack ID -- bars with same `stackId` are stacked |
+| `fill` | string | No | Bar color in HEX format, e.g., `"#8B45E4"` |
+
+### ResponsiveContainerConfig
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `width` | string/number | No | Container width (default: `"100%"`) |
+| `aspect` | number | No | Width/height ratio (default: `1`) |
+| `maxHeight` | number | No | Maximum container height (default: `300`) |
+| `height` | string/number | No | Fixed or percentage height |
+| `minWidth` | string/number | No | Minimum container width |
+| `minHeight` | string/number | No | Minimum container height |
+
+## Data Binding
+Transforms Metrics API source response data into the array-of-objects format expected by Recharts. The `dataSource` prop points to the Metrics API result path. The wrapper handles the data shape conversion.
+
+## Descendants
+No -- self-contained chart component.
+
+## Composition Patterns
+- `fc.page` > `fc.chart.bar.wrapper.source` alongside `fc.list.wrapper.source` for full Sources Dashboard
+- Use `noCard: true` when embedding inside an `fc.card.multi`
+- Pair with `fc.daterange.wrapper.forwarder` for time-filtered source charts
+
+## Gotchas
+- Only works with Metrics API data -- use `fc.chart.bar` for standard GraphQL data
+- `XAxis` and `bars` are required -- chart will not render without them
+- On mobile, card width auto-collapses to full width regardless of `width` setting
+- Stacked bars require matching `stackId` values on two or more Bar entries
+
+## Manifest Example
+```json
+{
+  "component": "fc.chart.bar.wrapper.source",
+  "props": {
+    "title": "Source Throughput",
+    "dataSource": "sourceMetrics",
+    "width": "half",
+    "XAxis": { "dataKey": "date" },
+    "YAxis": { "label": "Count" },
+    "bars": [
+      { "dataKey": "success", "fill": "#4CAF50" },
+      { "dataKey": "failed", "fill": "#D23B3B", "stackId": "total" },
+      { "dataKey": "pending", "fill": "#EF8F00", "stackId": "total" }
+    ],
+    "legend": true,
+    "tooltip": true
+  }
+}
+```
+
+## 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.chart.gauge.md

@@ -0,0 +1,28 @@
+---
+alias: fc.chart.gauge
+aliases:
+  - fc.chart.gauge
+  - fc.chart.gauge.wrapper.threshold
+category: content
+module: Core
+---
+
+# fc.chart.gauge
+
+Recharts-based gauge chart for threshold/target visualizations.
+
+## When to Use
+- Performance metrics against targets, capacity utilization
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| dataSource | string | Yes | Path to chart data |
+| title | string | No | Chart title |
+| width | CardWidth | No | Card width |
+
+## 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.chart.gauge.wrapper.threshold.md

@@ -0,0 +1,118 @@
+---
+alias: "fc.chart.gauge.wrapper.threshold"
+aliases:
+  - fc.chart.gauge.wrapper.threshold
+category: wrapper
+module: Core
+---
+# fc.chart.gauge.wrapper.threshold
+
+Gauge chart wrapper that converts Metrics API data into a gauge visualization with configurable color thresholds driven by Fluent Settings.
+
+> **Note:** `fc.chart.gauge.md` lists this as an alias. This file documents the wrapper-specific behavior including threshold settings integration. For general gauge chart usage, see `fc.chart.gauge`.
+
+## When to Use
+- KPI gauges showing throughput against configurable thresholds
+- Sources and Feeds Dashboard performance indicators
+- Any Metrics API data that needs gauge visualization with color-coded thresholds
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `dataSource` | string | **Yes** | Path to Metrics API GraphQL data |
+| `settingName` | string | **Yes** | Fluent Setting name used to load threshold/color configuration |
+| `timeFilterKey` | string | **Yes** | URL parameter name for the current time period filter (scales thresholds) |
+| `value` | number/string | No | Template-calculated value or number compared against thresholds |
+| `primaryText` | string | No | Large bold text in the center of the gauge |
+| `secondaryText` | string | No | Small text displayed below the primary text |
+| `colorConfig` | ColorConfig | No | Override default gauge colors |
+| `arc` | Arc | No | Gauge arc geometry configuration |
+| `chartContainerConfig` | ChartContainerConfig | No | Responsive container sizing |
+| `title` | string | No | Chart card title |
+| `width` | CardWidth | No | Card width: `"quarter"`, `"third"`, `"half"`, `"two-thirds"`, `"full"`, or 1-12 (default: `"full"`) |
+| `noCard` | boolean | No | Render without card background when `true` |
+
+### Arc
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `startAngle` | number | No | Start angle of the first sector (default: `210`) |
+| `endAngle` | number | No | End angle of the last sector (default: `-30`) |
+| `innerRadius` | number/string | No | Inner radius (default: `"82%"`) |
+| `outerRadius` | number/string | No | Outer radius (default: `"93%"`) |
+| `cx` | number/string | No | X coordinate of center (default: `"50%"`) |
+| `cy` | number/string | No | Y coordinate of center (default: `"50%"`) |
+
+### ColorConfig
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `active` | string / ColorMap | No | Color for the filled (active) sector. HEX string or `[[threshold, color]]` array |
+| `inactive` | string / ColorMap | No | Color for the unfilled (inactive) sector. HEX string or `[[threshold, color]]` array |
+| `primaryText` | string | No | Color for center primary text (HEX) |
+| `secondaryText` | string | No | Color for center secondary text (HEX) |
+
+### ChartContainerConfig
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `width` | string/number | No | Container width (default: `"100%"`) |
+| `aspect` | number | No | Width/height ratio (default: `1`) |
+| `maxHeight` | number | No | Maximum container height (default: `200`) |
+| `height` | string/number | No | Fixed or percentage height |
+| `minWidth` | string/number | No | Minimum container width |
+| `minHeight` | string/number | No | Minimum container height |
+
+## Data Binding
+Transforms Metrics API response data into gauge percentage and color values. The `settingName` prop loads a Fluent Setting containing threshold configuration (an array of `{ percentage, color, threshold }` objects). The `timeFilterKey` reads a URL parameter to scale the per-hour thresholds to the selected time window.
+
+### Setting Format
+The Setting referenced by `settingName` must contain a JSON array:
+```json
+[
+  { "percentage": 25, "color": "#D23B3B", "threshold": 0 },
+  { "percentage": 75, "color": "#EF8F00", "threshold": 3000 },
+  { "percentage": 100, "color": "#4CAF50", "threshold": 4000 }
+]
+```
+
+## Descendants
+No -- self-contained chart component.
+
+## Composition Patterns
+- `fc.page` > multiple `fc.chart.gauge.wrapper.threshold` in a row for KPI dashboard
+- Place inside `fc.column(width: "quarter")` for compact gauge tiles
+- Combine with `fc.daterange.wrapper.forwarder` for time-filtered gauge displays
+- Pair with `fc.list.wrapper.source` or `fc.list.wrapper.feed` on the same dashboard
+
+## Gotchas
+- `dataSource`, `settingName`, and `timeFilterKey` are all required
+- Thresholds in the Setting are per-hour counts -- the component scales them based on the time filter
+- `colorConfig.active` can be a simple HEX string or a ColorMap array `[[percentThreshold, color]]` for gradient-like behavior
+- Arc angles are in degrees: default spans from 210 to -30 (a standard semi-circular gauge)
+- The Setting must exist in the Fluent environment -- missing settings cause the gauge to render with default colors
+
+## Manifest Example
+```json
+{
+  "component": "fc.chart.gauge.wrapper.threshold",
+  "props": {
+    "title": "Source Throughput",
+    "dataSource": "sourceMetrics.totalCount",
+    "settingName": "SOURCE_THROUGHPUT_THRESHOLDS",
+    "timeFilterKey": "period",
+    "primaryText": "{{sourceMetrics.totalCount}}",
+    "secondaryText": "items/hr",
+    "width": "quarter",
+    "arc": {
+      "startAngle": 210,
+      "endAngle": -30,
+      "innerRadius": "82%",
+      "outerRadius": "93%"
+    }
+  }
+}
+```
+
+## 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.chart.line.md

@@ -0,0 +1,32 @@
+---
+alias: fc.chart.line
+aliases:
+  - fc.chart.line
+category: content
+module: Core
+---
+
+# fc.chart.line
+
+Recharts-based line chart for trend visualization over time.
+
+## When to Use
+- Time-series trends, continuous data visualization
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| dataSource | string | Yes | Path to chart data |
+| lines | ChartSeries[] | No | Series with dataKey and color |
+| xAxis | AxisConfig | No | X-axis configuration |
+| yAxis | AxisConfig | No | Y-axis configuration |
+| legend | boolean | No | Show/hide legend |
+| tooltip | boolean | No | Show/hide tooltip |
+| title | string | No | Chart title |
+| width | CardWidth | No | Card width |
+
+## 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.conditional.md

@@ -0,0 +1,62 @@
+---
+alias: "fc.conditional"
+aliases:
+  - fc.conditional
+category: layout
+module: Core
+---
+# fc.conditional
+
+Show/hide content based on data value matching using template expressions.
+
+## When to Use
+- Different content for HD vs CC orders
+- Status-specific warnings or alerts
+- Role-based content visibility
+- Show/hide sections based on entity attributes
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `value` | string | **Yes** | Template string to evaluate, e.g., `"{{status}}"`, `"{{type}}"` |
+| `matches` | string / string[] | **Yes** | Value(s) to match against. Array = OR logic for most operations |
+| `operation` | string | No | Comparison operator (default: `"="`). Supported: `"="`, `"!="`, `">"`, `"<"`, `">="`, `"<="`, `"contains"` |
+
+## Data Binding
+Evaluates `value` template against current data context.
+
+## Descendants
+Yes — rendered only when condition matches.
+
+## Composition Patterns
+- Multiple `fc.conditional` siblings for if/else-if patterns
+- Wrap `fc.card.attribute` for type-specific detail cards
+- Wrap `fc.list` for type-specific item views
+
+## Gotchas
+- Both `value` AND `matches` are required -- omitting either renders nothing
+- No `else` construct -- use a second `fc.conditional` with opposite match
+- Template string must be valid Handlebars: `{{fieldName}}`
+- Default `operation` is `"="` (strict string equality) -- omitting it means equality check
+- **`contains` operates on comma-separated strings**, not JavaScript arrays. The `value` template result is split by `,` into a list, and the condition is true only if ALL `matches` entries are found in that list. Example: `value: "{{tags}}"` where tags = `"urgent,priority"`, `matches: ["urgent"]` = true
+- Numeric comparisons (`>`, `<`, `>=`, `<=`) coerce both sides to numbers via `+` operator -- non-numeric strings will produce NaN and fail
+
+## Validation Rules
+P06 (CRITICAL — must have both value and matches)
+
+## Manifest Example
+```json
+{
+  "component": "fc.conditional",
+  "props": { "value": "{{type}}", "matches": "HD" },
+  "descendants": [
+    { "component": "fc.card.attribute", "props": { "title": "HD Details", "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.dashboard.threshold.md

@@ -0,0 +1,65 @@
+---
+alias: "fc.dashboard.threshold"
+aliases:
+  - fc.dashboard.threshold
+category: content
+module: Core
+---
+# fc.dashboard.threshold
+
+Dashboard metric card with color-coded status thresholds (green/amber/red).
+
+## When to Use
+- Operations dashboard showing order counts, failure rates
+- KPI tiles with alert thresholds
+- Any metric that needs visual status indication
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `label` | string | No | Metric label text (supports templates) |
+| `value` | string/number | No | Metric value (supports templates). Alternative: use `template` |
+| `template` | string | No | Alternative to `value` -- template string for metric display. Source uses `value || template` |
+| `subTitle` | string | No | Secondary label text below the main label (supports templates). Rendered in smaller, grey text |
+| `thresholdLow` | number | No | Value above this triggers orange (#EE6F10) color |
+| `thresholdHigh` | number | No | Value above this triggers red (#D23B3B) color |
+| `link` | string | No | Click navigation URL (supports templates). Also accepts `link_template` (deprecated alias) |
+| `width` | CardWidth | No | Card width (default: `quarter` / 3 on a 12-column grid) |
+
+## Data Binding
+`value`, `label`, `subTitle`, and `link` all support template strings from the page data context.
+
+## Descendants
+No.
+
+## Composition Patterns
+- Three `fc.column(third)` > `fc.dashboard.threshold` each for a 3-metric row
+- Inside `fc.provider.graphql` for data-driven dashboards
+
+## Gotchas
+- **Default width is `quarter` (3)** -- not `full`. Tiles are designed to sit side by side in a row
+- **Color thresholds**: green (#4CAF50) by default, orange (#EE6F10) when value > `thresholdLow`, red (#D23B3B) when value > `thresholdHigh`. The value is parsed as integer for comparison
+- **"+" suffix on paginated data**: When `data.pageInfo.hasNextPage` is true, a `+` is appended to the displayed value (e.g., "1000+") to indicate there are more records than shown
+- `value` and `template` are interchangeable -- the component uses `props.value || props.template`
+- `link` and `link_template` are interchangeable -- `link_template` is the deprecated form
+
+## Manifest Example
+```json
+{
+  "component": "fc.dashboard.threshold",
+  "props": {
+    "label": "Failed Orders",
+    "subTitle": "Last 24 hours",
+    "value": "{{failedCount}}",
+    "thresholdLow": 5,
+    "thresholdHigh": 20,
+    "link": "/orders?status=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.daterange.wrapper.forwarder.md

@@ -0,0 +1,56 @@
+---
+alias: fc.daterange.wrapper.forwarder
+aliases:
+  - fc.daterange.wrapper.forwarder
+category: filter
+module: Core
+---
+
+# fc.daterange.wrapper.forwarder
+
+Wrapper that captures date range selections and forwards them as URL query parameters, enabling date-filtered navigation and data fetching.
+
+## When to Use
+- Forward user-selected date range values to URL parameters for downstream components
+- Add date range filtering to dashboard pages where charts/lists read dates from URL
+- Customize the URL parameter names used for from/to date values
+
+## Key Props
+| Prop | Type | Required | What it controls |
+|------|------|----------|------------------|
+| `keyConfig` | `{ from: string; to: string }` | No | Maps date range values to URL parameter names (default: `{ from: 'from', to: 'to' }`) |
+
+## Data Binding
+Forwards the selected date range values into URL query parameters. Child components and page queries that reference these URL parameters will automatically receive the filtered date range.
+
+## Descendants
+Yes -- wraps child components that should respond to the date range selection. Typically wraps chart and list wrapper components.
+
+## Composition Patterns
+- `fc.page` > `fc.daterange.wrapper.forwarder` > `fc.chart.bar.wrapper.source` for time-filtered charts
+- `fc.page` > `fc.daterange.wrapper.forwarder` > `fc.list.wrapper.source` for time-filtered lists
+- Combine with `fc.chart.gauge.wrapper.threshold` (which reads `timeFilterKey` from URL)
+
+## Gotchas
+- Default URL parameter names are `from` and `to` -- override with `keyConfig` if your page query uses different parameter names
+- This component provides the date range picker UI and forwards values to the URL -- it does not directly filter data
+- Child components must read from URL parameters (or use `timeFilterKey`) for the filtering to take effect
+
+## Manifest Example
+```json
+{
+  "component": "fc.daterange.wrapper.forwarder",
+  "props": {
+    "keyConfig": {
+      "from": "startDate",
+      "to": "endDate"
+    }
+  }
+}
+```
+
+## 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.drawer.button.md

@@ -0,0 +1,21 @@
+---
+alias: "fc.drawer.button"
+aliases:
+  - fc.drawer.button
+category: action
+module: Core
+---
+# fc.drawer.button
+
+Button that opens a side drawer panel. Slides in from the side. Similar to modal but preserves page context visually.
+
+## When to Use
+- Side panel detail views
+- Configuration panels
+- Order item detail overlay
+
+## 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.event.detail.md

@@ -0,0 +1,20 @@
+---
+alias: "fc.event.detail"
+aliases:
+  - fc.event.detail
+category: content
+module: OMS
+---
+# fc.event.detail
+
+Expanded detail view for a single event — shows payload, attributes, timing, and processing status.
+
+## When to Use
+- Drill-down from event search
+- Event forensics detail view
+
+## 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.