@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/container/IntegrationRow.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { SourceLogo } from '../element/UiSourceLogos.vue'
+import { computed } from 'vue'
+import { UiIcon, UiSourceLogos } from '#components'
+
+// One external service in a list of them. The row states what the service does
+// for you before it states that it is connected, so an unconnected list reads
+// as a menu of capabilities rather than a checklist of chores.
+//
+// Presentational only: every value arrives as a prop. The caller owns fetching,
+// connect flows, and per-site link state.
+//
+// Native <details> for the same reason UiDisclosure uses it — free keyboard and
+// AT semantics, find-in-page auto-expand. The expanded half is where credential
+// forms and per-site coverage live, so it must stay in the DOM-on-demand path
+// rather than being a v-if the caller manages.
+
+const { name, status, logo, logoComponent, connected = false, sources = [] } = defineProps<{
+  /** Service name as the vendor writes it. */
+  name: string
+  /**
+   * Coverage, not a bare "Connected". "4 of 6 sites linked" answers the
+   * question the row exists to answer; a checkmark does not.
+   */
+  status: string
+  /** Brand mark as an Iconify `logos` id. */
+  logo?: string
+  /** Inline brand-mark component, for vendors no coloured icon set carries. */
+  logoComponent?: Component
+  /** Drives the quiet connected marker, not the status text. */
+  connected?: boolean
+  /**
+   * The Sources this Integration lets Pro read through, in Source order. The
+   * row wears their marks, and names them from `sm` up. Empty for a service
+   * that only sends, such as a delivery channel.
+   */
+  sources?: readonly SourceLogo[]
+}>()
+
+const sourceNames = computed(() => sources.map(source => source.label).join(', '))
+
+const open = defineModel<boolean>('open', { default: false })
+
+/**
+ * Keep an action click from toggling the row. The toggle is the summary's
+ * DEFAULT action, so `stopPropagation` alone never prevented it: a button
+ * whose label span took the click collapsed an open row. Links keep their
+ * default, which is the navigation, and leave the page anyway.
+ */
+function onActionClick(e: MouseEvent) {
+  e.stopPropagation()
+  if (!(e.target as Element | null)?.closest('a[href]'))
+    e.preventDefault()
+}
+
+function onToggle(e: Event) {
+  open.value = (e as ToggleEvent).newState === 'open'
+}
+</script>
+
+<template>
+  <details class="ui-disclosure group" :open="open" @toggle="onToggle">
+    <summary
+      class="grid grid-cols-[14px_32px_minmax(0,1fr)] items-center gap-x-3 gap-y-2 px-3.5 py-2.5 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden min-h-11 outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md sm:flex sm:gap-3"
+    >
+      <UiIcon
+        name="chevron-right"
+        class="size-3.5 shrink-0 text-dimmed transition-transform duration-150 group-open:rotate-90"
+        aria-hidden="true"
+      />
+      <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-lg border border-default bg-elevated">
+        <component :is="logoComponent" v-if="logoComponent" class="size-4" aria-hidden="true" />
+        <UiIcon v-else-if="logo" :name="logo" class="size-4" aria-hidden="true" />
+      </span>
+      <div class="min-w-0 flex-1">
+        <p class="break-words text-sm font-medium text-default sm:line-clamp-1">
+          {{ name }}
+        </p>
+        <!-- Clamped, not truncated. `truncate` half-applied here: the utility's
+             `white-space: nowrap` loses inside `<summary>`, so the line wrapped
+             to four lines at 375px while still claiming to ellipse. Two lines
+             keeps rows near-uniform without cutting a provider's description to
+             four words on mobile. -->
+        <p class="line-clamp-2 text-sm text-muted">
+          {{ status }}
+        </p>
+      </div>
+      <!-- From `sm` up the Sources sit in the row. Below it the service name
+           already truncates, so they move into the expanded half. -->
+      <span v-if="sources.length" class="hidden shrink-0 items-center gap-1.5 text-sm text-muted sm:inline-flex">
+        <UiSourceLogos :sources="sources" size="xs" />
+        {{ sourceNames }}
+      </span>
+      <!-- Below `sm` the status line already states coverage, and the marker
+           beside an action squeezed the service name to two letters. -->
+      <span v-if="connected" class="hidden shrink-0 items-center gap-1 text-sm text-muted sm:inline-flex">
+        <UiIcon name="check" class="size-3.5" aria-hidden="true" />
+        Connected
+      </span>
+      <!-- The action sits inside <summary>, where any click would also toggle the
+           disclosure. Handle it here rather than on each caller's button: whether a
+           button component forwards a native listener is its own business, and a
+           row whose button collapses the row it just acted on is the exact bug
+           this wrapper makes impossible.
+           Below `sm` the action takes a second row under the name, so a wide
+           button never squeezes the service name. -->
+      <span class="col-start-3 row-start-2 justify-self-start empty:hidden sm:shrink-0" @click="onActionClick">
+        <slot name="action" />
+      </span>
+    </summary>
+    <div class="px-3.5 pb-4 pt-1 pl-[4.25rem]">
+      <p v-if="sources.length" class="mb-2 flex items-center gap-1.5 text-sm text-muted sm:hidden">
+        <UiSourceLogos :sources="sources" size="xs" />
+        {{ sources.length === 1 ? 'Source' : 'Sources' }}: {{ sourceNames }}
+      </p>
+      <slot />
+    </div>
+  </details>
+</template>

