> ## 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](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## 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`](/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`](/api-reference/sdk/models/data-models#activityrecord)`[]` \| `null`        | Full unfiltered activity feed. `null` while loading.                                                | `velt-if="{allActivities.length} > 0"`                   |
| `filteredActivities` | [`ActivityRecord`](/api-reference/sdk/models/data-models#activityrecord)`[]` \| `null`        | Activities after `activeFilter` is applied.                                                         | `<velt-data field="filteredActivities.length" />`        |
| `groupedActivities`  | [`ActivityDateGroup`](/api-reference/sdk/models/data-models#activitydategroup)`[]`            | Activities bucketed by calendar date for display.                                                   | `<velt-data field="groupedActivities.0.displayLabel" />` |
| `virtualScrollItems` | [`ActivityScrollItem`](/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`](/api-reference/sdk/models/data-models#activityfeaturetype) | Currently selected filter value.                                                                    | `velt-class="'filter-active': {activeFilter} !== 'all'"` |
| `availableFilters`   | [`ActivityFilterOption`](/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`](/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`](/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`](/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.
</Note>

## Type Reference

Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models):

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

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

  <Tab title="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>
    ```
  </Tab>
</Tabs>

***

### `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`                             |

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

***

### `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`](/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}"`                        |

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

***

### `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`](/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`](/api-reference/sdk/models/data-models#activityrecord) | `<velt-data field="activity.action" />`              |
| `activity.user`        | [`User`](/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.                       |

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

***

### `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`](/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` |

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

  <Tab title="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>
    ```
  </Tab>
</Tabs>

***

## 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](./activity-logs-wireframes) — composition reference for the wireframe tags themselves.
* [Activity Logs Primitives](./activity-logs-primitives) — granular components if you don't need a full wireframe.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.