@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/element/UiButton.vue

@@ -0,0 +1,549 @@
+<script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+import type { NavigationDestination } from '../../shared/navigation'
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import type { SlotTextOptions } from '../../utils/slot-text'
+import { useMediaQuery, useMounted, useMouseInElement } from '@vueuse/core'
+import { animateValue, m, useReducedMotion } from 'motion-v'
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, useSlots, useTemplateRef } from 'vue'
+import { UButton, UiIcon, UiSlotText } from '#components'
+import { liftPresets } from '../../shared/motion'
+
+/**
+ * UiButton — the single button primitive. UButton + motion-v lift/press
+ * + cursor-tracked surface FX, driven by a semantic `purpose` prop.
+ *
+ * `purpose` is the only styling knob — there is no raw `color`/`variant`.
+ * Each purpose resolves to a fixed UButton color+variant so button intent is
+ * consistent everywhere:
+ *   - `cta`       primary commit / page action — inverted neutral solid.
+ *   - `secondary` alternative action — neutral outline.
+ *   - `quiet`     low-emphasis: alerts, inline, icon-only, back/nav — neutral ghost.
+ *   - `danger`    destructive — error soft (error ghost when icon-only).
+ *   - `link`      tertiary action below a cta/secondary — neutral link, no chrome,
+ *                 no FX/lift (the "see other plans" / "or paste a list" tier).
+ *
+ * Still forwarded: `size`, `block`, `loading`, `disabled`, `to`, `type`,
+ * `icon`/`trailing-icon`, `class`, all slots. `intensity` may be set
+ * explicitly to override the per-purpose motion default.
+ *
+ * Effect layers (FX-only intensities, all hover-gated, reduced-motion-aware):
+ *   1. Wrapper lift — motion-v spring scale + y on hover, settle on tap.
+ *   2. Halo — the shared `--elevation-hover` token, accent-tinted via `--fx-accent`.
+ *   3. Spotlight — radial gradient anchored to cursor (`--mb-mx/--mb-my`).
+ *   4. Specular sweep — thin skewed band on hover-enter for CTA only.
+ *   5. Trailing-icon nudge — +1.5px on hover when `#trailing` is set.
+ *
+ * Modern CSS leveraged: `@property`, `color-mix(in oklab, ...)`, `mask-image`.
+ */
+
+defineOptions({ inheritAttrs: false })
+
+const {
+  purpose = 'secondary',
+  intensity: intensityProp,
+  block = false,
+  size,
+  loading = false,
+  disabled = false,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  animatedLabel = true,
+  ...buttonProps
+} = defineProps<MotionButtonProps>()
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+type Purpose = 'cta' | 'secondary' | 'quiet' | 'danger' | 'link'
+type Intensity = 'subtle' | 'default' | 'cta'
+
+interface MotionExtras {
+  purpose?: Purpose
+  intensity?: Intensity
+  // Curated semantic icon names (raw `i-*` strings still accepted).
+  icon?: UiIconName
+  leadingIcon?: UiIconName
+  trailingIcon?: UiIconName
+  animatedLabel?: boolean | SlotTextOptions
+}
+
+// UButton props minus the styling knobs purpose now owns and the icon props
+// MotionExtras re-types to the curated `UiIcon` union.
+type MotionButtonProps = Omit<ButtonProps, 'color' | 'variant' | 'icon' | 'leadingIcon' | 'trailingIcon' | 'onClick' | 'to' | 'href'> & MotionExtras & { to?: NavigationDestination, href?: NavigationDestination }
+
+// Semantic icon role names pass straight to UButton; @nuxt/icon's global aliases
+// resolve them to the active set's id (raw `i-*` ids pass through unchanged).
+const slots = useSlots()
+
+// Icon-only when there is no label content (no default slot, no `label` prop).
+const isIconOnly = computed(() => !slots.default && !('label' in buttonProps))
+
+// Dev-time guard: an icon-only button with no accessible name ships silently as
+// an unlabelled control. Warn so the caller passes `aria-label` (or `title`).
+if (import.meta.dev) {
+  const attrs = useAttrs()
+  onMounted(() => {
+    if (isIconOnly.value && !attrs['aria-label'] && !attrs['aria-labelledby'] && !attrs.title) {
+      console.warn('[UiButton] icon-only button has no accessible name — pass `aria-label` (or `title`).', { icon, leadingIcon, trailingIcon })
+    }
+  })
+}
+
+// purpose → resolved UButton color + variant.
+const resolved = computed<{ color: ButtonProps['color'], variant: ButtonProps['variant'] }>(() => {
+  switch (purpose) {
+    case 'cta':
+      return { color: 'neutral', variant: 'solid' }
+    case 'quiet':
+      return { color: 'neutral', variant: 'ghost' }
+    case 'link':
+      return { color: 'neutral', variant: 'link' }
+    case 'danger':
+      return { color: 'error', variant: isIconOnly.value ? 'ghost' : 'soft' }
+    case 'secondary':
+    default:
+      return { color: 'neutral', variant: 'outline' }
+  }
+})
+const color = computed(() => resolved.value.color)
+const variant = computed(() => resolved.value.variant)
+
+// Per-purpose motion default; `intensity` prop overrides.
+//   cta at lg/xl → full CTA FX; smaller cta → default. quiet → subtle (no FX).
+const intensity = computed<Intensity>(() => {
+  if (intensityProp)
+    return intensityProp
+  if (purpose === 'cta')
+    return (size === 'xl' || size === 'lg' || !size) ? 'cta' : 'default'
+  if (purpose === 'quiet' || purpose === 'link' || size === 'xs')
+    return 'subtle'
+  return 'default'
+})
+
+const reduced = useReducedMotion()
+const canHover = useMediaQuery('(hover: hover) and (pointer: fine)')
+const wrapperEl = useTemplateRef<HTMLElement>('wrapperEl')
+const shellEl = useTemplateRef<HTMLElement>('shellEl')
+const clipEl = useTemplateRef<HTMLElement>('clipEl')
+const hovered = ref(false)
+let resizeObserver: ResizeObserver | undefined
+
+const isDisabled = computed(() => disabled || loading)
+// Mount-gated: `canHover` is a media query, so it's false on the server and
+// flips true at hydration on desktop — rendering the v-if FX spans straight
+// from `canHover` mismatches on every desktop pageview. The FX layers are all
+// hover-gated (invisible at rest), so deferring them to post-mount is free.
+const isMounted = useMounted()
+const showFx = computed(() => isMounted.value && canHover.value && intensity.value !== 'subtle' && !isDisabled.value)
+
+// Only attach the mouse tracker when FX render — saves ~100 listeners on
+// dashboards full of subtle/icon buttons.
+const trackerTarget = computed(() => (showFx.value ? wrapperEl.value : null))
+const { elementX, elementY, elementWidth, elementHeight, isOutside }
+  = useMouseInElement(trackerTarget)
+
+const mxPct = computed(() => {
+  if (!showFx.value || isOutside.value || !elementWidth.value)
+    return 50
+  return Math.max(0, Math.min(100, (elementX.value / elementWidth.value) * 100))
+})
+const myPct = computed(() => {
+  if (!showFx.value || isOutside.value || !elementHeight.value)
+    return 50
+  return Math.max(0, Math.min(100, (elementY.value / elementHeight.value) * 100))
+})
+
+const lift = computed(() => {
+  // Link is a text affordance, not a surface — never lift/scale on hover.
+  if (reduced.value || !canHover.value || purpose === 'link')
+    return { hover: {}, tap: {}, transition: {} }
+  const preset = liftPresets[intensity.value]
+  // A full-width button scaling horizontally overflows its container and gets
+  // clipped by any `overflow:hidden` ancestor. Keep the vertical lift, drop the
+  // scale so block buttons stay within bounds.
+  if (block) {
+    return {
+      hover: { y: preset.hover.y },
+      tap: { y: preset.tap.y },
+      transition: preset.transition,
+    }
+  }
+  return preset
+})
+
+const wrapperStyle = computed(() => {
+  // Hover capability is only authoritative in the browser. Keep the default
+  // FX variables deterministic through SSR/hydration, then let the mouse
+  // tracker update them; subtle/disabled controls never consume the values.
+  if (intensity.value === 'subtle' || isDisabled.value)
+    return undefined
+  return {
+    '--mb-mx': `${mxPct.value}%`,
+    '--mb-my': `${myPct.value}%`,
+    '--fx-accent': 'var(--ui-text)',
+  }
+})
+
+// `w-fit` keeps the wrapper hugging its content even when it's a flex/grid item
+// (an inline-flex box blockifies to flex and would otherwise stretch to the
+// column's full width, dragging the halo/spot FX overlays out with it).
+const wrapperClass = computed(() => block ? 'flex w-full' : 'inline-flex w-fit max-w-full')
+const leadingIconName = computed(() => loading ? 'loading' : (leadingIcon || icon))
+// `useReducedMotion()` is browser-only knowledge. Gate the initial pose on the
+// same mounted state as the hover FX so SSR and hydration both render the icon
+// at rest. Later keyed icon changes can still animate on motion-enabled clients.
+const leadingInitial = computed(() => isMounted.value && !reduced.value
+  ? { opacity: 0, x: -6, scale: 0.82 }
+  : false)
+const hasLeading = computed(() => !!slots.leading || !!leadingIconName.value)
+const hasTrailing = computed(() => !!slots.trailing)
+const buttonLabel = computed(() => typeof buttonProps.label === 'string' ? buttonProps.label : undefined)
+const shouldAutoAnimateLabel = computed(() => {
+  if (!buttonLabel.value || slots.default || block || loading || animatedLabel === false)
+    return false
+  return buttonLabel.value.length <= 24
+})
+const animatedLabelOptions = computed(() => {
+  if (!shouldAutoAnimateLabel.value)
+    return null
+
+  return typeof animatedLabel === 'object' ? animatedLabel : {}
+})
+const hasAnimatedLabel = computed(() => !!animatedLabelOptions.value && !!buttonLabel.value)
+const resolvedButtonProps = computed(() => {
+  if (!hasAnimatedLabel.value)
+    return buttonProps
+  const { label: _label, ...rest } = buttonProps
+  return rest
+})
+
+function buttonEl() {
+  return domNode(clipEl.value)?.querySelector<HTMLElement>('.ui-motion-button__btn') ?? null
+}
+
+function domNode(value: unknown): HTMLElement | null {
+  if (Array.isArray(value))
+    return domNode(value[0])
+
+  if (value && typeof (value as HTMLElement).querySelector === 'function')
+    return value as HTMLElement
+
+  const el = (value as { $el?: unknown } | null)?.$el
+  if (el && typeof (el as HTMLElement).querySelector === 'function')
+    return el as HTMLElement
+
+  return null
+}
+
+// The shell follows the button's width with a spring when the label, an icon
+// or the loading state changes it. At rest the shell has no width of its own,
+// so it hugs the button exactly and a late web font cannot leave it clipped.
+// The ResizeObserver reports the button's border box after layout, so no
+// button forces a layout to measure itself while the page hydrates. The clip
+// does not shrink (`shrink-0`), so a pinned shell never changes the width the
+// observer reads.
+const SHELL_SPRING = { type: 'spring', stiffness: 420, damping: 34, mass: 0.62 } as const
+let buttonWidth = 0
+// The width the shell paints now: the latest spring frame while one runs.
+let shellWidth = 0
+let shellAnimation: { stop: () => void } | undefined
+
+function releaseShell(shell: HTMLElement) {
+  shellAnimation?.stop()
+  shellAnimation = undefined
+  shell.style.width = ''
+}
+
+function followButtonWidth(width: number) {
+  const previous = buttonWidth
+  buttonWidth = width
+  const shell = shellEl.value
+  // The first report only records the width. A hidden button reports 0, and
+  // it must not grow from nothing when it appears.
+  if (!shell || block || !previous || !width || previous === width)
+    return
+  if (reduced.value) {
+    releaseShell(shell)
+    return
+  }
+  // The observer runs after layout and before paint, so the frame paints the
+  // shell at its previous width. A label change during a spring starts the
+  // next spring from the current frame, so nothing here reads layout.
+  const from = shellAnimation ? shellWidth : previous
+  shellAnimation?.stop()
+  shellWidth = from
+  shell.style.width = `${from}px`
+  shellAnimation = animateValue({
+    keyframes: [from, Math.ceil(width)],
+    ...SHELL_SPRING,
+    onUpdate: (value: number) => {
+      shellWidth = value
+      shell.style.width = `${value}px`
+    },
+    onComplete: () => {
+      shellAnimation = undefined
+      shell.style.width = ''
+    },
+  })
+}
+
+onMounted(() => {
+  const el = buttonEl()
+  if (!el || typeof ResizeObserver === 'undefined')
+    return
+  resizeObserver = new ResizeObserver(([entry]) => {
+    if (!entry)
+      return
+    // `borderBoxSize` includes the border; the content box left the shell 2px short.
+    const box = entry.borderBoxSize?.[0]
+    followButtonWidth(box ? box.inlineSize : entry.target.getBoundingClientRect().width)
+  })
+  resizeObserver.observe(el)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  shellAnimation?.stop()
+})
+</script>
+
+<template>
+  <m.div
+    ref="wrapperEl"
+    tabindex="-1"
+    class="ui-motion-button group/mbtn relative isolate"
+    :class="[wrapperClass]"
+    :while-hover="isDisabled ? undefined : lift.hover"
+    :while-press="isDisabled ? undefined : lift.tap"
+    :transition="lift.transition"
+    :data-intensity="intensity"
+    :data-color="color"
+    :style="wrapperStyle"
+    @hover-start="hovered = !isDisabled"
+    @hover-end="hovered = false"
+  >
+    <!-- Halo — ambient lift via box-shadow rings, follows button shape. -->
+    <span
+      v-if="showFx"
+      class="ui-motion-button__halo pointer-events-none absolute"
+      aria-hidden="true"
+    />
+
+    <!-- Clipper bounds FX overlays to the button shape. Skip overflow:hidden
+         when no FX render so the button's native border-radius isn't cropped. -->
+    <div
+      ref="shellEl"
+      tabindex="-1"
+      class="ui-motion-button__clip-shell"
+      :class="block ? 'flex w-full' : 'inline-flex'"
+    >
+      <div
+        ref="clipEl"
+        class="ui-motion-button__clip relative"
+        :class="[block ? 'flex w-full' : 'inline-flex w-max max-w-none shrink-0 whitespace-nowrap', { 'ui-motion-button__clip--active': showFx }]"
+      >
+        <UButton
+          v-bind="{ ...resolvedButtonProps, ...$attrs } as ButtonProps"
+          :color="color"
+          :size="size"
+          :variant="variant"
+          :loading="false"
+          :disabled="isDisabled"
+          :block="block"
+          :icon="undefined"
+          :leading-icon="undefined"
+          :trailing-icon="trailingIcon"
+          class="ui-motion-button__btn relative z-10 whitespace-nowrap" :class="[{ 'hover:underline underline-offset-2': purpose === 'link' }]"
+          @click="emit('click', $event)"
+        >
+          <template v-if="hasLeading" #leading="slotData">
+            <slot v-if="slots.leading" name="leading" v-bind="slotData || {}" />
+            <m.span
+              v-else-if="leadingIconName"
+              :key="leadingIconName"
+              class="ui-motion-button__leading inline-flex shrink-0"
+              :initial="leadingInitial"
+              :animate="{ opacity: 1, x: 0, scale: 1 }"
+              :transition="reduced ? { duration: 0 } : { type: 'spring', stiffness: 520, damping: 30, mass: 0.55 }"
+            >
+              <UiIcon
+                :name="leadingIconName"
+                class="size-4"
+                :class="{ 'animate-spin': loading }"
+                aria-hidden="true"
+              />
+            </m.span>
+          </template>
+
+          <template v-if="hasAnimatedLabel && buttonLabel && animatedLabelOptions" #default>
+            <UiSlotText :text="buttonLabel" :options="animatedLabelOptions" />
+          </template>
+
+          <!-- Forward every UButton slot. Trailing gets a hover-nudge wrapper. -->
+          <template v-for="(_, name) in ($slots as Record<string, unknown>)" :key="name" #[name]="slotData">
+            <slot v-if="name !== 'leading' && name !== 'trailing'" :name="name" v-bind="slotData || {}" />
+          </template>
+
+          <template v-if="hasTrailing" #trailing="slotData">
+            <m.span
+              class="inline-flex"
+              :animate="{ x: hovered && !reduced ? 1.5 : 0 }"
+              :transition="{ duration: 0.22, ease: 'easeOut' }"
+            >
+              <slot name="trailing" v-bind="slotData || {}" />
+            </m.span>
+          </template>
+        </UButton>
+
+        <span
+          v-if="showFx"
+          class="ui-motion-button__spot pointer-events-none absolute inset-0"
+          aria-hidden="true"
+        />
+
+        <span
+          v-if="showFx && intensity === 'cta'"
+          class="ui-motion-button__shimmer pointer-events-none absolute inset-y-0"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  </m.div>
+</template>
+
+<style scoped>
+@property --mb-mx {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 50%;
+}
+@property --mb-my {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 50%;
+}
+
+/* Match UButton's native rounded-md (0.375rem) so the clip doesn't crop. */
+.ui-motion-button {
+  border-radius: 0.375rem;
+}
+.ui-motion-button[data-intensity="cta"] {
+  border-radius: 0.5rem;
+}
+
+/* Callers may opt into a pill. Every motion layer must follow that shape. */
+.ui-motion-button:has(.ui-motion-button__btn.rounded-full) {
+  border-radius: 9999px;
+}
+
+.ui-motion-button__clip-shell,
+.ui-motion-button__clip--active {
+  overflow: hidden;
+}
+
+/* Focus: the clip shell crops any outline the button draws on itself, so the
+   wrapper draws it instead, at the shared focus token with a 2px gap (3:1 or
+   more against the page and the button, WCAG 1.4.11 and 2.4.7). */
+.ui-motion-button:has(.ui-motion-button__btn:focus-visible) {
+  outline: 3px solid var(--focus-ring-color);
+  outline-offset: 2px;
+}
+.ui-motion-button__btn:focus-visible {
+  outline: none;
+}
+
+.ui-motion-button__clip-shell,
+.ui-motion-button__clip,
+.ui-motion-button__clip--active {
+  border-radius: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-motion-button__clip-shell {
+    transition: none;
+  }
+}
+
+/* ── Halo ── hover-tier elevation: the shared --elevation-hover token, an
+   accent-tinted ambient lift. --fx-accent (set on the wrapper) tints it;
+   the cta intensity scales it up locally. */
+.ui-motion-button__halo {
+  z-index: 0;
+  inset: 0;
+  opacity: 0;
+  border-radius: inherit;
+  background: transparent;
+  box-shadow: var(--elevation-hover);
+  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.ui-motion-button[data-intensity="cta"] .ui-motion-button__halo {
+  box-shadow:
+    0 3px 12px -3px color-mix(in oklab, var(--fx-accent) 16%, transparent),
+    0 12px 28px -10px color-mix(in oklab, var(--fx-accent) 12%, transparent);
+}
+.ui-motion-button:hover .ui-motion-button__halo {
+  opacity: 1;
+}
+
+/* ── Spotlight — cursor-tracked neutral highlight. */
+.ui-motion-button__spot {
+  z-index: 20;
+  opacity: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle 60px at var(--mb-mx, 50%) var(--mb-my, 50%),
+    color-mix(in oklab, var(--fx-accent) 10%, transparent),
+    transparent 70%
+  );
+  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  -webkit-mask-image: radial-gradient(ellipse at center, rgb(0 0 0) 60%, rgb(0 0 0 / 0.5) 90%, rgb(0 0 0 / 0) 100%);
+  mask-image: radial-gradient(ellipse at center, rgb(0 0 0) 60%, rgb(0 0 0 / 0.5) 90%, rgb(0 0 0 / 0) 100%);
+}
+.ui-motion-button[data-intensity="cta"] .ui-motion-button__spot {
+  background: radial-gradient(
+    circle 80px at var(--mb-mx, 50%) var(--mb-my, 50%),
+    color-mix(in oklab, var(--fx-accent) 14%, transparent),
+    transparent 70%
+  );
+}
+.ui-motion-button:hover .ui-motion-button__spot {
+  opacity: 1;
+}
+
+/* ── Specular sweep — CTA only, one pass per hover-enter. */
+.ui-motion-button__shimmer {
+  z-index: 25;
+  width: 22%;
+  left: 0;
+  transform: translateX(-220%) skewX(-22deg);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--fx-accent) 18%, transparent) 50%,
+    transparent
+  );
+  opacity: 0;
+  filter: blur(3px);
+}
+.ui-motion-button[data-intensity="cta"]:hover .ui-motion-button__shimmer {
+  opacity: 1;
+  animation: ui-mbtn-sweep 1.4s linear(0, 0.05 8%, 0.2 18%, 0.55 40%, 0.85 65%, 0.96 80%, 1) both;
+}
+@keyframes ui-mbtn-sweep {
+  0% { transform: translateX(-220%) skewX(-22deg); }
+  100% { transform: translateX(400%) skewX(-22deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-motion-button { transform: none; transition: none; }
+  .ui-motion-button__spot,
+  .ui-motion-button__shimmer,
+  .ui-motion-button__halo { display: none; }
+}
+
+@media (hover: none) {
+  .ui-motion-button__spot,
+  .ui-motion-button__shimmer { display: none; }
+}
+</style>

package/app/components/element/UiCelebration.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { Transition } from 'motion-v'
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import { m } from 'motion-v'
+import { UiAtmosphere, UiIcon } from '#components'
+import { useEntranceMotion } from '../../composables/useEntranceMotion'
+import { entrancePresets } from '../../shared/motion'
+
+// The "spark joy" moment (DESIGN principle 8): a success / milestone reveal — a
+// site connected, a waitlist joined, a trial started. This is the ONE place a
+// component defaults to atmosphere (a Dawn bloom = first light), because it is
+// exclusively a celebratory edge, never a data surface. Restraint: the joy is the
+// bloom + a single quiet spring on reveal, NOT confetti. Reduced-motion safe.
+const {
+  icon,
+  palette = 'dawn',
+  title,
+  description,
+} = defineProps<{
+  /** Optional small mark above the title (a single monochrome-container icon, primary glyph). */
+  icon?: UiIconName
+  /** Atmosphere palette — Dawn (first light) by default; Dusk for a premium/paid moment. */
+  palette?: 'ink' | 'twilight' | 'dawn' | 'dusk' | 'mist' | 'ash'
+  title: string
+  description?: string
+}>()
+
+// A gentle overshoot — the sanctioned celebratory spring (subtle, no anticipation).
+const medallionPop = { type: 'spring', stiffness: 300, damping: 14, mass: 0.8 } satisfies Transition
+const medallionEntrance = useEntranceMotion({ initial: { opacity: 0, scale: 0.8 }, enter: { opacity: 1, scale: 1 }, transition: medallionPop })
+const textEntrance = useEntranceMotion(entrancePresets.fadeUp)
+</script>
+
+<template>
+  <div class="relative isolate overflow-hidden flex flex-col items-center text-center px-6 py-12">
+    <UiAtmosphere :palette="palette" geometry="bloom" intensity="present" style="z-index: -1" />
+
+    <!-- Icon springs in once (a quiet overshoot), then stands still. -->
+    <m.div
+      v-if="icon"
+      class="inline-flex items-center justify-center size-12 rounded-2xl bg-elevated border border-default mb-5"
+      v-bind="medallionEntrance"
+    >
+      <UiIcon :name="icon" class="size-6 text-primary" aria-hidden="true" />
+    </m.div>
+
+    <m.h2
+      class="text-2xl font-display font-semibold tracking-tight text-highlighted"
+      v-bind="textEntrance"
+    >
+      {{ title }}
+    </m.h2>
+    <m.p
+      v-if="description"
+      class="text-sm text-muted mt-2 max-w-md leading-relaxed"
+      v-bind="textEntrance"
+    >
+      {{ description }}
+    </m.p>
+
+    <div v-if="$slots.default" class="relative mt-6 [&_button]:min-h-11 [&_a]:min-h-11 sm:[&_button]:min-h-0 sm:[&_a]:min-h-0">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/element/UiChannelChips.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DeliveryChannelKey } from '../../../shared/delivery-channels'
+import { computed } from 'vue'
+import { UiIcon } from '#components'
+import { DELIVERY_CHANNELS, deliveryChannelsSummary, enabledDeliveryChannels } from '../../../shared/delivery-channels'
+
+/**
+ * UiChannelChips — the delivery channels of a rule as compact stacked chips.
+ *
+ * Replaces the stacked list of channel cards that spent a whole column on four
+ * words. Chips overlap like an avatar stack so the set reads as ONE object at a
+ * glance; the glyph carries the identity (monochrome, per DESIGN.md) and the
+ * accessible name carries the words.
+ *
+ * Accepts either the stored `channels` record or an explicit ordered list.
+ */
+const {
+  channels,
+  keys,
+  size = 'sm',
+  empty = 'No delivery channel',
+  showEmpty = true,
+} = defineProps<{
+  /** The stored channels record, e.g. `{ email: true, discord: false }`. */
+  channels?: Partial<Record<DeliveryChannelKey, unknown>> | null
+  /** Explicit channel list; wins over `channels` when both are given. */
+  keys?: readonly string[]
+  size?: 'xs' | 'sm' | 'md'
+  empty?: string
+  /** Render the empty sentence when nothing is enabled (else render nothing). */
+  showEmpty?: boolean
+}>()
+
+const resolved = computed<DeliveryChannelKey[]>(() => {
+  if (keys)
+    return keys.filter((key): key is DeliveryChannelKey => key in DELIVERY_CHANNELS)
+  return enabledDeliveryChannels(channels)
+})
+
+const summary = computed(() => deliveryChannelsSummary(resolved.value, empty))
+
+const CHIP = {
+  xs: { box: 'size-5', icon: 'size-2.5', overlap: '-ml-1.5' },
+  sm: { box: 'size-6', icon: 'size-3', overlap: '-ml-2' },
+  md: { box: 'size-7', icon: 'size-3.5', overlap: '-ml-2' },
+} as const
+</script>
+
+<template>
+  <span v-if="resolved.length" class="inline-flex items-center" role="img" :aria-label="`Delivered via ${summary}`">
+    <span
+      v-for="(key, index) in resolved"
+      :key="key"
+      :title="DELIVERY_CHANNELS[key].label"
+      class="inline-flex items-center justify-center rounded-full border border-default bg-elevated ring-2 ring-[var(--ui-bg)]"
+      :class="[CHIP[size].box, index > 0 && CHIP[size].overlap]"
+    >
+      <UiIcon :name="DELIVERY_CHANNELS[key].icon" class="text-dimmed" :class="[CHIP[size].icon]" />
+    </span>
+  </span>
+  <span v-else-if="showEmpty" class="text-xs text-muted">{{ empty }}</span>
+</template>