package/app/components/container/KnowDoRails.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const { ariaLabel = 'Activity and next actions' } = defineProps<{
+  ariaLabel?: string
+}>()
+</script>
+
+<template>
+  <section class="know-do-rails min-w-0" :aria-label="ariaLabel">
+    <div class="know-do-rails__grid">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.know-do-rails {
+  container-type: inline-size;
+}
+
+.know-do-rails__grid {
+  position: relative;
+  display: grid;
+  align-items: start;
+  gap: 1rem;
+}
+
+:global(.know-do-rails__grid > *) {
+  min-width: 0;
+}
+
+:global(.know-do-rails__grid > :only-child) {
+  grid-column: 1 / -1;
+}
+
+@container (min-width: 44rem) {
+  .know-do-rails__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>

package/app/components/container/RailPanel.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UiChip, UiIcon } from '#components'
+
+const {
+  title,
+  description,
+  icon,
+  count = null,
+  status = 'success',
+  empty = false,
+  emptyLabel,
+  loadingLabel = 'Loading...',
+  errorLabel = 'Could not load this panel.',
+  hideWhenEmpty = true,
+} = defineProps<{
+  title: string
+  description?: string
+  icon?: string
+  count?: string | number | null
+  status?: 'pending' | 'success' | 'error'
+  empty?: boolean
+  emptyLabel?: string
+  loadingLabel?: string
+  errorLabel?: string
+  hideWhenEmpty?: boolean
+}>()
+
+const shouldRender = computed(() =>
+  status !== 'success' || !empty || !!emptyLabel || !hideWhenEmpty,
+)
+</script>
+
+<template>
+  <section
+    v-if="shouldRender"
+    class="group/rail min-w-0 overflow-hidden rounded-lg border border-default bg-elevated/45 transition-colors hover:bg-elevated/60"
+    :aria-label="title"
+    :aria-busy="status === 'pending' ? 'true' : undefined"
+  >
+    <header class="flex min-h-12 flex-wrap items-center justify-between gap-x-3 gap-y-2 border-b border-default/80 px-3.5 py-2.5">
+      <div class="flex min-w-0 items-center gap-2">
+        <span
+          v-if="icon"
+          class="flex size-6 shrink-0 items-center justify-center rounded-md border border-default bg-default text-dimmed"
+          aria-hidden="true"
+        >
+          <UiIcon :name="icon" class="size-3.5" />
+        </span>
+        <span class="min-w-0">
+          <h3 class="min-w-0 truncate text-sm font-medium text-highlighted">
+            {{ title }}
+          </h3>
+          <p v-if="description" class="mt-0.5 truncate text-mini text-dimmed">
+            {{ description }}
+          </p>
+        </span>
+      </div>
+
+      <div class="flex max-w-full shrink-0 flex-wrap items-center justify-end gap-2">
+        <slot name="meta" />
+        <UiChip
+          v-if="count != null && count !== 0"
+          purpose="count"
+          size="xs"
+          tabular
+        >
+          {{ count }}
+        </UiChip>
+      </div>
+    </header>
+
+    <slot v-if="status === 'pending'" name="loading">
+      <div class="px-4 py-6 text-sm text-dimmed">
+        {{ loadingLabel }}
+      </div>
+    </slot>
+
+    <slot v-else-if="status === 'error'" name="error">
+      <div class="px-4 py-6 text-sm text-dimmed">
+        {{ errorLabel }}
+      </div>
+    </slot>
+
+    <slot v-else-if="empty" name="empty">
+      <div v-if="emptyLabel" class="px-4 py-5 text-sm text-dimmed">
+        {{ emptyLabel }}
+      </div>
+    </slot>
+
+    <slot v-else />
+  </section>
+</template>

