> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Activity Logs Wireframe Variables

> Template variables exposed by the Activity Logs wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

> [!NOTE]
>
> New to wireframes? Start with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) overview.

## Overview

The **Activity Logs** wireframe exposes the variables below. Use them inside any `<velt-activity-log-...-wireframe>` tag via three forms:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="dateGroup.displayLabel" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{isEnabled} && {isOpen}"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-open': {isOpen}"` |

All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix.

## App State

App-wide values resolved from the shared signal.

| Variable | Type | Description | Example |
| - | - | - | - |
| `user` | [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="user.name" />` |
| `darkMode` | `boolean` | Dark mode active (global config or per-instance attribute). | `velt-class="'theme-dark': {darkMode}"` |

## Data State

Activity feed data: the raw list, filtered list, date grouping, and active filter.

| Variable | Type | Description | Example |
| - | - | - | - |
| `allActivities` | [`ActivityRecord`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord)`[]` \| `null` | Full unfiltered activity feed. `null` while loading. | `velt-if="{allActivities.length} > 0"` |
| `loading` | `boolean` | `true` while activities are being fetched. | `velt-if="{loading}"` |
| `filteredActivities` | [`ActivityRecord`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord)`[]` \| `null` | Activities after `activeFilter` is applied. | `<velt-data field="filteredActivities.length" />` |
| `groupedActivities` | [`ActivityDateGroup`](https://velt.dev/docs/api-reference/sdk/models/data-models#activitydategroup)`[]` | Activities bucketed by calendar date for display. | `<velt-data field="groupedActivities.0.displayLabel" />` |
| `virtualScrollItems` | [`ActivityScrollItem`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityscrollitem)`[]` | Flattened list the virtual scroller iterates over. Read individual items via the iteration context. | *Iterated internally.* |
| `activeFilter` | `'all'` \| [`ActivityFeatureType`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityfeaturetype) | Currently selected filter value. | `velt-class="'filter-active': {activeFilter} !== 'all'"` |
| `availableFilters` | [`ActivityFilterOption`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityfilteroption)`[]` | All filter options shown in the dropdown. | `<velt-data field="availableFilters.length" />` |

## UI State

Per-instance UI flags driven by the component itself.

| Variable | Type | Description | Example |
| - | - | - | - |
| `isOpen` | `boolean` | Activity Log panel is open. | `velt-class="'is-open': {isOpen}"` |
| `darkMode` | `boolean` | Dark mode is active (driven by global config or per-instance attribute). | `velt-class="'theme-dark': {darkMode}"` |
| `variant` | `string` | Per-instance variant tag set on the host element. | `<velt-data field="variant" />` |
| `expandedGroups` | `Set<string>` | Date-group keys currently expanded past the truncation limit. | *Internal — used to compute group visibility.* |
| `defaultVisibleCount` | `number` | Items shown per date-group before "Show more" appears. Defaults to `5`. | `<velt-data field="defaultVisibleCount" />` |
| `filterDropdownOpen` | `boolean` | Filter dropdown menu is open. | `velt-class="'open': {filterDropdownOpen}"` |

## Feature State

Capability flags toggled via SDK config.

| Variable | Type | Description | Example |
| - | - | - | - |
| `isEnabled` | `boolean` | Activity Log feature is enabled in the SDK. | `velt-if="{isEnabled}"` |

## Common Props

Every Activity Log primitive accepts:

| React Prop | HTML Attribute | Type | Default | Description |
| - | - | - | - | - |
| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. |

Signal inputs (for parent-child component composition):

* `[componentConfigSignal]` — shared config signal (filtered activities, date groups, virtual scroll items, available filters).
* `[parentLocalUIState]` — per-instance UI state signal (darkMode, variant).

The root `<velt-activity-log>` element additionally accepts attributes that map onto config and local UI state values: `dark-mode`, `variant`, `is-open`, etc.

## Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag.

| Variable | Type | Available in | Example |
| - | - | - | - |
| `dateGroup` | [`ActivityDateGroup`](https://velt.dev/docs/api-reference/sdk/models/data-models#activitydategroup) | `<velt-activity-log-list-date-group-wireframe>`, `*-date-group-label`, `*-list-show-more` | `<velt-data field="dateGroup.displayLabel" />` |
| `activity` | [`ActivityRecord`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord) | `<velt-activity-log-list-item-wireframe>` and all its descendants | `<velt-data field="activity.user.name" />` |
| `filter` | [`ActivityFilterOption`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityfilteroption) | `<velt-activity-log-header-filter-content-item-wireframe>`, `*-icon`, `*-label` | `<velt-data field="filter.label" />` |
| `isActive` | `boolean` | Same tags as `filter`. `true` when this row matches `activeFilter`. | `velt-class="'selected': {isActive}"` |
| `isExpanded` | `boolean` | `<velt-activity-log-list-show-more-wireframe>` | `velt-class="'expanded': {isExpanded}"` |
| `remainingCount` | `number` | `<velt-activity-log-list-show-more-wireframe>`. Items still hidden in the date-group. | `<velt-data field="remainingCount" />` |

> [!NOTE]
>
> **Aliases:** `activity` ↔ `activityRecord`, `filter` ↔ `filterOption`. Either name resolves; the friendly short form is preferred.

## Type Reference

Types referenced by the variables above are documented in [Data Models](https://velt.dev/docs/api-reference/sdk/models/data-models.md):

| Type | Description |
| - | - |
| [`ActivityRecord`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord) | Core activity log object (id, featureType, action, user, timestamp, target, detail). |
| [`ActivityDateGroup`](https://velt.dev/docs/api-reference/sdk/models/data-models#activitydategroup) | Date-bucketed group with `dateKey`, `displayLabel`, `activities`, and `totalCount`. |
| [`ActivityScrollItem`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityscrollitem) | Discriminated union (`'date-header'` / `'activity'` / `'show-more'`) for the virtual-scroll list. |
| [`ActivityFilterOption`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityfilteroption) | Filter dropdown option with `label`, `value`, and optional `icon`. |
| [`ActivityFeatureType`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityfeaturetype) | Union of feature area strings (`'comment'`, `'recorder'`, `'reaction'`, `'crdt'`, `'custom'`). |
| [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |

## Subcomponents

Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the `shouldShow` condition, and host CSS classes.

### `activity-log` (root)

* **Public element:** `<velt-activity-log>`
* **Wireframe tag:** `<velt-activity-log-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None — root only sees common variables. |
| `shouldShow` | `isEnabled === true && isOpen === true` |
| Host class | `velt-activity-log--container` (always present) |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogWireframe veltIf="{isEnabled} && {isOpen}">
>   <VeltActivityLogWireframe.Header />
>   <VeltActivityLogWireframe.List />
>   <VeltActivityLogWireframe.Empty />
>   <VeltActivityLogWireframe.Loading />
> </VeltActivityLogWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-wireframe velt-if="{isEnabled} && {isOpen}">
>   <velt-activity-log-header-wireframe></velt-activity-log-header-wireframe>
>   <velt-activity-log-list-wireframe></velt-activity-log-list-wireframe>
>   <velt-activity-log-empty-wireframe></velt-activity-log-empty-wireframe>
>   <velt-activity-log-loading-wireframe></velt-activity-log-loading-wireframe>
> </velt-activity-log-wireframe>
> ```

***

### `activity-log-loading`

Skeleton loader shown while activities are being fetched.

* **Public element:** `<velt-activity-log-loading>`
* **Wireframe tag:** `<velt-activity-log-loading-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None. |
| `shouldShow` | `allActivities === null` |
| Host class | `velt-activity-log-loading--container` |

***

### `activity-log-empty`

Empty-state shown when activities load but the filtered list is empty.

* **Public element:** `<velt-activity-log-empty>`
* **Wireframe tag:** `<velt-activity-log-empty-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None beyond common variables. |
| `shouldShow` | `filteredActivities !== null && filteredActivities.length === 0` |
| Host class | `velt-activity-log-empty--container` |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogWireframe.Empty veltIf="{filteredActivities.length} === 0">
>   <p>No activity yet — be the first to start a thread.</p>
> </VeltActivityLogWireframe.Empty>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-empty-wireframe velt-if="{filteredActivities.length} === 0">
>   <p>No activity yet — be the first to start a thread.</p>
> </velt-activity-log-empty-wireframe>
> ```

***

### `activity-log-header`

Header bar with title, filter trigger, and close button.

* **Public element:** `<velt-activity-log-header>`
* **Wireframe tag:** `<velt-activity-log-header-wireframe>`
* **Children:** `*-header-title`, `*-header-filter`, `*-header-close-button`

| Property | Value |
| - | - |
| Extra variables | None beyond common variables. |

***

### `activity-log-header-title`

Header title text.

* **Public element:** `<velt-activity-log-header-title>`
* **Wireframe tag:** `<velt-activity-log-header-title-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None. |

***

### `activity-log-header-close-button`

Close button.

* **Public element:** `<velt-activity-log-header-close-button>`
* **Wireframe tag:** `<velt-activity-log-header-close-button-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None. |

***

### `activity-log-header-filter`

Filter dropdown wrapper. Contains trigger and content children.

* **Public element:** `<velt-activity-log-header-filter>`
* **Wireframe tag:** `<velt-activity-log-header-filter-wireframe>`
* **Children:**
  * `*-header-filter-trigger` — opens the dropdown.
    * `*-header-filter-trigger-icon`
    * `*-header-filter-trigger-label`
  * `*-header-filter-content` — the open menu.
    * `*-header-filter-content-item` (per-filter row, iterated over `availableFilters`).
      * `*-header-filter-content-item-icon`, `*-header-filter-content-item-label`.

| Property | Value |
| - | - |
| Extra variables | None beyond common variables. |

***

### `activity-log-header-filter-content-item`

A single filter row inside the dropdown menu.

* **Public element:** `<velt-activity-log-header-filter-content-item>`
* **Wireframe tag:** `<velt-activity-log-header-filter-content-item-wireframe>`

| Variable | Type | Example |
| - | - | - |
| `filter` | [`ActivityFilterOption`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityfilteroption) | `<velt-data field="filter.label" />` |
| `filter.value` | `string` | `velt-class="'selected': {filter.value} === {activeFilter}"` |
| `filter.icon` | `string` \| `undefined` | `<velt-data field="filter.icon" />` |
| `isActive` | `boolean` | `velt-class="'selected': {isActive}"` |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogWireframe.Header.Filter.Content.Item
>   veltClass="'selected': {isActive}">
>   <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
>   <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
> </VeltActivityLogWireframe.Header.Filter.Content.Item>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-header-filter-content-item-wireframe
>   velt-class="'selected': {isActive}">
>   <velt-activity-log-header-filter-content-item-icon-wireframe></velt-activity-log-header-filter-content-item-icon-wireframe>
>   <velt-activity-log-header-filter-content-item-label-wireframe></velt-activity-log-header-filter-content-item-label-wireframe>
> </velt-activity-log-header-filter-content-item-wireframe>
> ```

***

### `activity-log-list`

Virtual-scroll list container. Iterates `virtualScrollItems` and dispatches each entry to the appropriate child.

* **Public element:** `<velt-activity-log-list>`
* **Wireframe tag:** `<velt-activity-log-list-wireframe>`
* **Children:** `*-list-date-group`, `*-list-item`, `*-list-show-more`

| Property | Value |
| - | - |
| Extra variables | None beyond common variables. |

***

### `activity-log-list-date-group`

A date header row.

* **Public element:** `<velt-activity-log-list-date-group>`
* **Wireframe tag:** `<velt-activity-log-list-date-group-wireframe>`
* **Children:** `*-list-date-group-label`

| Variable | Type | Example |
| - | - | - |
| `dateGroup` | [`ActivityDateGroup`](https://velt.dev/docs/api-reference/sdk/models/data-models#activitydategroup) | `<velt-data field="dateGroup.displayLabel" />` |
| `dateGroup.dateKey` | `string` | `<velt-data field="dateGroup.dateKey" />` |
| `dateGroup.totalCount` | `number` | `<velt-data field="dateGroup.totalCount" />` |

***

### `activity-log-list-item`

A single activity row. Composes avatar, icon, content, and time sub-components.

* **Public element:** `<velt-activity-log-list-item>`
* **Wireframe tag:** `<velt-activity-log-list-item-wireframe>`
* **Children:**
  * `*-list-item-avatar` — user avatar.
  * `*-list-item-icon` — action-type icon.
  * `*-list-item-content` — main content row.
    * `*-list-item-content-user` — actor name.
    * `*-list-item-content-action` — action verb (`'commented'`, `'reacted'`, …).
    * `*-list-item-content-target` — target object label.
    * `*-list-item-content-detail` — optional detail snippet.
  * `*-list-item-time` — relative timestamp.

| Variable | Type | Example |
| - | - | - |
| `activity` | [`ActivityRecord`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord) | `<velt-data field="activity.action" />` |
| `activity.user` | [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | `<velt-data field="activity.user.name" />` |
| `activity.user.userId` | `string` | `velt-if="{activity.user.userId} === {user.userId}"` |
| `activity.timestamp` | `number` | `<velt-data field="activity.timestamp" />` |
| `activity.featureType` | `'comment'` \| `'recorder'` \| `'reaction'` \| `'crdt'` | `velt-class="'is-{activity.featureType}': true"` |
| `activity.target` | `any` | Shape varies by activity type. |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogWireframe.List.Item
>   veltClass="'mine': {activity.user.userId} === {user.userId}">
>   <VeltActivityLogWireframe.List.Item.Icon />
>   <VeltActivityLogWireframe.List.Item.Content />
>   <VeltActivityLogWireframe.List.Item.Time />
> </VeltActivityLogWireframe.List.Item>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-list-item-wireframe
>   velt-class="'mine': {activity.user.userId} === {user.userId}">
>   <velt-activity-log-list-item-icon-wireframe></velt-activity-log-list-item-icon-wireframe>
>   <velt-activity-log-list-item-content-wireframe></velt-activity-log-list-item-content-wireframe>
>   <velt-activity-log-list-item-time-wireframe></velt-activity-log-list-item-time-wireframe>
> </velt-activity-log-list-item-wireframe>
> ```

***

### `activity-log-list-show-more`

"Show more" expand row at the end of a collapsed date-group.

* **Public element:** `<velt-activity-log-list-show-more>`
* **Wireframe tag:** `<velt-activity-log-list-show-more-wireframe>`

| Variable | Type | Example |
| - | - | - |
| `dateGroup` | [`ActivityDateGroup`](https://velt.dev/docs/api-reference/sdk/models/data-models#activitydategroup) | `<velt-data field="dateGroup.totalCount" />` |
| `isExpanded` | `boolean` | `velt-class="'expanded': {isExpanded}"` |
| `remainingCount` | `number` | `<velt-data field="remainingCount" />` |

| Property | Value |
| - | - |
| `shouldShow` | `dateGroup.totalCount > defaultVisibleCount` |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogWireframe.List.ShowMore veltIf="{remainingCount} > 0">
>   <span>Show <VeltData field="remainingCount" /> more</span>
> </VeltActivityLogWireframe.List.ShowMore>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-list-show-more-wireframe velt-if="{remainingCount} > 0">
>   <span>Show <velt-data field="remainingCount"></velt-data> more</span>
> </velt-activity-log-list-show-more-wireframe>
> ```

***

## Deeply-Nested Wireframe Tags

Each tag below has its own `<velt-activity-log-...-wireframe>` registration and inherits context variables from its parent.

### Header filter sub-components

| Tag | Notes | Example |
| - | - | - |
| `<velt-activity-log-header-filter-trigger-wireframe>` | The closed-state pill (filter button). | `velt-class="'open': {filterDropdownOpen}"` |
| `<velt-activity-log-header-filter-trigger-icon-wireframe>` | Icon inside the trigger. | `<velt-data field="activeFilter" />` |
| `<velt-activity-log-header-filter-trigger-label-wireframe>` | Label inside the trigger ("All", "Comments", etc.). | `<velt-data field="activeFilter" />` |
| `<velt-activity-log-header-filter-content-wireframe>` | The opened menu wrapper. | `velt-class="'menu-open': {filterDropdownOpen}"` |
| `<velt-activity-log-header-filter-content-item-icon-wireframe>` | Per-row tick icon (rendered when `isActive`). | `velt-class="'visible': {isActive}"` |
| `<velt-activity-log-header-filter-content-item-label-wireframe>` | Per-row label. | `<velt-data field="filter.label" />` |

### List-item sub-components

| Tag | Notes | Example |
| - | - | - |
| `<velt-activity-log-list-date-group-label-wireframe>` | Date heading inside a date-group row. | `<velt-data field="dateGroup.displayLabel" />` |
| `<velt-activity-log-list-item-avatar-wireframe>` | Avatar of the activity actor. | `<velt-data field="activity.user.photoUrl" />` |
| `<velt-activity-log-list-item-icon-wireframe>` | Action-type icon (comment / recorder / reaction). | `velt-class="'icon-{activity.featureType}': true"` |
| `<velt-activity-log-list-item-time-wireframe>` | Relative timestamp ("2m ago"). | `<velt-data field="activity.timestamp" />` |
| `<velt-activity-log-list-item-content-wireframe>` | Wrapper for the row's text content. | Composes the four sub-components below. |
| `<velt-activity-log-list-item-content-user-wireframe>` | Actor-name fragment. | `<velt-data field="activity.user.name" />` |
| `<velt-activity-log-list-item-content-action-wireframe>` | Action verb ("commented", "reacted"…). | `<velt-data field="activity.action" />` |
| `<velt-activity-log-list-item-content-target-wireframe>` | Target-object label. | `<velt-data field="activity.target.label" />` |
| `<velt-activity-log-list-item-content-detail-wireframe>` | Optional detail snippet. | `<velt-data field="activity.detail" />` |

## Related

* [Activity Logs Wireframes](https://velt.dev/docs/ui-customization/features/async/activity-logs/activity-logs-wireframes.md) — composition reference for the wireframe tags themselves.
* [Activity Logs Primitives](https://velt.dev/docs/ui-customization/features/async/activity-logs/activity-logs-primitives.md) — granular components if you don't need a full wireframe.
* [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.