@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/Toast/toastDSV2.ts

@@ -1,12 +1,20 @@
-import { ref } from 'vue'
-import type { Component } from 'vue'
+import { markRaw, ref } from 'vue'
+import type { Component, Ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { createEventHook, type EventHook } from '@vueuse/core'
 
 import type { ThemeColorType } from '../../theme'
+import type { Size } from '../../constants'
 
 let uid = 1
 
+/**
+ * How many toasts render at once. It lives here rather than in `LayoutToasts`
+ * because the store schedules the close timers, and only the toasts actually
+ * on screen may run one.
+ */
+export const MAX_ITEMS_DISPLAYED = 3
+
 export type ToastType = 'alert'|'warning'|'info'|'success'
 
 const DEFAULT_TIMER_DURATION_PER_TYPE: Record<Extract<ToastType, 'success'|'info'>, number> = {
@@ -14,14 +22,39 @@ const DEFAULT_TIMER_DURATION_PER_TYPE: Record<Extract<ToastType, 'success'|'info
   info: 7 * 1000,
 }
 
-export interface ToastOptions {
-  message: string
+/**
+ * Identity shown in place of the status icon. Size and variant are fixed by
+ * the design, so only the identity-bearing `UiAvatar` props are exposed.
+ */
+export interface ToastAvatar {
+  src?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  customText?: string | null
+  color?: string | null
+  alt?: string
+}
+
+/**
+ * Every field a toast understands, all optional. `openToast` narrows this to
+ * `ToastOptions`, which additionally demands something to display.
+ */
+export interface ToastBaseOptions {
+  message?: string
+  /**
+   * Rendered in place of `message`, inside the default layout — `component`
+   * replaces the whole body instead. Markup, and sanitizing it, stays with
+   * the caller.
+   */
+  messageComponent?: Component
+  messageComponentProps?: Record<string, unknown>
   id?: PropertyKey
   title?: string
   info?: string
   type?: ThemeColorType
+  avatar?: ToastAvatar
   time?: number | boolean // if time is explicitly false, the toast will not auto-close
-  progessIndeterminate?: boolean
+  progressIndeterminate?: boolean
   customIcon?: string
   confirmLabel?: string
   confirmHref?: string
@@ -29,6 +62,7 @@ export interface ToastOptions {
   confirmTo?: RouteLocationRaw
   confirmIcon?: string
   confirmColor?: ThemeColorType
+  actionsSize?: Size
   cancelLabel?: string
   locked?: boolean
   closable?: boolean
@@ -36,116 +70,253 @@ export interface ToastOptions {
   componentProps?: Record<string, unknown>
 }
 
+/**
+ * A toast has to show something. Requiring one of the three content fields
+ * here means an empty toast is a type error rather than an empty white box.
+ */
+export type ToastContent =
+  | { message: string }
+  | { messageComponent: Component }
+  | { title: string }
+  | { component: Component }
+
+export type ToastOptions = ToastBaseOptions & ToastContent
+
+/**
+ * The caller's options as the store keeps them: `time` has been resolved to
+ * milliseconds, so nothing downstream has to handle the `true` shorthand.
+ */
+type StoredToastOptions = Omit<ToastBaseOptions, 'time'> & { time?: number }
+
+/**
+ * A toast on screen: what the caller asked for, kept in `options`, plus the
+ * bookkeeping the store needs alongside it. They stay apart so `LayoutToasts`
+ * can hand the component the options without the timer handle and the event
+ * hooks falling through onto the DOM.
+ */
 interface ToastItem {
   id: PropertyKey
-  message: string
-  title?: string
-  info?: string
-  type?: ThemeColorType
-  icon?: string
-  time?: number
-  locked?: boolean
-  progessIndeterminate?: boolean
+  options: StoredToastOptions
   closeTimer: any
+  // The pointer is resting on this toast, so it must not be given a timer
+  // back when the visible window is recomputed.
+  paused: boolean
+  // When the current run of the close timer started. The progress bar animation
+  // is component state, so without this it has no way to observe a restart.
+  timerStartedAt: number
   confirmEventHook: EventHook
   cancelEventHook: EventHook
 }
 
-const toasts = ref<ToastItem[]>([])
+/**
+ * `true` picks the per-type default; a number is used as-is; `false` (or
+ * unset) means no auto-close — normalized to undefined so the timer is never
+ * started, and so nothing downstream has to divide a boolean by 1000.
+ */
+function resolveTime(time: ToastBaseOptions['time'], type: ThemeColorType): number | undefined {
+  const typeWithTimer = type === 'success' || type === 'info'
+
+  return time === true
+    ? (typeWithTimer ? DEFAULT_TIMER_DURATION_PER_TYPE[type] : undefined)
+    : (typeof time === 'number' ? time : undefined)
+}
+
+// Cast past `UnwrapRef`, which mangles the `Component` in `options` into a
+// shape that no longer matches ToastItem. Nothing here holds a nested ref, so
+// the unwrapped type and the declared one are the same at runtime.
+const toasts = ref<ToastItem[]>([]) as Ref<ToastItem[]>
 
-export function useToasts () {
+export function useToasts() {
   return {
     toasts,
-    closeToast,
     openToast,
+    updateToast,
+    restartToast,
+    closeToast,
     cancelCloseTimer,
   }
 }
 
-export function openToast (options: ToastOptions) {
-  let id: PropertyKey
-  let item = toasts.value.find(item => item.id === options.id)
-  const confirmEventHook = createEventHook<void>()
-  const cancelEventHook = createEventHook<void>()
-
-  if (item) {
-    id = item.id
-    Object.assign(item, {
-      ...options,
-    })
-
-    const restartTimer = options.id && Object.keys(options).length === 1
-    if (restartTimer) {
-      startTimer(item)
-    }
-  } else {
-    id = options.id ?? uid++
-
-    const type = options.type || 'info'
-    const typeWithTimer = type === 'success' || type === 'info'
-    // `true` picks the per-type default; a number is used as-is; `false`
-    // (or unset) means no auto-close — normalized to undefined so the timer
-    // is never started.
-    const time = options.time === true
-      ? (typeWithTimer ? DEFAULT_TIMER_DURATION_PER_TYPE[type] : undefined)
-      : (typeof options.time === 'number' ? options.time : undefined)
-    item = {
-      ...options,
-      id,
-      closeTimer: null,
-      confirmEventHook,
-      cancelEventHook,
-      time,
-      type,
-    }
-
-    toasts.value.push(item)
+/** What a caller gets back for the toast it just opened or patched. */
+interface ToastHandle {
+  id: PropertyKey
+  close: () => void
+  onConfirm: EventHook['on']
+  onCancel: EventHook['on']
+}
 
-    startTimer(item)
-  }
+function toastHandle(item: ToastItem): ToastHandle {
+  const { id } = item
 
   return {
     id,
     close: () => {
       closeToast(id)
     },
-    onConfirm: confirmEventHook.on,
-    onCancel: cancelEventHook.on,
+    // Read off the item, so a patched toast hands back the hooks it was
+    // opened with rather than a fresh pair nothing would ever trigger.
+    onConfirm: item.confirmEventHook.on,
+    onCancel: item.cancelEventHook.on,
+  }
+}
+
+/**
+ * The store is a deep ref, so a component definition kept in it would be
+ * proxied on every render — Vue warns about exactly that.
+ */
+function withRawComponents<T extends ToastBaseOptions>(options: T): T {
+  const { component, messageComponent } = options
+
+  return {
+    ...options,
+    ...(component && { component: markRaw(component) }),
+    ...(messageComponent && { messageComponent: markRaw(messageComponent) }),
   }
 }
 
-export function closeToast (id: PropertyKey) {
+function applyPatch(item: ToastItem, patch: Omit<ToastBaseOptions, 'id'>) {
+  const { time, ...rest } = patch
+  Object.assign(item.options, withRawComponents(rest))
+
+  // Patching goes through the same normalization as opening, so the store only
+  // ever holds milliseconds and the progress bar never divides a boolean.
+  if (time !== undefined) {
+    item.options.time = resolveTime(time, item.options.type ?? 'info')
+  }
+}
+
+/**
+ * Opens a toast. An `id` is an identity, so opening one that is already on
+ * screen patches it in place instead of stacking a second copy — that is what
+ * the room's per-user and per-link toasts rely on. It does not restart the
+ * close timer; call `restartToast` for that.
+ */
+export function openToast(options: ToastOptions): ToastHandle {
+  const open = toasts.value.find(item => item.id === options.id)
+  if (open) {
+    // Re-opening is a fresh occurrence of the same identity, and the caller is
+    // about to bind the handlers for it. Without dropping the previous ones,
+    // every re-open leaves another subscriber on hooks nothing ever clears.
+    open.confirmEventHook.clear()
+    open.cancelEventHook.clear()
+    applyPatch(open, options)
+
+    return toastHandle(open)
+  }
+
+  const type = options.type || 'info'
+  const id = options.id ?? uid++
+  const item: ToastItem = {
+    id,
+    options: {
+      ...withRawComponents(options),
+      id,
+      type,
+      time: resolveTime(options.time, type),
+    },
+    closeTimer: null,
+    paused: false,
+    timerStartedAt: 0,
+    // Created with the toast, not on every call, so the hooks outlive a patch.
+    confirmEventHook: createEventHook<void>(),
+    cancelEventHook: createEventHook<void>(),
+  }
+
+  toasts.value.push(item)
+  syncTimers()
+
+  return toastHandle(item)
+}
+
+/**
+ * Patches an open toast. Unlike `openToast` it needs no content, so a caller
+ * can change one field. Returns undefined if the toast has already closed.
+ */
+export function updateToast(id: PropertyKey, patch: Omit<ToastBaseOptions, 'id'>): ToastHandle | undefined {
+  const item = toasts.value.find(item => item.id === id)
+  if (!item) return
+
+  applyPatch(item, patch)
+
+  return toastHandle(item)
+}
+
+/** Runs the close timer again from zero, e.g. when the pointer leaves. */
+export function restartToast(id: PropertyKey) {
+  const item = toasts.value.find(item => item.id === id)
+  if (!item) return
+
+  item.paused = false
+  startTimer(item)
+}
+
+export function closeToast(id: PropertyKey) {
   const item = toasts.value.find(item => item.id === id)
   if (item) {
-    clearTimeout(item.closeTimer)
+    stopTimer(item)
     removeToast(id)
+    // Closing one frees a slot, so whatever was queued behind it can start
+    // counting down now that it is on screen.
+    syncTimers()
   }
 }
 
-export function cancelCloseTimer (id: PropertyKey) {
+export function cancelCloseTimer(id: PropertyKey) {
   const item = toasts.value.find(item => item.id === id)
   if (item) {
-    clearTimeout(item.closeTimer)
+    item.paused = true
+    stopTimer(item)
   }
 }
 
-export function resetToasts () {
+export function resetToasts() {
+  toasts.value.forEach(stopTimer)
   toasts.value = []
 }
 
-function removeToast (id: PropertyKey) {
+function removeToast(id: PropertyKey) {
   const index = toasts.value.findIndex(item => item.id === id)
   if (index !== -1) {
     toasts.value.splice(index, 1)
   }
 }
 
-function startTimer (item: ToastItem): void {
-  if (item.time) {
+/**
+ * Gives a close timer to every toast on screen and takes it away from the ones
+ * queued behind them. Without this a queued toast counts down while nothing is
+ * rendered and can be removed before it is ever seen.
+ */
+function syncTimers(): void {
+  toasts.value.forEach((item, index) => {
+    const onScreen = index < MAX_ITEMS_DISPLAYED
+
+    if (!onScreen || item.paused) {
+      stopTimer(item)
+      return
+    }
+
+    // Guarded so resettling the window never restarts a countdown that is
+    // already running, which would also replay the progress bar.
+    if (!item.closeTimer) startTimer(item)
+  })
+}
+
+function stopTimer(item: ToastItem): void {
+  clearTimeout(item.closeTimer)
+  item.closeTimer = null
+}
+
+function startTimer(item: ToastItem): void {
+  // Idempotent: without this a restart would orphan the previous timeout,
+  // which would go on to close the toast early.
+  stopTimer(item)
+
+  if (item.options.time) {
+    item.timerStartedAt = performance.now()
     item.closeTimer = setTimeout(
       () => {
         closeToast(item.id)
-      }, item.time
+      }, item.options.time
     )
   }
 }

package/src/components/UiActionBar/UiActionBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
-import type { ActionBarOrientation, ActionBarPosition, ActionBarSize } from './types'
-import { ACTION_BAR_CONTEXT_KEY } from './types'
+import type { ActionBarOrientation, ActionBarPosition, ActionBarSize, ActionBarTooltipSide } from './types'
+import { ACTION_BAR_CONTEXT_KEY, ACTION_BAR_RAIL_RADIUS } from './types'
 
 interface UiActionBarProps {
   /**
@@ -26,6 +26,7 @@ interface UiActionBarProps {
    * Accessible label for the toolbar landmark. Defaults to "Actions".
    */
   ariaLabel?: string
+  tooltipSide?: ActionBarTooltipSide
 }
 
 const props = withDefaults(defineProps<UiActionBarProps>(), {
@@ -34,17 +35,26 @@ const props = withDefaults(defineProps<UiActionBarProps>(), {
   position: undefined,
   offset: 3,
   ariaLabel: 'Actions',
+  tooltipSide: undefined,
 })
 
 provide(ACTION_BAR_CONTEXT_KEY, {
   orientation: computed<ActionBarOrientation>(() => props.orientation),
   size: computed<ActionBarSize>(() => props.size),
+  tooltipSide: computed<ActionBarTooltipSide | undefined>(() => props.tooltipSide),
 })
 
 const isVertical = computed(() => props.orientation === 'vertical')
 
 // Inner padding follows the design tokens (space-0-5 = 2px).
-const sizeClasses = computed(() => (props.size === 'sm' ? 'p-0.5 gap-0.5' : 'p-1 gap-0.5'))
+const SIZE_CLASSES: Record<ActionBarSize, string> = {
+  xs: 'p-0.5 gap-0.5',
+  sm: 'p-0.5 gap-0.5',
+  md: 'p-1 gap-0.5',
+}
+
+const sizeClasses = computed(() => SIZE_CLASSES[props.size])
+const railRadiusClass = computed(() => ACTION_BAR_RAIL_RADIUS[props.size])
 
 // When `position` is set, anchor the bar to an edge of its positioned
 // ancestor. Offsets are inline styles (rem) so any `offset` value works
@@ -77,8 +87,8 @@ const positionStyle = computed<Record<string, string>>(() => {
     :aria-label="ariaLabel"
     :aria-orientation="orientation"
     data-testid="ui-action-bar"
-    class="inline-flex items-center bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg"
-    :class="[sizeClasses, { 'flex-col': isVertical, 'absolute z-10': position }]"
+    class="inline-flex items-center bg-surface-neutral-bg-main border border-container-border shadow-lg"
+    :class="[sizeClasses, railRadiusClass, { 'flex-col': isVertical, 'absolute z-10': position }]"
     :style="positionStyle"
   >
     <slot />

package/src/components/UiActionBar/UiActionBarItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, useAttrs } from 'vue'
 import {
   TooltipProvider,
   TooltipRoot,
@@ -9,16 +9,21 @@ import {
   TooltipArrow,
 } from 'reka-ui'
 import type { RouteLocationRaw } from 'vue-router'
-import { ACTION_BAR_CONTEXT_KEY } from './types'
+import { useIconSize } from '../../composables/useIconSize'
+import type { ActionBarSize } from './types'
+import { ACTION_BAR_CONTEXT_KEY, ACTION_BAR_ITEM_RADIUS } from './types'
 
 interface UiActionBarItemProps {
-  /** Icon class, e.g. `i-ls-trash`. */
+  /**
+   * Icon class, e.g. `i-ph-trash`. Ignored when the `icon` slot is filled —
+   * use the slot for glyphs no icon class covers (emoji, an avatar, a dot).
+   */
   icon?: string
   /** Visible/accessible label. Required so icon-only items stay accessible. */
   label: string
   /**
    * Optional icon class rendered next to the label inside the hover tooltip —
-   * e.g. `i-ls-external-link` to flag that the action opens in a new tab.
+   * e.g. `i-ph-arrow-square-out` to flag that the action opens in a new tab.
    * Only shown for icon-only items (the tooltip is suppressed when
    * `showLabel` is set).
    */
@@ -55,13 +60,20 @@ const props = withDefaults(defineProps<UiActionBarItemProps>(), {
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
+// The trigger is rendered through `TooltipTrigger as-child`, which merges its
+// own props over the child vnode — so normal attribute fallthrough never
+// reaches the button. Read the consumer's `data-testid` explicitly, otherwise
+// every item in a wrapped bar would share one indistinguishable test id.
+const attrs = useAttrs()
+const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'ui-action-bar-item')
+
 const ctx = inject(ACTION_BAR_CONTEXT_KEY, null)
 const size = computed(() => ctx?.size.value ?? 'md')
 const orientation = computed(() => ctx?.orientation.value ?? 'horizontal')
 
 // Icon-only items get a tooltip; labeled items don't need one.
 const showTooltip = computed(() => !props.showLabel)
-const tooltipSide = computed(() => (orientation.value === 'vertical' ? 'right' : 'bottom'))
+const tooltipSide = computed(() => ctx?.tooltipSide.value ?? (orientation.value === 'vertical' ? 'right' : 'bottom'))
 
 const component = computed(() => {
   if (props.disabled) return { is: 'button', props: { type: 'button', disabled: true } }
@@ -70,22 +82,33 @@ const component = computed(() => {
   return { is: 'button', props: { type: 'button' } }
 })
 
-const sizeClasses = computed(() => {
-  const square = size.value === 'sm' ? 'size-8' : 'size-10'
-  // Labeled items grow with their text instead of staying square.
-  const padded = size.value === 'sm' ? 'h-8 px-2.5 gap-1' : 'h-10 px-3 gap-1.5'
-  return props.showLabel ? padded : square
-})
+// Per-size layout classes. `square` sizes icon-only items; labeled items use
+// `padded` and grow with their text instead of staying square. xs reuses the
+// sm text style — the design system defines no xs one.
+const SIZE_CLASSES: Record<ActionBarSize, { square: string, padded: string, text: string }> = {
+  xs: { square: 'size-6', padded: 'h-6 px-2 gap-1', text: 'text-action-button-sm' },
+  sm: { square: 'size-8', padded: 'h-8 px-2.5 gap-1', text: 'text-action-button-sm' },
+  md: { square: 'size-10', padded: 'h-10 px-3 gap-1.5', text: 'text-action-button-md' },
+}
 
-const iconSizeClass = computed(() => (size.value === 'sm' ? 'size-4' : 'size-5'))
-const textClass = computed(() => (size.value === 'sm' ? 'text-action-button-sm' : 'text-action-button-md'))
+const sizeConfig = computed(() => SIZE_CLASSES[size.value])
+const iconSizeClass = useIconSize(size)
 
-// Persistent pressed background when the item is an active toggle. Uses the
-// dedicated neutral "active" token so an active-but-not-hovered toggle stays
-// visually distinct from a merely hovered item.
-const stateClasses = computed(() => ({
-  'bg-actions-neutral-active-overlay': props.active === true,
-}))
+// Everything bound on the item root: per-size layout and text classes, plus
+// the persistent pressed background when the item is an active toggle (the
+// dedicated neutral "active" token keeps an active-but-not-hovered toggle
+// visually distinct from a merely hovered item).
+const itemClasses = computed(() => [
+  props.showLabel ? sizeConfig.value.padded : sizeConfig.value.square,
+  sizeConfig.value.text,
+  ACTION_BAR_ITEM_RADIUS[size.value],
+  // Labeled items in a vertical rail stretch so their icons align.
+  props.showLabel && orientation.value === 'vertical' ? 'w-full justify-start' : 'justify-center',
+  {
+    'bg-actions-neutral-active-overlay': props.active === true,
+    'cursor-pointer': !props.disabled,
+  },
+])
 
 function onClick (event: MouseEvent) {
   if (props.disabled) {
@@ -113,20 +136,22 @@ function onClick (event: MouseEvent) {
           v-bind="component.props"
           :aria-label="label"
           :aria-pressed="active"
-          data-testid="ui-action-bar-item"
-          class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
+          :data-testid="testId"
+          class="group inline-flex items-center shrink-0 outline-none transition-colors
                text-actions-neutral-idle
                hover:bg-actions-neutral-hover-overlay
-               focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+               focus-visible:focus-ring
                disabled:opacity-50 disabled:cursor-not-allowed"
-          :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+          :class="itemClasses"
           @click="onClick"
         >
-          <span
-            v-if="icon"
-            :class="[icon, iconSizeClass]"
-            class="shrink-0"
-          />
+          <slot name="icon">
+            <span
+              v-if="icon"
+              :class="[icon, iconSizeClass]"
+              class="shrink-0"
+            />
+          </slot>
         </component>
       </TooltipTrigger>
       <TooltipPortal>
@@ -134,7 +159,7 @@ function onClick (event: MouseEvent) {
           :side="tooltipSide"
           :side-offset="8"
           data-colors-semantic="light"
-          class="inline-flex items-center justify-center gap-1.5 py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg
+          class="inline-flex items-center justify-center gap-1.5 py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-row text-center z-overlay shadow-shadows-drop-shadow-lg
                  data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95"
         >
           {{ label }}
@@ -160,20 +185,22 @@ function onClick (event: MouseEvent) {
     v-bind="component.props"
     :aria-label="label"
     :aria-pressed="active"
-    data-testid="ui-action-bar-item"
-    class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
+    :data-testid="testId"
+    class="group inline-flex items-center shrink-0 outline-none transition-colors
            text-actions-neutral-idle
            hover:bg-actions-neutral-hover-overlay
-           focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+           focus-visible:focus-ring
            disabled:opacity-50 disabled:cursor-not-allowed"
-    :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+    :class="itemClasses"
     @click="onClick"
   >
-    <span
-      v-if="icon"
-      :class="[icon, iconSizeClass]"
-      class="shrink-0"
-    />
+    <slot name="icon">
+      <span
+        v-if="icon"
+        :class="[icon, iconSizeClass]"
+        class="shrink-0"
+      />
+    </slot>
     <span class="whitespace-nowrap">{{ label }}</span>
   </component>
 </template>

package/src/components/UiActionBar/types.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, InjectionKey } from 'vue'
 
 export type ActionBarOrientation = 'horizontal' | 'vertical'
-export type ActionBarSize = 'sm' | 'md'
+export type ActionBarSize = 'xs' | 'sm' | 'md'
 export type ActionBarPosition =
   | 'top-left'
   | 'top-right'
@@ -9,10 +9,12 @@ export type ActionBarPosition =
   | 'center-right'
   | 'bottom-left'
   | 'bottom-right'
+export type ActionBarTooltipSide = 'top' | 'right' | 'bottom' | 'left'
 
 export interface ActionBarContext {
   orientation: ComputedRef<ActionBarOrientation>
   size: ComputedRef<ActionBarSize>
+  tooltipSide: ComputedRef<ActionBarTooltipSide | undefined>
 }
 
 /**
@@ -22,3 +24,16 @@ export interface ActionBarContext {
  */
 export const ACTION_BAR_CONTEXT_KEY: InjectionKey<ActionBarContext> =
   Symbol('ui-action-bar-context')
+
+export const ACTION_BAR_RAIL_RADIUS: Record<ActionBarSize, string> = {
+  xs: 'rounded-button-sm',
+  sm: 'rounded-button-sm',
+  md: 'rounded-field-lg',
+}
+
+// Item radius stays concentric with the rail: rail radius minus rail padding and border.
+export const ACTION_BAR_ITEM_RADIUS: Record<ActionBarSize, string> = {
+  xs: 'rounded-[calc(var(--radius-button-sm)_-_3px)]',
+  sm: 'rounded-[calc(var(--radius-button-sm)_-_3px)]',
+  md: 'rounded-[calc(var(--radius-field-lg)_-_5px)]',
+}