@meistrari/tela-build 1.72.0 → 1.73.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Latest updates and announcements.
 
+## September 17, 2026
+
+- **Dropdown menu spacing.** Items with tooltips now use the same icon-to-label gap as other items. See [Dropdown menu](/components/dropdown-menu).
+
 ## September 16, 2026
 
 ### Square Loader

package/components/tela/avatar/label/avatar-label.mdx

@@ -7,6 +7,8 @@ import * as AvatarLabelStories from './avatar-label.stories.ts';
 
 An inline avatar + text chip. Pairs a `TelaAvatar` with a text label so any "entity reference" (created-by, assigned-to, owner, reviewer, member, etc.) renders consistently across summary rows, list cells, and metadata strips. The component is named after its **shape**, not a role — pick the role at the call site via the `label`.
 
+The avatar retains its configured size in narrow containers. The label stays on one line and truncates with an ellipsis when space is limited; hover the component to read the full label.
+
 ## Examples
 
 ### Basic Usage

package/components/tela/avatar/label/avatar-label.vue

@@ -14,15 +14,37 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <div flex items-center gap-4px>
+    <div class="avatar-label" :title="label">
         <TelaAvatar
+            class="avatar-label-image"
             :size="avatarSize"
-            :src="avatarSrc"
+            :image="avatarSrc"
             :alt="avatarAlt ?? label"
             rounded-full
         />
-        <p body-12-regular text-secondary>
+        <p class="avatar-label-text" body-12-regular text-secondary>
             {{ label }}
         </p>
     </div>
 </template>
+
+<style scoped>
+.avatar-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.avatar-label-image {
+    flex: none;
+}
+
+.avatar-label-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

package/components/tela/copy-button.vue

