Activity Logs Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables 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`	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[]` \| `null`	Full unfiltered activity feed. `null` while loading.	`velt-if="{allActivities.length} > 0"`
`filteredActivities`	`ActivityRecord[]` \| `null`	Activities after `activeFilter` is applied.	`<velt-data field="filteredActivities.length" />`
`groupedActivities`	`ActivityDateGroup[]`	Activities bucketed by calendar date for display.	`<velt-data field="groupedActivities.0.displayLabel" />`
`virtualScrollItems`	`ActivityScrollItem[]`	Flattened list the virtual scroller iterates over. Read individual items via the iteration context.	Iterated internally.
`activeFilter`	`'all'` \| `ActivityFeatureType`	Currently selected filter value.	`velt-class="'filter-active': {activeFilter} !== 'all'"`
`availableFilters`	`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`	`<velt-activity-log-list-date-group-wireframe>`, `-date-group-label`, `-list-show-more`	`<velt-data field="dateGroup.displayLabel" />`
`activity`	`ActivityRecord`	`<velt-activity-log-list-item-wireframe>` and all its descendants	`<velt-data field="activity.user.name" />`
`filter`	`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" />`

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:

Type	Description
`ActivityRecord`	Core activity log object (id, featureType, actionType, actionUser, timestamp, etc.).
`ActivityDateGroup`	Date-bucketed group with `dateKey`, `displayLabel`, `activities`, and `totalCount`.
`ActivityScrollItem`	Discriminated union (`'date-header'` / `'activity'` / `'show-more'`) for the virtual-scroll list.
`ActivityFilterOption`	Filter dropdown option with `label`, `value`, and optional `icon`.
`ActivityFeatureType`	Union of feature area strings (`'comment'`, `'recorder'`, `'reaction'`, `'crdt'`, `'custom'`).
`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)

React / Next.js
Other Frameworks

<VeltActivityLogWireframe velt-if="{isEnabled} && {isOpen}">
  <VeltActivityLogWireframe.Header />
  <VeltActivityLogWireframe.List />
  <VeltActivityLogWireframe.Empty />
  <VeltActivityLogWireframe.Loading />
</VeltActivityLogWireframe>

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

React / Next.js
Other Frameworks

<VeltActivityLogWireframe.Empty velt-if="{filteredActivities.length} === 0">
  <p>No activity yet — be the first to start a thread.</p>
</VeltActivityLogWireframe.Empty>

<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`	`<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}"`

React / Next.js
Other Frameworks

<VeltActivityLogWireframe.Header.Filter.Content.Item
  velt-class="'selected': {isActive}">
  <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
  <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
</VeltActivityLogWireframe.Header.Filter.Content.Item>

<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`	`<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`	`<velt-data field="activity.action" />`
`activity.user`	`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.

React / Next.js
Other Frameworks

<VeltActivityLogWireframe.List.Item
  velt-class="'mine': {activity.user.userId} === {user.userId}">
  <VeltActivityLogWireframe.List.Item.Icon />
  <VeltActivityLogWireframe.List.Item.Content />
  <VeltActivityLogWireframe.List.Item.Time />
</VeltActivityLogWireframe.List.Item>

<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`	`<velt-data field="dateGroup.totalCount" />`
`isExpanded`	`boolean`	`velt-class="'expanded': {isExpanded}"`
`remainingCount`	`number`	`<velt-data field="remainingCount" />`

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

React / Next.js
Other Frameworks

<VeltActivityLogWireframe.List.ShowMore velt-if="{remainingCount} > 0">
  <span>Show <velt-data field="remainingCount" /> more</span>
</VeltActivityLogWireframe.List.ShowMore>

<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" />`

Putting it together

A typical activity row that highlights actions taken by the current user and shows a relative timestamp:

React / Next.js
Other Frameworks

<VeltActivityLogWireframe.List.Item>
  <div
    velt-class="'mine': {activity.user.userId} === {user.userId}"
    velt-class-recorder="{activity.featureType} === 'recorder'"
  >
    <velt-data field="activity.user.name" />
    <velt-data field="activity.action" />
    <velt-data velt-if="{activity.target}" field="activity.target.label" />
    <time><velt-data field="activity.timestamp" /></time>
  </div>
</VeltActivityLogWireframe.List.Item>

<velt-activity-log-list-item-wireframe>
  <div
    velt-class="'mine': {activity.user.userId} === {user.userId}"
    velt-class-recorder="{activity.featureType} === 'recorder'">
    <velt-data field="activity.user.name"></velt-data>
    <velt-data field="activity.action"></velt-data>
    <velt-data velt-if="{activity.target}" field="activity.target.label"></velt-data>
    <time><velt-data field="activity.timestamp"></velt-data></time>
  </div>
</velt-activity-log-list-item-wireframe>

Activity Logs Wireframes — composition reference for the wireframe tags themselves.
Activity Logs Primitives — granular components if you don’t need a full wireframe.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Activity Logs Wireframe Variables

Overview

App State

Data State

UI State

Feature State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`activity-log` (root)

`activity-log-loading`

`activity-log-empty`

`activity-log-header`

`activity-log-header-title`

`activity-log-header-close-button`

`activity-log-header-filter`

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

`activity-log-list`

`activity-log-list-date-group`

`activity-log-list-item`

`activity-log-list-show-more`

Deeply-Nested Wireframe Tags

Header filter sub-components

List-item sub-components

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​App State

​Data State

​UI State

​Feature State

​Common Props

​Context-Specific Variables

​Type Reference

​Subcomponents

​activity-log (root)

​activity-log-loading

​activity-log-empty

​activity-log-header

​activity-log-header-title

​activity-log-header-close-button

​activity-log-header-filter

​activity-log-header-filter-content-item

​activity-log-list

​activity-log-list-date-group

​activity-log-list-item

​activity-log-list-show-more

​Deeply-Nested Wireframe Tags

​Header filter sub-components

​List-item sub-components

​Putting it together

​Related

Overview

App State

Data State

UI State

Feature State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`activity-log` (root)

`activity-log-loading`

`activity-log-empty`

`activity-log-header`

`activity-log-header-title`

`activity-log-header-close-button`

`activity-log-header-filter`

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

`activity-log-list`

`activity-log-list-date-group`

`activity-log-list-item`

`activity-log-list-show-more`

Deeply-Nested Wireframe Tags

Header filter sub-components

List-item sub-components

Putting it together

Related