@nuxtseo/design-system 0.0.0-stage → 0.1.1

package/app/components/element/UiTrialBenefits.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { UiDitherAvatar, UiIcon, UiNavIcon } from '#components'
+// The "What's inside" benefit list shown beside the auth panel and in the
+// onboarding wizard. Single source of truth (design-system, so both the live
+// pro-auth layout and the brand-kit showcase render it). Callers own the
+// surrounding panel (wrapper + background); this renders only the content.
+// `trialDays` is a prop so this carries no saas dependency. `footnote: false`
+// drops the trial promise for surfaces where no trial is on offer — the
+// waitlist screen, where "14-day free trial" beside "sign-ups are paused"
+// promises something the product will refuse.
+const { trialDays = 14, footnote = true } = defineProps<{ trialDays?: number, footnote?: boolean }>()
+</script>
+
+<template>
+  <div class="flex flex-col text-left">
+    <div class="mb-7 flex items-center gap-3">
+      <UiDitherAvatar seed="nuxter-onboarding" :size="40" />
+      <div class="min-w-0">
+        <div class="text-label">
+          Ask more of your Site
+        </div>
+        <p class="mt-1 text-description">
+          Connect the data. Pro finds the work.
+        </p>
+      </div>
+    </div>
+
+    <ul class="space-y-5">
+      <li class="flex items-start gap-2.5">
+        <UiNavIcon icon="i-simple-icons-googlesearchconsole" class="mt-1 shrink-0" />
+        <div class="min-w-0">
+          <div class="text-highlighted text-sm font-medium mb-0.5">
+            Organic Search, live
+          </div>
+          <p class="text-description">
+            Clicks, queries, pages and countries as soon as you connect Google.
+          </p>
+        </div>
+      </li>
+
+      <li class="flex items-start gap-2.5">
+        <UiNavIcon icon="arrow-right" class="mt-1 shrink-0" />
+        <div class="min-w-0">
+          <div class="text-highlighted text-sm font-medium mb-0.5">
+            Next Actions, ranked
+          </div>
+          <p class="text-description">
+            Issues and opportunities ordered by what matters first.
+          </p>
+        </div>
+      </li>
+
+      <li class="flex items-start gap-2.5">
+        <UiNavIcon icon="send" class="mt-1 shrink-0" />
+        <div class="min-w-0">
+          <div class="text-highlighted text-sm font-medium mb-0.5">
+            Weekly Report, ready
+          </div>
+          <p class="text-description">
+            What changed, what was verified, and what needs work next. Every Monday.
+          </p>
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="footnote" class="mt-7 flex items-center gap-2 text-mini text-muted">
+      <UiIcon name="shield-check" class="size-3.5 text-dimmed shrink-0" />
+      <span>{{ trialDays }}-day free trial. Cancel anytime.</span>
+    </div>
+  </div>
+</template>