package/app/components/container/UiAlert.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import { m } from 'motion-v'
+import { computed } from 'vue'
+import { UiButton, UiIcon } from '#components'
+import { semanticColors } from '../../composables/semanticColors'
+import { useEntranceMotion } from '../../composables/useEntranceMotion'
+import { entrancePresets } from '../../shared/motion'
+
+const { status = 'info', icon, title } = defineProps<{
+  /** Semantic status — drives the accent icon + bar + corner bloom (surface
+   *  stays neutral for every status). Shared name across the status family
+   *  (UiChip, UiStatusBadge). */
+  status?: SemanticStatus
+  /** Icon name (Lucide/Carbon) */
+  icon?: UiIconName
+  /** Alert title */
+  title?: string
+  /** Alert description text */
+  description?: string
+  /** Show close/dismiss button */
+  dismissible?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+
+// All alerts use a neutral surface; the semantic accent rides the icon + the
+// top bar + corner bloom only. A red/amber/green fill dominates the page —
+// especially when alerts stack — and spends color on the surface instead of
+// the signal. Keep the colour where it carries meaning (the icon), not the
+// whole banner. (Color-budget ladder — see brand-kit /status.)
+const colors = computed(() => ({
+  ...semanticColors[status],
+  bg: 'bg-elevated/50',
+  border: 'border-default',
+}))
+
+const defaultIcons: Record<SemanticStatus, string> = {
+  error: 'caution',
+  warning: 'warning',
+  info: 'note',
+  success: 'success',
+  neutral: 'circle-dash',
+}
+
+const resolvedIcon = computed(() => icon || defaultIcons[status])
+
+const isUrgent = computed(() => status === 'error' || status === 'warning')
+const dismissLabel = computed(() => title ? `Dismiss alert: ${title}` : 'Dismiss alert')
+
+const entrance = useEntranceMotion(entrancePresets.fadeUp)
+</script>
+
+<template>
+  <!-- motion-v fadeUp entrance — animates in when the client mounts it; server-rendered alerts stay visible. -->
+  <m.div
+    class="ui-alert group relative overflow-hidden rounded-xl border"
+    :class="[colors.bg, colors.border]"
+    :role="isUrgent ? 'alert' : 'status'"
+    :aria-live="isUrgent ? 'assertive' : 'polite'"
+    v-bind="entrance"
+  >
+    <!-- Top-left corner bloom — faint radial light source, kept whisper-quiet
+         so the semantic accent reads as a hint, not a wash. -->
+    <div
+      class="pointer-events-none absolute left-0 top-0 size-14 rounded-full opacity-[0.15] blur-xl"
+      :class="colors.dot"
+      style="transform: translate(-55%, -55%);"
+      aria-hidden="true"
+    />
+
+    <!-- Gradient fade accent bar — top edge, crisp at left, fades out.
+         Runs along the top so the semantic accent matches the top-lit
+         direction of the --surface-bevel fill rather than fighting it. -->
+    <div
+      class="pointer-events-none absolute inset-x-0 top-0 h-px opacity-[0.35]"
+      :class="colors.dot"
+      style="mask-image: linear-gradient(to right, black 0%, black 20%, transparent 80%); -webkit-mask-image: linear-gradient(to right, black 0%, black 20%, transparent 80%);"
+      aria-hidden="true"
+    />
+
+    <div class="flex items-start gap-3 px-4 py-3">
+      <UiIcon :name="resolvedIcon" class="mt-0.5 size-4 shrink-0" :class="colors.text" aria-hidden="true" />
+
+      <!-- Content -->
+      <div class="min-w-0 flex-1 flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:gap-4">
+        <div class="min-w-0 flex-1 text-sm">
+          <p v-if="title" class="font-medium text-default">
+            {{ title }}
+          </p>
+          <p v-if="description" class="text-muted" :class="title ? 'mt-0.5' : ''">
+            {{ description }}
+          </p>
+          <slot />
+        </div>
+
+        <!-- Inline action -->
+        <slot name="action" />
+      </div>
+
+      <!-- Dismiss -->
+      <UiButton
+        v-if="dismissible"
+        class="min-h-11 min-w-11 cursor-pointer"
+        :aria-label="dismissLabel"
+        purpose="quiet"
+        size="xs"
+        @click="emit('dismiss')"
+      >
+        <UiIcon name="close" class="size-3" aria-hidden="true" />
+      </UiButton>
+    </div>
+
+    <!-- Progress bar (optional) -->
+    <slot name="progress" />
+  </m.div>
+</template>

package/app/components/container/UiAppShell.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+// Generic dashboard shell: fixed sidebar, content slot, mobile drawer.
+// Pure layout — no auth, no banners, no app-specific chrome.
+// Used by admin (AdminLayoutShell), pro (ProDashboardShell), and the
+// design-system sandbox (brand-kit `kit` layout).
+import type { VNodeChild } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { useMediaQuery } from '@vueuse/core'
+import { useRoute, useRouter } from 'nuxt/app'
+import { provide, ref, watch } from 'vue'
+import { UDrawer, UiButton, UiIcon } from '#components'
+import { provideUiAppShellNav } from '../../composables/useAppShellNav'
+import { navDrawerCloseDecider, uiNavDrawerKey } from './ui-nav-drawer'
+
+const { sidebarWidth = 64, flushContent = false, contentClass, inlineMobileNav = false } = defineProps<{
+  sidebarWidth?: 56 | 64
+  flushContent?: boolean
+  /** Override the content padding (non-flush only). */
+  contentClass?: string
+  /** The page header draws the hamburger (+ switcher) inline with the page
+   *  title below `lg` (via `useUiAppShellNav`), so the shell draws no separate
+   *  mobile bar above the content. */
+  inlineMobileNav?: boolean
+}>()
+
+const slots = defineSlots<{
+  brand?: () => VNodeChild
+  sidebar?: () => VNodeChild
+  footer?: () => VNodeChild
+  topBanners?: () => VNodeChild
+  mobile?: (props: { closeNav: () => void }) => VNodeChild
+  /** Inline content next to the mobile hamburger (e.g. the site/group switcher). */
+  mobileNav?: () => VNodeChild
+  default?: () => VNodeChild
+  bottom?: () => VNodeChild
+  extras?: () => VNodeChild
+}>()
+
+const navOpen = ref(false)
+const route = useRoute()
+const router = useRouter()
+const isDesktop = useMediaQuery('(min-width: 1024px)')
+
+// An in-drawer pane switch (the sidebar mode tabs) IS a route change, but it
+// must not close the drawer the way a page navigation does: the tab arms its
+// destination here, and the watcher keeps the drawer open when that exact
+// navigation lands. The watcher keys on fullPath, so every route change
+// consumes the arm: a query-only change (the tabs flip a chatNonce) must not
+// leave it armed for a later navigation. Only a path change closes.
+const drawerNav = navDrawerCloseDecider()
+function keepOpenFor(target: RouteLocationRaw) {
+  drawerNav.arm(router.resolve(target).fullPath)
+}
+provide(uiNavDrawerKey, { keepOpenFor })
+
+let watchedPath = route.path
+watch(() => route.fullPath, () => {
+  const pathChanged = route.path !== watchedPath
+  watchedPath = route.path
+  const close = drawerNav.shouldCloseOnRouteChange(route.fullPath)
+  if (pathChanged && close)
+    navOpen.value = false
+})
+
+if (import.meta.client) {
+  watch(isDesktop, (desktop) => {
+    if (desktop)
+      navOpen.value = false
+  })
+}
+
+function openNav() {
+  navOpen.value = true
+}
+
+function closeNav() {
+  navOpen.value = false
+}
+
+provideUiAppShellNav({ openNav })
+</script>
+
+<template>
+  <div class="flex min-h-screen" data-allow-mismatch="children">
+    <a
+      href="#main-content"
+      class="sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:top-3 focus-visible:left-3 focus-visible:z-50 focus-visible:rounded-md focus-visible:bg-default focus-visible:px-3 focus-visible:py-2 focus-visible:text-sm focus-visible:font-medium focus-visible:ring-2 focus-visible:ring-primary"
+    >Skip to content</a>
+    <aside
+      class="hidden lg:flex flex-col shrink-0 fixed top-0 bottom-0 left-0 border-r border-default bg-default"
+      :class="sidebarWidth === 56 ? 'w-56' : 'w-64'"
+    >
+      <div v-if="slots.brand" class="shrink-0 px-3 pt-4 pb-2">
+        <slot name="brand" />
+      </div>
+      <div class="flex-1 min-h-0 overflow-y-auto scroll-overlay px-3 py-2 space-y-5">
+        <slot name="sidebar" />
+      </div>
+      <div v-if="slots.footer" class="shrink-0 border-t border-default px-3 py-3">
+        <slot name="footer" />
+      </div>
+    </aside>
+
+    <div
+      class="flex-1 min-w-0"
+      :class="[
+        sidebarWidth === 56 ? 'lg:ml-56' : 'lg:ml-64',
+        flushContent ? 'h-screen flex flex-col' : '',
+      ]"
+    >
+      <slot name="topBanners" />
+
+      <div v-if="!inlineMobileNav" class="lg:hidden flex items-center gap-1 px-4 pt-3">
+        <UiButton purpose="quiet" class="-ml-2 min-h-11 min-w-11 shrink-0" aria-label="Open navigation menu" @click="openNav()">
+          <UiIcon name="menu" class="size-5" aria-hidden="true" />
+        </UiButton>
+        <div v-if="slots.mobileNav" class="min-w-0 flex-1">
+          <slot name="mobileNav" />
+        </div>
+      </div>
+
+      <div class="flex flex-col" :class="flushContent ? 'flex-1 min-h-0' : 'min-h-screen'">
+        <main id="main-content" class="flex-1" :class="flushContent ? 'min-h-0' : (contentClass ?? 'p-4 sm:p-6 lg:p-8')">
+          <slot />
+        </main>
+        <slot name="bottom" />
+      </div>
+    </div>
+
+    <!-- A left drawer sizes to its content by default, which squeezed the nav
+         to ~250px on a phone. Fixed width, capped so the scrim stays tappable.
+         No handle: it is a swipe affordance for bottom sheets and overlapped
+         the nav rows here. -->
+    <UDrawer
+      v-model:open="navOpen"
+      title="Navigation menu"
+      direction="left"
+      :handle="false"
+      :ui="{ content: 'w-80 max-w-[calc(100vw-3rem)]' }"
+    >
+      <template #content>
+        <div class="flex flex-1 flex-col h-full min-w-0 overflow-x-hidden">
+          <template v-if="slots.mobile">
+            <div class="flex-1 min-h-0 overflow-y-auto px-5 pt-5 pb-3">
+              <slot name="mobile" :close-nav="closeNav" />
+            </div>
+          </template>
+          <template v-else>
+            <div v-if="slots.brand" class="shrink-0 px-5 pt-5 pb-2">
+              <slot name="brand" />
+            </div>
+            <div class="flex-1 min-h-0 overflow-y-auto scroll-overlay px-5 py-2 space-y-5">
+              <slot name="sidebar" />
+            </div>
+            <div v-if="slots.footer" class="shrink-0 border-t border-default px-5 py-4">
+              <slot name="footer" />
+            </div>
+          </template>
+        </div>
+      </template>
+    </UDrawer>
+
+    <slot name="extras" />
+  </div>
+</template>