@@ -3,6 +3,8 @@ import type { HTMLAttributes } from 'vue'
 
 import { UseClipboard } from '@vueuse/components'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<{
     content: string
     variant?: 'default' | 'ghost'
@@ -73,6 +75,8 @@ const transition = {
         <slot :copy="() => onClick(copy)">
             <MotionConfig :transition="transition">
                 <button
+                    v-bind="$attrs"
+                    type="button"
                     flex="~ " items-center justify-center
                     ease will-change-transform active:scale-94
                     class="group duration-80 transition-[background-color,border-color,color,transform]"

package/components/tela/dropdown-menu/DropdownMenuItem.vue

@@ -82,7 +82,7 @@ const shouldShowTooltip = computed(() => !!tooltipConfig.value)
 const isIconImage = computed(() => {
     if (!props.icon)
         return false
-    return /\.(jpg|jpeg|png|gif|svg|webp)$/i.test(props.icon) || props.icon.startsWith('data:image/')
+    return /\.(?:jpg|jpeg|png|gif|svg|webp)$/i.test(props.icon) || props.icon.startsWith('data:image/')
 })
 </script>
 
@@ -103,7 +103,7 @@ const isIconImage = computed(() => {
             v-bind="props"
             :class="cn(
                 'group outline-none',
-                'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5',
+                'relative flex gap-10px cursor-pointer select-none items-center rounded-xl px-3 py-1.5',
                 'text-body-14-medium font-460 outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
                 inset && 'pl-8',
                 props.class,

package/components/tela/filter/filter-content.test.ts

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import { mount } from '@vue/test-utils'
+import { computed, defineComponent, nextTick, ref, watch } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import FilterContent from './filter-content.vue'
+
+vi.mock('reka-ui', () => ({
+    PopoverContent: defineComponent({
+        name: 'PopoverContent',
+        props: {
+            sideOffset: Number,
+            collisionPadding: Number,
+            avoidCollisions: Boolean,
+            sticky: String,
+        },
+        template: '<div data-testid="popover-content" :data-side-offset="sideOffset" :data-collision-padding="collisionPadding" :data-avoid-collisions="avoidCollisions" :data-sticky="sticky"><slot /></div>',
+    }),
+}))
+
+vi.stubGlobal('useTemplateRef', () => ref())
+vi.stubGlobal('useElementSize', () => ({ height: ref(0) }))
+vi.stubGlobal('cn', (...values: unknown[]) => values.filter(Boolean).join(' '))
+vi.stubGlobal('computed', computed)
+vi.stubGlobal('nextTick', nextTick)
+vi.stubGlobal('watch', watch)
+
+describe('filterContent', () => {
+    it('keeps popover content within an 8px collision boundary', () => {
+        // Arrange
+        const wrapper = mount(FilterContent, {
+            props: {
+                configs: [],
+                closing: false,
+                settled: true,
+                modelValue: {},
+                width: '340px',
+            },
+            global: {
+                mocks: { cn: (...values: unknown[]) => values.filter(Boolean).join(' ') },
+                stubs: {
+                    AnimatePresence: true,
+                    Motion: true,
+                    TelaCheckbox: true,
+                    TelaFilterContentItem: true,
+                    TelaRadioGroupItem: true,
+                    TelaScrollArea: true,
+                },
+            },
+        })
+
+        // Act
+        const content = wrapper.getComponent({ name: 'PopoverContent' })
+
+        // Assert
+        expect(content.props('sideOffset')).toBe(4)
+        expect(content.props('collisionPadding')).toBe(8)
+        expect(content.props('avoidCollisions')).toBe(true)
+        expect(content.props('sticky')).toBe('always')
+    })
+})

package/components/tela/filter/filter-content.vue

@@ -186,6 +186,9 @@ function getSlideMotionVariants(index: number, closingState: boolean) {
 <template>
     <PopoverContent
         :side-offset="4"
+        :collision-padding="8"
+        avoid-collisions
+        sticky="always"
         align="start"
         data-popover-content
         :data-settled="settled || undefined"

package/components/tela/filter/filter-trigger.vue

@@ -24,6 +24,7 @@ defineEmits<{
             'focus-visible:ring-2 focus-visible:ring-gray-200 [&:not([data-active])]:hover:bg-subtle data-[active]:bg-muted first:rounded-l-[10px] last:rounded-r-[10px] last:border-r-[0.5px]',
             triggerClass,
         )"
+        :aria-label="filter.showCount && count ? `${filter.label}, ${count} selected` : undefined"
         @click="$emit('click')"
     >
         <div inline-flex items-center>
@@ -31,7 +32,7 @@ defineEmits<{
 
             <AnimatePresence>
                 <Motion
-                    v-if="count && filter.selectionMode === 'multiple'"
+                    v-if="count && (filter.selectionMode === 'multiple' || filter.showCount)"
                     mt--3px ml-5px
                     :initial="{ width: 0, x: -20, scale: 0, opacity: 0 }"
                     :animate="{ width: 'auto', x: 0, scale: 1, opacity: 1 }"

package/components/tela/filter/filter.mdx

@@ -64,7 +64,7 @@ const selections = ref({
 
 ### Single-Select Filter
 
-Set `selectionMode: 'single'` on a filter so it behaves like a radio group — picking an option replaces the prior selection. Options render with `TelaRadioGroupItem` instead of `TelaCheckbox`, and the count badge on the trigger is suppressed (single mode has at most one selection).
+Set `selectionMode: 'single'` on a filter so it behaves like a radio group — picking an option replaces the prior selection. Options render with `TelaRadioGroupItem` instead of `TelaCheckbox`. Single-select triggers hide their count badge by default; set `showCount: true` to show the selected count and include it in the trigger's accessible label.
 
 ```vue
 const filters = [
@@ -112,6 +112,14 @@ const filters = [
 ]
 ```
 
+### Non-Wrapping Filter Bars
+
+The bar wraps by default. Use the optional `bar-class` prop when a compact rail must keep its filter triggers on one line. This is backward-compatible: omitting it preserves the existing bar styling and wrapping behavior.
+
+```vue
+<TelaFilter v-model="selections" :filters="filters" bar-class="!flex-nowrap" />
+```
+
 ### Custom Option Rendering
 
 Use the scoped `option-{label}` slot to override the default option button. The slot receives `{ option, filter, checked, toggle, mode }`. Useful when options need avatars, icons, secondary text, etc.
@@ -224,6 +232,8 @@ interface FilterConfig {
   options: FilterOption[]
   /** Defaults to `'multiple'`. Single-mode renders radio indicators and replaces (not toggles) the selection. */
   selectionMode?: FilterSelectionMode
+  /** Show selected count on this trigger. Multi-select shows counts by default; single-select requires this opt-in. */
+  showCount?: boolean
   /** When this filter is active, the popover animates to this width. Falls back to `defaultPopoverWidth`. */
   popoverWidth?: string
   /** Class on the options container (forwarded to `TelaScrollArea`). Use `max-h-[Xpx]` for scrollable lists. */
@@ -235,6 +245,8 @@ type FilterSelections = Record<string, string[]>
 type FilterProps = {
   modelValue?: FilterSelections
   filters: FilterConfig[]
+  /** Optional class forwarded to the filter bar. Omitting it preserves default wrapping and styling. */
+  barClass?: HTMLAttributes['class']
   triggerClass?: string
   contentClass?: string
   /** Fallback width when the active filter has no own `popoverWidth`. Defaults to `170px`. */

package/components/tela/filter/filter.vue

@@ -10,6 +10,7 @@ type Phase = 'idle' | 'opening' | 'settled' | 'closing'
 const props = withDefaults(defineProps<{
     modelValue?: FilterSelections
     filters: FilterConfig[]
+    barClass?: HTMLAttributes['class']
     triggerClass?: HTMLAttributes['class']
     contentClass?: HTMLAttributes['class']
     defaultPopoverWidth?: string
@@ -180,7 +181,7 @@ watch(phase, (newPhase) => {
     <MotionConfig :transition="SPRING_CONFIG">
         <PopoverRoot :open="isOpen" @update:open="onOpenChange">
             <PopoverAnchor as-child :reference="referenceEl ?? undefined">
-                <TelaFilterBar ref="filterBar" flex flex-wrap items-center select-none>
+                <TelaFilterBar ref="filterBar" :class="barClass">
                     <TelaFilterTrigger
                         v-for="filter in filters"
                         :key="filter.key"

package/components/tela/filter/types.ts

@@ -12,6 +12,7 @@ export interface FilterConfig {
     label: string
     options: FilterOption[]
     selectionMode?: FilterSelectionMode
+    showCount?: boolean
     popoverWidth?: string
     optionsClass?: HTMLAttributes['class']
 }

package/components/tela/live-label.vue

@@ -1,32 +1,48 @@
 <template>
-    <div flex="~" rounded-6px items-center w-52px h-24px px-8px py-4px bg="gray-100">
-        <span body-12-semibold text="emerald-600" mr-4px>
-            Live
-        </span>
-        <div relative w-12px h-12px>
-            <div
-                w-12px h-12px absolute rounded-full bg="positive" flex items-center justify-center opacity-20
-                class="blink top-1/2 translate-y--1/2 left-1/2 translate-x--1/2"
-            />
-            <div
-                w-6px absolute h-6px rounded-full bg="positive"
-                class="top-1/2 translate-y--1/2 left-1/2 translate-x--1/2"
-            />
-        </div>
-    </div>
+    <span class="live-label" inline-flex items-center gap-6px body-12-medium text="blue-600">
+        <span class="live-dot" aria-hidden="true" />
+        <span><slot>Live</slot></span>
+    </span>
 </template>
 
 <style scoped>
-.blink {
-    animation: blink 0.8s linear infinite;
+.live-label {
+    white-space: nowrap;
 }
 
-@keyframes blink {
+.live-dot {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    flex: none;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.live-dot::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    animation: live-pulse 1.5s ease-out infinite;
+}
+
+@keyframes live-pulse {
     0% {
-        opacity: 0;
+        transform: scale(1);
+        opacity: 0.6;
     }
     100% {
-        opacity: 0.3;
+        transform: scale(2.5);
+        opacity: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .live-dot::after {
+        animation: none;
+        opacity: 0;
     }
 }
 </style>

package/components/tela/pane.vue

@@ -24,6 +24,7 @@ const size = ref(props.size)
 const collapsedSize = ref(props.collapsedSize ?? 7)
 const sizeBeforeCollapse = ref(props.size)
 const isCollapsed = ref(Boolean(props.startCollapsed))
+const paneMinSize = computed(() => isCollapsed.value ? collapsedSize.value : props.minSize)
 
 watch(() => props.size, (newValue) => {
     size.value = newValue
@@ -54,9 +55,13 @@ function toggleCollapse() {
     <component
         :is="disableSplit ? 'div' : Pane"
         :size="disableSplit ? undefined : size"
-        :min-size="minSize"
+        :min-size="paneMinSize"
     >
-        <div v-if="title || $slots.actions" flex items-center w-full justify-between relative h-72px z-1>
+        <div
+            v-if="title || $slots.actions || collapsible"
+            flex items-center w-full justify-between relative z-1
+            :class="title || $slots.actions ? 'h-72px' : 'h-40px'"
+        >
             <Transition name="fade">
                 <div v-if="title && !isCollapsed" flex flex-col p-24px>
                     <div flex>
@@ -71,7 +76,10 @@ function toggleCollapse() {
                     </div>
                 </div>
             </Transition>
-            <div absolute top-16px right-32px flex items-center gap-8px>
+            <div
+                absolute flex items-center gap-8px
+                :class="title || $slots.actions ? 'top-16px right-32px' : 'inset-y-0 right-4px'"
+            >
                 <slot name="actions" />
 
                 <TelaButton

package/components/tela/timeline-waterfall/timeline-waterfall.mdx

@@ -7,6 +7,8 @@ import * as TimelineWaterfallStories from './timeline-waterfall.stories.ts';
 
 A waterfall timeline that visualizes hierarchical execution steps over time. Use it to render run-traces, agent debug timelines, request waterfalls, or any sequence of nested operations. Parent rows can collapse/expand their children, bars are positioned against a shared time axis with grid lines and sub-ticks, and the time axis + label column stay sticky while the user scrolls.
 
+Rows without children reserve the collapse control's width so icons and labels align with collapsible rows at the same depth.
+
 ## Example
 
 <Canvas of={TimelineWaterfallStories.Default} />
@@ -23,6 +25,7 @@ const rows: TimelineRow[] = [
         label: 'Step 01',
         color: 'gray',
         status: 'success',
+        scheduledAt: new Date('2026-05-04T11:59:58Z'),
         startedAt: new Date('2026-05-04T12:00:00Z'),
         finishedAt: new Date('2026-05-04T12:00:03.9Z'),
         durationMs: 3900,
@@ -58,10 +61,12 @@ const { t } = useI18n()
 
 const labels = computed(() => ({
     executionTimeline: t('timeline.executionTimeline'),
-    startedAt: t('timeline.startedAt'),
-    duration: t('timeline.duration'),
+    enqueued: t('timeline.enqueued'),
+    executed: t('timeline.executed'),
     complete: t('timeline.complete'),
     failed: t('timeline.failed'),
+    expand: label => t('timeline.expand', { label }),
+    collapse: label => t('timeline.collapse', { label }),
 }))
 </script>
 
@@ -76,6 +81,47 @@ const labels = computed(() => ({
 <TelaTimelineWaterfall :rows="rows" hide-header />
 ```
 
+### Selection vs hover
+
+`hoveredId` is a transient pointer/scrub highlight (subtle row tint). `selectedId` is a
+persistent selection — the row that a caller has pinned (e.g. the graph node the user is
+inspecting). It renders a stronger treatment: raised surface, a left accent on the sticky
+label, and an outline around the bars. When a queue is visible, its outline covers the top, bottom, and left edges; the execution outline covers the top, bottom, and right edges, plus short left edges above and below the thin queue connection. The shared connection has no dividing border, and both segments use the same outline opacity. Execution-only rows keep a complete outline. Pass them independently.
+
+```vue
+<TelaTimelineWaterfall
+  :rows="rows"
+  :selected-id="selectedNodeId"
+  v-model:hovered-id="hoveredId"
+/>
+```
+
+Unselected queue and execution bars have a subtle half-pixel border in their status accent. A phased execution bar has one continuous outer outline in its aggregate status color, spanning both phases and any real timing gap; individual phases have no border. Their distinct fills and running animations remain inside the outline, without filling the timing gap. Selected bars retain their stronger outline.
+
+### Status badges and bar tone
+
+Every row includes a compact `TelaStatus` badge. Track bars pair colour with opacity:
+completed rows use a muted success tone, failed rows use a full-strength error tone,
+running rows use a blue animated stripe, waiting rows use a muted warning tone, and
+pending or stopped rows stay subdued. The running stripe respects reduced-motion
+preferences.
+
+Rows can provide `scheduledAt` to visualize queue wait before execution. The component
+shows a muted queue segment from `scheduledAt` to `startedAt` only when the wait is at
+least one second. Its tooltip groups queue and execution data into Enqueued and Executed
+rows, each with a timestamp and duration. Omit `scheduledAt` (or pass `null`) for legacy
+and execution-only rows.
+
+### Row appearance overrides
+
+Set `labelColor: 'primary' | 'secondary'` to control a row label independently of its collapse control. Set `dimmed: true` for a subtle 80% row opacity. Both are optional; callers that omit them keep the existing parent/leaf colors and full row opacity. Workflow Debug uses these overrides to mute pending and skipped rows, and dim skipped rows.
+
+### Execution phases
+
+Optionally provide `executionSegments` on a row to break its execution bar into labeled phases using the same status colors as standard bars. Set each segment’s `shade` to `default` for the darker status accent or `muted` for an opaque light fill in the same hue. These use distinct shades rather than fading the same pale background, so even a short phase remains visible. Each segment includes its own start/end timestamps, duration, and status. Set the row's start/end and duration to the overall elapsed interval. Segment positions retain real gaps; short phases keep a four-pixel visual minimum. The tooltip shows both phases with matching color keys, timestamps, durations and status badges, including from the queue segment. Running phases use the existing stripe animation with reduced-motion support. Clicking either phase selects the same row.
+
+Workflow Debug uses the default shade for the Condition action and the muted shade for its child execution span. Both phases take their color from their own status. Rows without segments keep the standard status-colored bar and existing tooltip.
+
 ## Props
 
 <ArgTypes />
@@ -83,25 +129,43 @@ const labels = computed(() => ({
 ```typescript
 type TimelineColor = 'blue' | 'purple' | 'cyan' | 'gray'
 
-interface TimelineChildRow {
+interface TimelineExecutionSegment {
+    id: string
+    label: string
+    shade: 'default' | 'muted'
+    status: TimelineRow['status']
+    startedAt: Date
+    finishedAt: Date
+    durationMs: number
+}
+
+interface TimelineRow {
+    executionSegments?: TimelineExecutionSegment[]
     id: string
     label: string
+    labelColor?: 'primary' | 'secondary'
+    dimmed?: boolean
     details?: string | null
     icon?: string | null
     color: TimelineColor
-    status: 'success' | 'failed'
+    status: 'success' | 'failed' | { variant: TelaStatusVariant, label: string }
+    scheduledAt?: Date | null
     startedAt: Date | null
     finishedAt: Date | null
     durationMs: number
+    showBar?: boolean // false keeps the row visible without a timing bar or tooltip
     costLabel?: string | null
-}
-
-interface TimelineRow extends TimelineChildRow {
-    children: TimelineChildRow[]
+    collapsed?: boolean // initial state only; user expansion survives polling updates
+    expandable?: boolean // keep a collapse control while lazy children are loading
+    children: TimelineRow[]
 }
 
 interface TimelineLabels {
     executionTimeline?: string
+    enqueued?: string
+    executed?: string
+    queuedFor?: string
+    scheduledAt?: string
     startedAt?: string
     endedAt?: string
     duration?: string
@@ -109,6 +173,8 @@ interface TimelineLabels {
     stepId?: string
     complete?: string
     failed?: string
+    expand?: (label: string) => string
+    collapse?: (label: string) => string
 }
 
 interface TimelineWaterfallProps {
@@ -116,5 +182,16 @@ interface TimelineWaterfallProps {
     hideHeader?: boolean
     headerLabel?: string
     labels?: TimelineLabels
+    hoveredId?: string | null
+    selectedId?: string | null
+    getRowTestId?: (id: string) => string | undefined
+    getExpandTestId?: (id: string) => string | undefined
+    formatTimestamp?: (timestamp: Date) => string
 }
 ```
+
+### Row controls
+
+Set `labelWidth` (pixels, default `220`) when the label column needs more room for controls. Debug uses `320` to retain status beside its Map counter.
+
+Use the `row-trailing` scoped slot (`{ row }`) to replace the default status beside the row label with compact controls, such as an iteration counter. Controls sit outside the label button; stop click propagation on interactive content to keep it independent of row selection. Set `expandable: true` on a row with lazy children so its collapse control remains available before those children arrive.