ViewHistoryList
Source: client/lib/theme/vueda-tailwind/views/index.js
Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor.
Vue component: ViewHistoryList
| Slot | Default classes | Description |
|---|---|---|
| root | Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor. | |
| row | 4 classes | Row passthrough forwarded to the embedded ObjectsGrid.bodyRow. Paints a 2 px primary left-stripe on the first cell of every row that belongs to a revision (both data-rev-start and data-rev-child), so a multi-row revision reads as a single grouped band. The card surrounding the grid carries the outer border, so this binding does not redeclare the row's own border. |
| diff | 13 classes | Diff chip rendered in each old / new field-value cell. data-side selects the tonal recipe (old = destructive 7 %-mix with a leading minus glyph; new = success 8 %-mix with a leading plus glyph), and data-empty overrides both into a transparent italic muted-foreground row with a middle-dot glyph for "nothing on this side". Mono keeps whitespace and unicode artifacts in the diffed value readable. |
| diffField | font-sans font-medium text-muted-foreground after:content-[':'] | Field name shown inside a diff chip in the card layout, where the chips of one event stack in a single cell and the table's Field column is absent. Muted and non-mono so the value beside it stays the primary token. |
| empty | 3 classes | Empty-state card shown when the model has no recorded history. Card-toned with a soft border and 48 px vertical padding so the panel reads as a deliberate state, not an error; the icon / title / description trio inside provides the recovery messaging. |
| emptyIcon | 3 classes | 40 px circular icon tile leading the empty state (typically a clock or history glyph). Muted-50 fill on muted-foreground keeps the tile from competing with the title beneath it. |
| emptyTitle | text-[14px] font-semibold leading-[1.3] text-foreground | Empty-state title ("No history yet" or similar). 14 px / 600 / foreground; same recipe as banner titles on ModelActionForm.bannerTitle so empty states read consistently across surfaces. |
| emptyDesc | text-[12px] font-normal leading-[1.5] text-muted-foreground max-w-[44ch] | Empty-state description beneath the title. 12 px / muted-foreground capped at 44ch so the explanation reads as a paragraph, not a heading. |
| cellDate | text-[12px] leading-[1.3] text-foreground | Absolute timestamp on the upper line of the two-line history-date cell. 12 px / foreground so the absolute value reads as the primary token; the relative phrase on ViewHistoryList.cellDateRel sits beneath it. |
| cellDateRel | text-[11px] leading-[1.3] text-muted-foreground | Relative phrase ("3 days ago") beneath the absolute timestamp. 11 px / muted-foreground per the headline / supporting-copy hierarchy. |
| cellUser | inline-flex items-center gap-2 | Inline wrapper around the 22 px UserAvatar chip and the actor name beside it. inline-flex keeps the chip / name pair on a single baseline so the row aligns vertically with the other history columns. |
| cellUserName | 2 classes | Actor-name fragment next to the avatar chip. Uses the supporting type token at 500 / foreground so the name reads as the primary value in the cell. |
| kindPill | 10 classes | Action-kind pill ("request", "task", "command", "system") in the Kind column. The vocabulary is open, so the base recipe is a neutral muted tag and data-kind adds a tone only for the values VUEDA defines; an unrecognized kind still renders as itself in the neutral recipe. |
| cellModel | 2 classes | Model cell naming the row an event wrote. data-relation="self" is the requested object and renders as plain foreground text; data-relation="related" is another row that references it and renders muted, with the object id beside it on ViewHistoryList.cellModelObject. |
| cellModelObject | font-mono text-[11px] text-muted-foreground | Object id fragment after a related row's model name. Mono at 11 px so #1204 reads as an identifier rather than prose. |
| typePill | 12 classes | History-type pill ("Created", "Updated", "Deleted") rendered in the history-type column. data-kind selects the tonal recipe (created = success, updated = info, deleted = destructive); unknown values fall back to the raw display value via the slot fallback in the consumer, not this recipe. Small uppercase label with a 12 px leading icon so the pill reads as a category tag, not a button. |
| meta | 3 classes | Meta strip above the grid: filter slot on the left, layout toggle on the right. Muted-10 wash and a bottom hairline so the strip reads as supporting chrome rather than its own band; kept light because the history view surfaces only a filter slot and a layout toggle, not a full control strip. |
| metaItem | inline-flex items-center gap-1 text-muted-foreground | Inline item inside the meta strip (e.g. an active filter chip). Muted-foreground colour and a 4 px gap between icon and label so the item reads as supporting metadata. |
| metaDivider | mx-2 h-3 w-hairline bg-border | Vertical hairline separator between meta items. 12 px tall, var(--border) fill; sized to match the meta-row x-height so the divider aligns with the text baseline. |
| metaSpacer | ml-auto | Flexible filler that pushes the layout toggle to the right end of the meta strip. |
| layoutToggle | flex overflow-clip rounded-vueda-control hairline hairline-border | Outer chassis of the segmented Table / Cards button pair. overflow-clip lets the inner buttons render their own internal hairline (first:border-r) without poking past the chassis radius. |
| layoutButton | 8 classes | One button inside the layout toggle. Transparent / muted-foreground in the default state and tinted accent at data-active="true"; the leading icon is sized at 12 px so it sits with the label baseline. Focus uses the canon focus-ring utility so it follows the DPR-keyed system focus recipe alongside the rest of the kit. |
| layoutButtonActive | Optional extra class applied to the active layout button. Empty by default because ViewHistoryList.layoutButton already routes its active state via data-[active=true]; consumers can opt into an additional emphasis here without duplicating the base recipe. |
root
Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor.
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:17
row
Row passthrough forwarded to the embedded ObjectsGrid.bodyRow. Paints a 2 px primary left-stripe on the first cell of every row that belongs to a revision (both
data-rev-startanddata-rev-child), so a multi-row revision reads as a single grouped band. The card surrounding the grid carries the outer border, so this binding does not redeclare the row's own border.
Default classes:
data-[rev-start=true]:[&>*:first-child]:border-l-2
data-[rev-start=true]:[&>*:first-child]:border-primary
data-[rev-child=true]:[&>*:first-child]:border-l-2
data-[rev-child=true]:[&>*:first-child]:border-primarySource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:21
diff
Diff chip rendered in each old / new field-value cell.
data-sideselects the tonal recipe (old= destructive 7 %-mix with a leading minus glyph;new= success 8 %-mix with a leading plus glyph), anddata-emptyoverrides both into a transparent italic muted-foreground row with a middle-dot glyph for "nothing on this side". Mono keeps whitespace and unicode artifacts in the diffed value readable.
Default classes:
inline-flex items-center gap-1 px-1.5 py-0.5 rounded-vueda-control
font-mono text-[12px] leading-[1.4]
before:font-semibold before:text-[11px]
data-[side=old]:bg-[color-mix(in_oklab,var(--destructive)_7%,transparent)]
data-[side=old]:text-foreground
data-[side=old]:before:content-['−'] data-[side=old]:before:text-destructive
data-[side=new]:bg-[color-mix(in_oklab,var(--success)_8%,transparent)]
data-[side=new]:text-foreground
data-[side=new]:before:content-['+'] data-[side=new]:before:text-success
data-[empty=true]:italic data-[empty=true]:text-muted-foreground
data-[empty=true]:bg-transparent
data-[empty=true]:before:content-['·'] data-[empty=true]:before:text-muted-foreground
data-[missing=true]:italic data-[missing=true]:text-muted-foregroundSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:30
diffField
Field name shown inside a diff chip in the card layout, where the chips of one event stack in a single cell and the table's Field column is absent. Muted and non-mono so the value beside it stays the primary token.
Default classes:
font-sans font-medium text-muted-foreground after:content-[':']
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:48
empty
Empty-state card shown when the model has no recorded history. Card-toned with a soft border and 48 px vertical padding so the panel reads as a deliberate state, not an error; the icon / title / description trio inside provides the recovery messaging.
Default classes:
flex flex-col items-center justify-center gap-2
py-12 px-6 text-center
rounded-vueda-card hairline hairline-border bg-cardSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:52
emptyIcon
40 px circular icon tile leading the empty state (typically a clock or history glyph). Muted-50 fill on muted-foreground keeps the tile from competing with the title beneath it.
Default classes:
flex items-center justify-center
w-10 h-10 rounded-full bg-muted/50 text-muted-foreground
text-[16px] leading-noneSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:60
emptyTitle
Empty-state title ("No history yet" or similar). 14 px / 600 / foreground; same recipe as banner titles on ModelActionForm.bannerTitle so empty states read consistently across surfaces.
Default classes:
text-[14px] font-semibold leading-[1.3] text-foreground
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:68
emptyDesc
Empty-state description beneath the title. 12 px / muted-foreground capped at 44ch so the explanation reads as a paragraph, not a heading.
Default classes:
text-[12px] font-normal leading-[1.5] text-muted-foreground max-w-[44ch]
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:72
cellDate
Absolute timestamp on the upper line of the two-line history-date cell. 12 px / foreground so the absolute value reads as the primary token; the relative phrase on ViewHistoryList.cellDateRel sits beneath it.
Default classes:
text-[12px] leading-[1.3] text-foreground
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:76
cellDateRel
Relative phrase ("3 days ago") beneath the absolute timestamp. 11 px / muted-foreground per the headline / supporting-copy hierarchy.
Default classes:
text-[11px] leading-[1.3] text-muted-foreground
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:80
cellUser
Inline wrapper around the 22 px UserAvatar chip and the actor name beside it.
inline-flexkeeps the chip / name pair on a single baseline so the row aligns vertically with the other history columns.
Default classes:
inline-flex items-center gap-2
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:84
cellUserName
Actor-name fragment next to the avatar chip. Uses the supporting type token at 500 / foreground so the name reads as the primary value in the cell.
Default classes:
text-[length:var(--vueda-text-supporting)] font-medium leading-tight text-foreground
data-[missing=true]:italic data-[missing=true]:font-normal data-[missing=true]:text-muted-foregroundSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:88
kindPill
Action-kind pill ("request", "task", "command", "system") in the Kind column. The vocabulary is open, so the base recipe is a neutral muted tag and
data-kindadds a tone only for the values VUEDA defines; an unrecognized kind still renders as itself in the neutral recipe.
Default classes:
inline-flex items-center rounded-full hairline px-2 py-0.5
text-[10.5px] font-semibold uppercase tracking-wide leading-none
bg-muted/40 text-muted-foreground
data-[kind=request]:text-foreground
data-[kind=task]:[--vueda-hairline-color:color-mix(in_oklab,var(--info)_25%,transparent)]
data-[kind=task]:bg-[color-mix(in_oklab,var(--info)_8%,transparent)]
data-[kind=task]:text-info
data-[kind=command]:[--vueda-hairline-color:color-mix(in_oklab,var(--warning)_30%,transparent)]
data-[kind=command]:bg-[color-mix(in_oklab,var(--warning)_10%,transparent)]
data-[kind=command]:text-warningSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:95
cellModel
Model cell naming the row an event wrote.
data-relation="self"is the requested object and renders as plain foreground text;data-relation="related"is another row that references it and renders muted, with the object id beside it on ViewHistoryList.cellModelObject.
Default classes:
inline-flex items-baseline gap-1 text-[12px] leading-[1.3] text-foreground
data-[relation=related]:text-muted-foregroundSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:112
cellModelObject
Object id fragment after a related row's model name. Mono at 11 px so
#1204reads as an identifier rather than prose.
Default classes:
font-mono text-[11px] text-muted-foreground
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:119
typePill
History-type pill ("Created", "Updated", "Deleted") rendered in the history-type column.
data-kindselects the tonal recipe (created = success, updated = info, deleted = destructive); unknown values fall back to the raw display value via the slot fallback in the consumer, not this recipe. Small uppercase label with a 12 px leading icon so the pill reads as a category tag, not a button.
Default classes:
inline-flex items-center gap-1 rounded-full hairline px-2 py-0.5
text-[10.5px] font-semibold uppercase tracking-wide leading-none
[&>svg]:size-3
data-[kind=created]:[--vueda-hairline-color:color-mix(in_oklab,var(--success)_30%,transparent)]
data-[kind=created]:bg-[color-mix(in_oklab,var(--success)_10%,transparent)]
data-[kind=created]:text-success
data-[kind=updated]:[--vueda-hairline-color:color-mix(in_oklab,var(--info)_25%,transparent)]
data-[kind=updated]:bg-[color-mix(in_oklab,var(--info)_8%,transparent)]
data-[kind=updated]:text-info
data-[kind=deleted]:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_25%,transparent)]
data-[kind=deleted]:bg-[color-mix(in_oklab,var(--destructive)_8%,transparent)]
data-[kind=deleted]:text-destructiveSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:123
meta
Meta strip above the grid: filter slot on the left, layout toggle on the right. Muted-10 wash and a bottom hairline so the strip reads as supporting chrome rather than its own band; kept light because the history view surfaces only a filter slot and a layout toggle, not a full control strip.
Default classes:
flex items-center gap-3 flex-wrap
border-b-hairline bg-muted/10
px-4 py-2 text-smSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:142
metaItem
Inline item inside the meta strip (e.g. an active filter chip). Muted-foreground colour and a 4 px gap between icon and label so the item reads as supporting metadata.
Default classes:
inline-flex items-center gap-1 text-muted-foreground
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:146
metaDivider
Vertical hairline separator between meta items. 12 px tall,
var(--border)fill; sized to match the meta-row x-height so the divider aligns with the text baseline.
Default classes:
mx-2 h-3 w-hairline bg-border
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:150
metaSpacer
Flexible filler that pushes the layout toggle to the right end of the meta strip.
Default classes:
ml-auto
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:154
layoutToggle
Outer chassis of the segmented Table / Cards button pair.
overflow-cliplets the inner buttons render their own internal hairline (first:border-r) without poking past the chassis radius.
Default classes:
flex overflow-clip rounded-vueda-control hairline hairline-border
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:158
layoutButton
One button inside the layout toggle. Transparent / muted-foreground in the default state and tinted accent at
data-active="true"; the leading icon is sized at 12 px so it sits with the label baseline. Focus uses the canonfocus-ringutility so it follows the DPR-keyed system focus recipe alongside the rest of the kit.
Default classes:
inline-flex items-center gap-1.5 px-2 py-1 text-xs
text-muted-foreground bg-transparent
first:border-r-hairline
hover:bg-accent hover:text-accent-foreground
active:bg-accent-active active:text-accent-foreground
data-[active=true]:bg-accent data-[active=true]:text-foreground
[&>svg]:size-3
focus-visible:focus-ringSource: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:162
layoutButtonActive
Optional extra class applied to the active layout button. Empty by default because ViewHistoryList.layoutButton already routes its active state via
data-[active=true]; consumers can opt into an additional emphasis here without duplicating the base recipe.
Source: client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:175