package/app/components/element/UiUrlLabel.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NuxtLink, UiFavicon, UiIcon } from '#components'
+import { prettifyUrl, safeHttpHref, urlHostname } from '../../../shared/utils/urls'
+
+const {
+  url,
+  favicon = true,
+  faviconSize = 16,
+  external = false,
+  showPath = true,
+  label,
+  to,
+} = defineProps<{
+  /** A full URL, bare hostname, or `sc-domain:` value. */
+  url: string
+  /** Render the favicon for the host. */
+  favicon?: boolean
+  faviconSize?: number
+  /** Render as an external link that opens the URL in a new tab. */
+  external?: boolean
+  /** Keep the path in the label; when false only the hostname is shown. */
+  showPath?: boolean
+  /** Override the auto-derived label text (e.g. an already-compacted path)
+   *  while the favicon/href still resolve from `url`. */
+  label?: string
+  /** Internal deep link — renders the label as a `NuxtLink` (`:to`, never
+   *  `@click`). Ignored when `external` is set (that already opens `url` in
+   *  a new tab via a real anchor). */
+  to?: string
+}>()
+
+const host = computed(() => urlHostname(url))
+const displayLabel = computed(() => label ?? (showPath ? prettifyUrl(url) : host.value))
+// A URL with a scheme links only when the scheme is http(s), so
+// `javascript://%0A…` renders as plain text. A bare host or `sc-domain:`
+// value links to its https origin.
+const href = computed(() => {
+  if (!external)
+    return undefined
+  const trimmed = url.trim()
+  if (/^[a-z][\w+.-]*:\/\//i.test(trimmed))
+    return safeHttpHref(trimmed)
+  return host.value ? safeHttpHref(`https://${host.value}`) : undefined
+})
+const isExternalLink = computed(() => !!href.value)
+const isLink = computed(() => isExternalLink.value || (!external && !!to))
+</script>
+
+<template>
+  <component
+    :is="isExternalLink ? 'a' : (!external && to ? NuxtLink : 'span')"
+    :href="href"
+    :to="!external && to ? to : undefined"
+    :target="isExternalLink ? '_blank' : undefined"
+    :rel="isExternalLink ? 'noopener' : undefined"
+    class="inline-flex min-w-0 max-w-full items-center gap-1.5"
+    :class="isLink ? 'group/url transition-colors hover:text-primary' : ''"
+  >
+    <UiFavicon
+      v-if="favicon && host"
+      :domain="host"
+      :size="faviconSize"
+      :alt="`${host} favicon`"
+    />
+    <span translate="no" class="truncate text-sm">{{ displayLabel }}</span>
+    <span v-if="isExternalLink" class="sr-only">(opens in new tab)</span>
+    <UiIcon
+      v-if="isExternalLink"
+      name="external"
+      class="size-3 shrink-0 text-dimmed opacity-0 transition-opacity group-hover/url:opacity-100"
+      aria-hidden="true"
+    />
+  </component>
+</template>

package/app/components/element/UiValenceDot.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import { semanticColors } from '../../composables/semanticColors'
+
+// Valence is the change-direction axis — the sibling of severity (UiSeverityDot)
+// and health (UiHealthDot). A leading dot is the canonical treatment for
+// direction in a repeated list (DESIGN.md colour budget); a coloured left-border
+// stripe is the banned alternative. A flat / no-change reading is a non-event, so
+// it stays neutral rather than spending colour.
+const { direction = 'flat', size = 'sm', label } = defineProps<{
+  direction?: 'up' | 'down' | 'flat'
+  size?: 'xs' | 'sm' | 'md'
+  /**
+   * Accessible name for the dot. Pass when it stands alone (no adjacent text), so
+   * colour is not the only channel conveying valence. Omit when a visible label
+   * sits beside it — the dot stays decorative then.
+   */
+  label?: string
+}>()
+
+const DIRECTION_STATUS: Record<'up' | 'down' | 'flat', SemanticStatus> = {
+  up: 'success',
+  down: 'error',
+  flat: 'neutral',
+}
+const sizeClass = { xs: 'size-1', sm: 'size-1.5', md: 'size-2' } as const
+</script>
+
+<template>
+  <span
+    class="rounded-full shrink-0"
+    :class="[sizeClass[size], semanticColors[DIRECTION_STATUS[direction]].dot]"
+    :role="label ? 'img' : undefined"
+    :aria-label="label || undefined"
+    :aria-hidden="label ? undefined : 'true'"
+  />
+</template>

package/app/components/element/UiWizardModal.vue

@@ -0,0 +1,284 @@
+<script lang="ts">
+export interface UiWizardStep {
+  id: string
+  label: string
+  /** Primary button label. Defaults to "Continue", or "Done" on the last step. */
+  nextLabel?: string
+  nextIcon?: string
+  /** False disables Next. Defaults to true. */
+  valid?: boolean
+  /** False hides Next, for a step whose own action advances it. */
+  showNext?: boolean
+  /** False keeps a step link out of this step, for a step that needs an
+   *  earlier save the host has not made yet. Defaults to true. */
+  reachable?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { computed, nextTick, onMounted, onScopeDispose, ref, useAttrs, useTemplateRef, watch } from 'vue'
+import { UiWizardNav, UiWizardProgress, UModal } from '#components'
+
+// A first-use setup with a form or more than one decision runs here (DESIGN.md,
+// First-use setup flows). The empty state keeps one CTA that opens it.
+//
+// The host owns the step list, so a step list can branch on an answer: the
+// active step is matched by id, and an id the list no longer holds falls back
+// to the first step. Closing keeps the step and the step state, so a reopen
+// resumes where the user left. Completing resets the step to the first step,
+// so a reopen starts there. `useWizardRoute` backs `open` and `step` with the query,
+// for deep links and OAuth returns.
+//
+// A step link cannot skip a step. The modal shows the linked step only if
+// every step before it is valid, and the step itself is reachable. Otherwise it
+// shows the first invalid step, or the step before the unreachable one. The
+// link resolves once per open, when `ready` reads true, and the resolved step
+// is written to the model on the client. A host whose step state loads async passes `ready`.
+//
+// `beforeNext` guards Next. While it is pending, Next shows loading and every
+// further press is ignored. If it resolves false, the step stays and the host
+// shows its error in the step slot. If it throws, the step stays and the error
+// propagates to Vue's error handler: an unexpected failure must reach error
+// reporting. Catch the expected failures and resolve false instead.
+//
+// Next is disabled for `settleMs` after the modal opens or the step changes.
+// Next keeps its place, so without the pause a double click on Continue would
+// also press the next step's final action. A test passes `settleMs: 0`, or
+// fakes timers.
+//
+// `complete` fires after the `open` model reads false. A listener can then
+// navigate: the close has already landed, so it cannot cancel the close.
+defineOptions({ inheritAttrs: false })
+
+const { title, description, steps, beforeNext, settleMs = 1000, ready = true } = defineProps<{
+  title: string
+  description?: string
+  steps: readonly UiWizardStep[]
+  beforeNext?: (id: string) => boolean | void | Promise<boolean | void>
+  /** Next is disabled for this many milliseconds after the modal opens or
+   *  the step changes. 0 turns the pause off. Defaults to 1000. */
+  settleMs?: number
+  /** False while the host loads the state that decides which step a link may
+   *  reach. The link resolves once this reads true. Defaults to true. */
+  ready?: boolean
+}>()
+
+const emit = defineEmits<{ complete: [] }>()
+
+defineSlots<
+  Record<string, (props: { next: () => Promise<void>, back: () => void, settling: boolean }) => unknown>
+  & { footer?: (props: { next: () => Promise<void>, back: () => void, pending: boolean, settling: boolean }) => unknown }
+>()
+const open = defineModel<boolean>('open', { default: false })
+const step = defineModel<string>('step')
+
+const attrs = useAttrs()
+const fullscreen = useMediaQuery('(max-width: 639.98px)')
+
+const linkedIndex = computed(() => Math.max(0, steps.findIndex(s => s.id === step.value)))
+// The linked step, clamped to the furthest step the user can reach.
+const reachableIndex = computed(() => {
+  for (let i = 1; i <= linkedIndex.value; i++) {
+    if (steps[i - 1]!.valid === false || steps[i]!.reachable === false)
+      return i - 1
+  }
+  return linkedIndex.value
+})
+// The clamp applies until the link resolves, once per open, when the host is
+// ready. After that only Next, Back, and the rail move the step, so a step that
+// turns valid while the user types never moves them. The resolved step renders
+// from this state. The model, and so the query, takes it on the client after
+// mount: a server-side write would answer the request with a redirect.
+const resolved = ref<undefined | { from: string | undefined, to: string | undefined }>()
+const activeIndex = computed(() => {
+  if (!resolved.value)
+    return reachableIndex.value
+  if (step.value === resolved.value.from)
+    return Math.max(0, steps.findIndex(s => s.id === resolved.value!.to))
+  return linkedIndex.value
+})
+const activeStep = computed(() => steps[activeIndex.value])
+const isLast = computed(() => activeIndex.value === steps.length - 1)
+const pending = ref(false)
+// Counts opens, so a guard answer can tell whether its modal session ended.
+let session = 0
+watch(open, (value) => {
+  if (value)
+    session++
+  else
+    resolved.value = undefined
+}, { immediate: true, flush: 'sync' })
+
+let isMounted = false
+function writeResolved(): void {
+  const link = resolved.value
+  if (!isMounted || link?.to === undefined || link.from === link.to || step.value !== link.from)
+    return
+  // Once the model holds the resolved step, the link is spent: a later move
+  // back to the linked id is a real step change, not the link again.
+  resolved.value = { from: link.to, to: link.to }
+  step.value = link.to
+}
+watch([open, () => ready], ([isOpen, isReady]) => {
+  if (!isOpen || !isReady || resolved.value)
+    return
+  const linked = steps[linkedIndex.value]?.id
+  const to = steps[reachableIndex.value]?.id
+  if (to === undefined)
+    return
+  // A link that names no step, or an unknown one, already shows the first
+  // step: it resolves without a write.
+  resolved.value = { from: step.value, to: linked === to ? step.value : to }
+  writeResolved()
+}, { immediate: true })
+onMounted(() => {
+  isMounted = true
+  writeResolved()
+})
+
+// True for `settleMs` after the modal opens or the step changes. Next is
+// disabled meanwhile; Back is not.
+const settling = ref(false)
+let settleTimer: ReturnType<typeof setTimeout> | undefined
+watch([open, () => activeStep.value?.id], ([value]) => {
+  clearTimeout(settleTimer)
+  settling.value = Boolean(value) && settleMs > 0
+  if (settling.value)
+    settleTimer = setTimeout(() => { settling.value = false }, settleMs)
+}, { immediate: true, flush: 'sync' })
+onScopeDispose(() => clearTimeout(settleTimer))
+
+const ui = computed(() => {
+  const own = (attrs.ui ?? {}) as Record<string, string | undefined>
+  return {
+    ...own,
+    content: ['sm:max-w-xl', own.content].filter(Boolean).join(' '),
+    header: ['flex-wrap items-start gap-y-3', own.header].filter(Boolean).join(' '),
+    wrapper: ['min-w-0 flex-1 pe-8', own.wrapper].filter(Boolean).join(' '),
+  }
+})
+const passthrough = computed(() => {
+  const { ui: _ui, ...rest } = attrs
+  return rest
+})
+
+async function next(): Promise<void> {
+  const current = activeStep.value
+  if (pending.value || settling.value || !current)
+    return
+  if (beforeNext) {
+    const asked = session
+    pending.value = true
+    // No catch: a throw keeps the step and reaches Vue's error handler.
+    const passed = await Promise.resolve().then(() => beforeNext(current.id)).finally(() => {
+      pending.value = false
+    })
+    // The modal may have closed, reopened, or changed step while the guard
+    // ran. Its answer belongs to the session and step it was asked about.
+    if (passed === false || !open.value || session !== asked || activeStep.value?.id !== current.id)
+      return
+  }
+  if (isLast.value) {
+    await complete()
+    return
+  }
+  step.value = steps[activeIndex.value + 1]!.id
+}
+
+// Closes, waits until the close lands, resets the step, then emits. Next stays
+// pending meanwhile, so a second press cannot complete twice. If the close
+// does not land in CLOSE_TIMEOUT_MS, a navigation guard or a failed Back kept
+// the flow open: Next stops loading and the error reaches Vue's error handler.
+const CLOSE_TIMEOUT_MS = 5000
+async function complete(): Promise<void> {
+  pending.value = true
+  open.value = false
+  const closed = !open.value || await new Promise<boolean>((resolve) => {
+    const timer = setTimeout(() => {
+      stop()
+      resolve(false)
+    }, CLOSE_TIMEOUT_MS)
+    const stop = watch(open, (value) => {
+      if (value)
+        return
+      clearTimeout(timer)
+      stop()
+      resolve(true)
+    })
+  })
+  pending.value = false
+  if (!closed)
+    throw new Error('The setup flow did not close, so it did not complete.')
+  step.value = steps[0]?.id
+  emit('complete')
+}
+
+function back(): void {
+  if (pending.value || activeIndex.value === 0)
+    return
+  step.value = steps[activeIndex.value - 1]!.id
+}
+
+function select(id: string): void {
+  if (!pending.value)
+    step.value = id
+}
+
+// Move focus to the new step's heading, so a screen reader announces it and
+// Tab continues inside the new step. The heading is visually hidden: the rail
+// already shows the step label.
+const heading = useTemplateRef<HTMLElement>('heading')
+watch(() => activeStep.value?.id, async () => {
+  if (!open.value)
+    return
+  await nextTick()
+  heading.value?.focus()
+})
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="title"
+    :description="description"
+    :fullscreen="fullscreen"
+    :ui="ui"
+    v-bind="passthrough"
+  >
+    <template v-if="steps.length > 1" #actions>
+      <div class="basis-full">
+        <UiWizardProgress :steps="steps" :current-index="activeIndex" label="Steps" @select="select" />
+      </div>
+    </template>
+
+    <template #body>
+      <h3
+        v-if="steps.length > 1 && activeStep"
+        ref="heading"
+        tabindex="-1"
+        class="sr-only"
+      >
+        {{ activeStep.label }}
+      </h3>
+      <slot v-if="activeStep" :name="activeStep.id" :next="next" :back="back" :settling="settling" />
+    </template>
+
+    <template #footer>
+      <slot name="footer" :next="next" :back="back" :pending="pending" :settling="settling">
+        <UiWizardNav
+          class="w-full"
+          :divider="false"
+          :can-back="activeIndex > 0"
+          :next-label="activeStep?.nextLabel ?? (isLast ? 'Done' : 'Continue')"
+          :next-icon="activeStep?.nextIcon ?? (isLast ? 'check' : 'next')"
+          :show-next="activeStep?.showNext ?? true"
+          :next-disabled="activeStep?.valid === false || settling"
+          :next-loading="pending"
+          @back="back"
+          @next="next"
+        />
+      </slot>
+    </template>
+  </UModal>
+</template>

package/app/components/element/UiWizardNav.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { UiButton } from '#components'
+// Footer nav row for a wizard step: optional Back on the left, an optional Skip
+// link + a primary advance button on the right. Captures the Back/Skip/Continue
+// (and Finish) pattern shared across the onboarding steps.
+const {
+  canBack = false,
+  skipLabel,
+  nextLabel = 'Continue',
+  nextIcon = 'next',
+  nextPurpose = 'cta',
+  showNext = true,
+  nextDisabled = false,
+  nextLoading = false,
+  divider = true,
+} = defineProps<{
+  canBack?: boolean
+  /** When set, renders a Skip link emitting `skip`. */
+  skipLabel?: string
+  nextLabel?: string
+  nextIcon?: string
+  nextPurpose?: 'cta' | 'secondary'
+  /** Hide the primary advance button — e.g. a required step whose own CTA
+   *  drives the advance (the plan/trial step). */
+  showNext?: boolean
+  nextDisabled?: boolean
+  nextLoading?: boolean
+  /** Draw the top rule. A host that already separates its footer, such as
+   *  `UiWizardModal`, turns it off. */
+  divider?: boolean
+}>()
+
+const emit = defineEmits<{ back: [], skip: [], next: [] }>()
+</script>
+
+<template>
+  <div class="flex items-center justify-between" :class="divider && 'pt-2 border-t border-default'">
+    <UiButton v-if="canBack" purpose="link" size="md" class="min-h-11" @click="emit('back')">
+      Back
+    </UiButton>
+    <span v-else />
+    <div class="flex items-center gap-3">
+      <UiButton v-if="skipLabel" purpose="link" size="md" class="min-h-11" @click="emit('skip')">
+        {{ skipLabel }}
+      </UiButton>
+      <UiButton
+        v-if="showNext"
+        :purpose="nextPurpose"
+        size="lg"
+        class="min-h-11"
+        :trailing-icon="nextIcon"
+        :label="nextLabel"
+        :disabled="nextDisabled"
+        :loading="nextLoading"
+        @click="emit('next')"
+      />
+    </div>
+  </div>
+</template>

package/app/components/element/UiWizardProgress.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { UiIcon } from '#components'
+// Numbered progress rail for the guided-onboarding wizard. Completed steps show
+// a check, the current step is ringed, future steps recede.
+//
+// Future steps sit at `text-muted`, not `text-dimmed`: these are chrome labels,
+// and dimmed measures 3.6–4.2:1 in dark on every surface (this layer's AGENTS.md,
+// Tokens and contrast) — below AA at any size. The step you're on already carries the
+// weight + ring, so it stays distinct without pushing the rest under AA.
+//
+// `complete` marks the current step done as well. The last step has no next
+// step to move to, so without it the rail kept its number after the work ended.
+const { label = 'Onboarding progress', complete = false } = defineProps<{
+  steps: readonly { id: string, label: string }[]
+  currentIndex: number
+  /** Accessible name of the progress nav. */
+  label?: string
+  /** The current step is done too, such as the last step once its work ends. */
+  complete?: boolean
+}>()
+
+const emit = defineEmits<{ select: [id: string] }>()
+</script>
+
+<template>
+  <nav :aria-label="label">
+    <p
+      class="sm:hidden text-sm font-medium text-highlighted"
+      aria-current="step"
+    >
+      Step {{ currentIndex + 1 }} of {{ steps.length }}:
+      {{ steps[currentIndex]?.label }}
+    </p>
+
+    <ol class="mt-3 flex items-center gap-1.5 sm:mt-0 sm:gap-2">
+      <li
+        v-for="(s, i) in steps"
+        :key="s.id"
+        class="flex items-center gap-2"
+        :aria-current="i === currentIndex ? 'step' : undefined"
+      >
+        <button
+          v-if="i < currentIndex"
+          type="button"
+          class="group inline-flex min-h-11 min-w-11 items-center justify-center gap-2 rounded-lg px-1 text-muted outline-none transition-colors hover:text-default focus-visible:ring-2 focus-visible:ring-primary sm:min-h-0"
+          :aria-label="`Return to ${s.label}`"
+          @click="emit('select', s.id)"
+        >
+          <span class="inline-flex size-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-inverted transition-transform group-hover:scale-105">
+            <UiIcon name="check" class="size-3" aria-hidden="true" />
+          </span>
+          <span class="hidden text-sm sm:inline">{{ s.label }}</span>
+        </button>
+        <span v-else class="inline-flex min-h-11 items-center gap-2 px-1 sm:min-h-0">
+          <span
+            v-if="complete && i === currentIndex"
+            class="inline-flex size-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-inverted"
+          >
+            <UiIcon name="check" class="size-3" aria-hidden="true" />
+            <span class="sr-only">Done:</span>
+          </span>
+          <span
+            v-else
+            class="inline-flex size-5 items-center justify-center rounded-full text-xs font-medium transition-colors"
+            :class="i === currentIndex ? 'bg-primary/15 text-primary ring-1 ring-primary/30' : 'bg-elevated text-muted'"
+          >
+            {{ i + 1 }}
+          </span>
+          <span
+            class="hidden text-sm sm:inline"
+            :class="i === currentIndex ? 'text-highlighted font-medium' : 'text-muted'"
+          >{{ s.label }}</span>
+        </span>
+        <span v-if="i < steps.length - 1" class="h-px w-3 bg-accented sm:w-4 lg:w-6" aria-hidden="true" />
+      </li>
+    </ol>
+  </nav>
+</template>

package/app/components/element/UiWizardShell.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { UiFocusedSurface, UiLogoPro } from '#components'
+// Guided-onboarding wizard chrome: the focused surface (UiFocusedSurface) plus
+// the product mark and a centered max-w-2xl content column. Step content +
+// progress + nav go in the default slot. Shared by the team-create onboarding
+// (layers/saas) and the brand-kit showcase. `#logo` replaces the Pro logo for a
+// site with its own mark.
+//
+// Height falls through to the surface (attrs): the live page passes
+// `min-h-screen`; an embedded preview passes a fixed height.
+const {
+  exitLabel = 'Dashboard',
+  showExit = true,
+  as = 'main',
+  wide = false,
+} = defineProps<{
+  exitLabel?: string
+  showExit?: boolean
+  as?: string
+  wide?: boolean
+}>()
+const emit = defineEmits<{ exit: [] }>()
+</script>
+
+<template>
+  <UiFocusedSurface :as="as" align="top" :exit-label="exitLabel" :show-exit="showExit" @exit="emit('exit')">
+    <div class="w-full mx-auto mt-10 md:mt-16 relative z-10" :class="wide ? 'max-w-6xl' : 'max-w-2xl'">
+      <div class="flex items-center gap-1 mb-8 [&>span]:!ml-0">
+        <slot name="logo">
+          <UiLogoPro />
+        </slot>
+        <!-- Account affordance for a wizard with no exit link (first-run
+             onboarding): the user must always be able to see who they are
+             signed in as and get out. Filled by the consumer — this layer
+             can't reach the session. -->
+        <div v-if="$slots.account" class="ml-auto flex items-center gap-1">
+          <slot name="account" />
+        </div>
+      </div>
+      <slot />
+    </div>
+  </UiFocusedSurface>
+</template>