# FlowFuse Config Nodes Manual (EVOLV Reference)

Sources:
- https://dashboard.flowfuse.com/nodes/config/ui-base.html
- https://dashboard.flowfuse.com/nodes/config/ui-page.html
- https://dashboard.flowfuse.com/nodes/config/ui-group.html
- https://dashboard.flowfuse.com/nodes/config/ui-theme.html

---

## `ui-base` — Dashboard Root

| Property | Type | Notes |
|----------|------|-------|
| `path` | string | URL path after host, e.g. `/dashboard` |
| `appIcon` | string | URL to square icon (192–512px) for PWA |
| `includePagePath` | bool | Show page paths in side nav |
| `navigationStyle` | string | `"default"`, `"fixed"`, `"icon"`, `"temporary"`, `"none"` |
| `headerStyle` | string | `"default"` (scrolls), `"fixed"` (sticky), `"hidden"` |
| `headerContent` | string | `"page"`, `"dashboard"`, `"both"`, `"none"` |

---

## `ui-page` — Dashboard Page

| Property | Type | Notes |
|----------|------|-------|
| `name` | string | Displayed in nav and header |
| `ui` | ref | Parent ui-base |
| `path` | string | URL path segment, e.g. `/influent` |
| `icon` | string | Material Design icon (no `mdi-` prefix) |
| `theme` | ref | ui-theme reference |
| `layout` | string | `"grid"`, `"fixed"`, `"notebook"`, `"tabs"` |
| `order` | int | Position in navigation |
| `breakpoints` | array | See breakpoints table |

### Layout Types

| Layout | Description |
|--------|-------------|
| `grid` | Responsive grid, widgets flow into columns |
| `fixed` | Absolute positioned, no responsive reflow |
| `notebook` | Single-column stacked groups |
| `tabs` | Each group becomes a tab |

### Default Breakpoints (grid/notebook/tabs)

| Name | Min Width | Columns |
|------|-----------|---------|
| Mobile | 0 px | 3 |
| Medium | 576 px | 6 |
| Tablet | 768 px | 9 |
| Desktop | 1024 px | 12 |

---

## `ui-group` — Widget Container

| Property | Type | Notes |
|----------|------|-------|
| `name` | string | Group title (shown if `showTitle: true`) |
| `page` | ref | Parent ui-page |
| `width` | string/int | Column span (e.g. `"4"` = 4 of 12 columns) |
| `height` | string/int | Minimum row height (`"1"` = auto-grow) |
| `order` | int | Render order on page |
| `showTitle` | bool | Show name as header |
| `className` | string | Custom CSS class |
| `groupType` | string | `"default"` (visible) or `"dialog"` (triggered) |

### Sizing Rules

- Group `width` sets column span out of page's total columns (default 12).
- Group `height` is a **minimum** — group grows to fit content.
- Widget `width` within a group is relative to the group's width.
- Widget `height` is in row units (1 unit = theme's Row Height setting).

---

## `ui-theme` — Appearance

| Property | Type | Default | Notes |
|----------|------|---------|-------|
| `colors.surface` | color | — | Header & nav background |
| `colors.primary` | color | — | Buttons, sliders, focus rings |
| `colors.bgPage` | color | — | Page background |
| `colors.groupBg` | color | — | Group background |
| `colors.groupOutline` | color | — | Group border color |
| `sizes.rowHeight` | string | `"default"` | `"default"` (48px), `"comfortable"` (36px), `"compact"` (32px) |
| `sizes.pagePadding` | string | `"12px"` | CSS shorthand (e.g. `"12px 6px"`) |
| `sizes.groupGap` | string | `"12px"` | Space between groups |
| `sizes.groupBorderRadius` | string | `"4px"` | Group corner rounding |
| `sizes.widgetGap` | string | `"12px"` | Space between widgets in group |

---

## EVOLV Key Rules

1. **12-column grid** with 4-col groups gives a clean 3-column layout at desktop.
2. Set `height: "1"` on groups to let them auto-size (content determines height).
3. Use `order` on groups to control left-to-right placement within a row.
4. For compact dashboards: theme `rowHeight: "compact"`, `pagePadding: "6px"`, `groupGap: "6px"`, `widgetGap: "6px"`.
5. Widget `order` within a group determines top-to-bottom flow (lower = higher).
6. Gauge sizing guide: tank gauge `width:2, height:4` + 3/4 gauge `width:2, height:3` fits well in a 4-col group alongside a status text `width:4, height:1`.