@nuxtseo/design-system 0.1.1 → 0.1.3

package/app/composables/useConfirm.ts

@@ -1,3 +1,4 @@
+import type { VNodeChild } from 'vue'
 import { useOverlay } from '#imports'
 import UiConfirmDialog from '../components/element/UiConfirmDialog.vue'
 
@@ -13,6 +14,27 @@ export interface ConfirmOptions {
   readonly confirmLabel: string
   readonly cancelLabel?: string
   readonly tone?: ConfirmTone
+  /** Rich content under the description: `() => h('p', [h('strong', site.name), ' stops syncing.'])`. */
+  readonly body?: () => VNodeChild
+  /**
+   * The work to run on confirm. The dialog shows its loading state until the
+   * action settles, then closes. A rejected action rejects the returned
+   * promise with the same error.
+   */
+  readonly action?: () => Promise<unknown>
+}
+
+/** How the dialog closed. Nuxt UI's overlay hands it to `useConfirm()`. */
+export type ConfirmResult
+  = | { readonly _tag: 'Confirmed' }
+    | { readonly _tag: 'Cancelled' }
+    | { readonly _tag: 'ActionFailed', readonly error: unknown }
+
+/** Escape and a click outside close the overlay with no result. */
+function toAnswer(result: ConfirmResult | undefined): boolean {
+  if (result?._tag === 'ActionFailed')
+    throw result.error
+  return result?._tag === 'Confirmed'
 }
 
 /**
@@ -25,8 +47,14 @@ export interface ConfirmOptions {
  * ```
  *
  * Resolves `true` only for the confirm button. Cancel, Escape, and a click
- * outside resolve `false`. Call it in `setup`; the returned function may run
- * any time later. Needs `<UApp>`, which mounts Nuxt UI's overlay provider.
+ * outside resolve `false`. Pass `action` to run the work inside the dialog:
+ *
+ * ```ts
+ * await confirm({ title: 'Remove Site?', confirmLabel: 'Remove', action: () => removeSite(id) })
+ * ```
+ *
+ * Call it in `setup`; the returned function may run any time later. Needs
+ * `<UApp>`, which mounts Nuxt UI's overlay provider.
  */
 export function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {
   const overlay = useOverlay()
@@ -34,5 +62,5 @@ export function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {
   // a page that asks many times holds no dialog it is not showing.
   return options => overlay.create(UiConfirmDialog, { destroyOnClose: true })
     .open({ ...options })
-    .then(result => result === true)
+    .then(result => toAnswer(result as ConfirmResult | undefined))
 }

package/app/shared/error-state.ts

@@ -1,5 +1,7 @@
+import type { FailureCopy } from './failure-copy'
 import type { UiIcon } from './ui-icons'
-import { toWidgetFailure, WIDGET_FAILURE_COPY } from './widget-failure'
+import { FAILURE_COPY } from './failure-copy'
+import { toWidgetFailure } from './widget-failure'
 
 /**
  * What `UiErrorState` is allowed to say, and where the words came from.
@@ -87,8 +89,6 @@ export interface ErrorStateView {
   readonly retryable: boolean
 }
 
-const GENERIC_NEXT_STEP = 'Try again in a moment. If it keeps happening, contact support.'
-
 function resetHint(source: { resetAt?: Date, retryAfter?: number }, now: number): string | null {
   if (source.retryAfter)
     return `Try again in ${source.retryAfter} seconds`
@@ -108,16 +108,17 @@ function resetHint(source: { resetAt?: Date, retryAfter?: number }, now: number)
 
 /**
  * Turn a source into the words on screen. Pure: pass the clock in, so the
- * reset hint is testable and the component owns no time.
+ * reset hint is testable and the component owns no time. Pass `copy` to use a
+ * site's reworded failures (`readFailureCopy()`).
  */
-export function resolveErrorState(source: ErrorStateSource, now: number): ErrorStateView {
+export function resolveErrorState(source: ErrorStateSource, now: number, copy: FailureCopy = FAILURE_COPY): ErrorStateView {
   if (source._tag === 'copy') {
     return {
       tone: 'error',
       icon: 'caution',
       title: source.title,
       detail: source.detail ?? null,
-      nextStep: { _tag: 'generic', text: GENERIC_NEXT_STEP },
+      nextStep: { _tag: 'generic', text: copy.nextStep },
       retryable: true,
     }
   }
@@ -127,24 +128,24 @@ export function resolveErrorState(source: ErrorStateSource, now: number): ErrorS
     return {
       tone: 'warning',
       icon: 'clock',
-      title: WIDGET_FAILURE_COPY['rate-limited'].title,
+      title: copy.failures['rate-limited'].title,
       detail: source.detail,
       nextStep: hint
         ? { _tag: 'timing', text: hint }
-        : { _tag: 'generic', text: WIDGET_FAILURE_COPY['rate-limited'].body },
+        : { _tag: 'generic', text: copy.failures['rate-limited'].body },
       retryable: true,
     }
   }
 
   const failure = toWidgetFailure(source.error)
-  const copy = WIDGET_FAILURE_COPY[failure._tag]
+  const failureCopy = copy.failures[failure._tag]
   const limited = failure._tag === 'rate-limited'
   return {
     tone: limited ? 'warning' : 'error',
     icon: limited ? 'clock' : 'caution',
-    title: copy.title,
-    detail: copy.body,
+    title: failureCopy.title,
+    detail: failureCopy.body,
     nextStep: null,
-    retryable: copy.retryable,
+    retryable: failureCopy.retryable,
   }
 }

package/app/shared/failure-copy.ts

@@ -0,0 +1,53 @@
+import type { WidgetFailureCopy, WidgetFailureTag } from './widget-failure'
+import { WIDGET_FAILURE_COPY } from './widget-failure'
+
+/**
+ * Every string the failure surfaces render: `UiWidgetState`, `UiDataList` and
+ * `UiErrorState`. COPY.md (Shared primitive assets) owns the defaults. A site
+ * that extends the layer rewords them through `designSystem.failureCopy` in its
+ * app.config. Whether a failure is retryable is behaviour, so no override
+ * reaches it.
+ */
+export interface FailureCopy {
+  readonly failures: Readonly<Record<WidgetFailureTag, WidgetFailureCopy>>
+  /** The retry button on `UiWidgetState` and `UiDataList`. */
+  readonly retryLabel: string
+  /** The retry button on `UiErrorState`. */
+  readonly errorStateRetryLabel: string
+  /** The next-step line `UiErrorState` shows under copy a caller wrote. */
+  readonly nextStep: string
+}
+
+/** What a site may reword. Each key it leaves out keeps the default. */
+export interface FailureCopyOverrides {
+  readonly failures?: { readonly [K in WidgetFailureTag]?: Partial<Pick<WidgetFailureCopy, 'title' | 'body'>> }
+  readonly retryLabel?: string
+  readonly errorStateRetryLabel?: string
+  readonly nextStep?: string
+}
+
+export const FAILURE_COPY: FailureCopy = {
+  failures: WIDGET_FAILURE_COPY,
+  retryLabel: 'Retry',
+  errorStateRetryLabel: 'Try again',
+  nextStep: 'Try again in a moment. If it keeps happening, contact support.',
+}
+
+const FAILURE_TAGS = Object.keys(WIDGET_FAILURE_COPY) as WidgetFailureTag[]
+
+/** Lay a site's overrides over the defaults. Pure, so a test passes its own. */
+export function resolveFailureCopy(overrides: FailureCopyOverrides | undefined): FailureCopy {
+  if (!overrides)
+    return FAILURE_COPY
+  const failures = Object.fromEntries(FAILURE_TAGS.map((tag) => {
+    const base = FAILURE_COPY.failures[tag]
+    const own = overrides.failures?.[tag]
+    return [tag, { title: own?.title ?? base.title, body: own?.body ?? base.body, retryable: base.retryable }]
+  })) as Record<WidgetFailureTag, WidgetFailureCopy>
+  return {
+    failures,
+    retryLabel: overrides.retryLabel ?? FAILURE_COPY.retryLabel,
+    errorStateRetryLabel: overrides.errorStateRetryLabel ?? FAILURE_COPY.errorStateRetryLabel,
+    nextStep: overrides.nextStep ?? FAILURE_COPY.nextStep,
+  }
+}

package/app/shared/stat.ts

@@ -0,0 +1,65 @@
+import type { SlotTextOptions } from '../utils/slot-text'
+import type { UiIcon as UiIconName } from './ui-icons'
+
+// `UiStat`'s props. They live in this module, not the SFC, so a consumer can
+// name them in its own `defineProps`: the Vue SFC compiler resolves a type
+// from a package `.ts` file and not from a package `.vue` file.
+
+type Datum = Record<string, number | string>
+
+export interface UiStatProps {
+  // link
+  to?: string
+
+  // label
+  icon?: UiIconName
+  title?: string
+  tooltip?: string
+  tooltipDescription?: string
+
+  // value
+  value?: string | number | null
+  suffix?: string
+  valueClass?: string
+  format?: (n: number) => string
+
+  // trend
+  trend?: number | null
+  /**
+   * Formats the trend magnitude. The value `format` never applies: the trend is
+   * a percent or a delta, so a currency formatter printed "+$12.5%".
+   */
+  trendFormat?: (n: number) => string
+  trendSuffix?: string
+  trendLabel?: string
+  invertTrend?: boolean
+  /**
+   * Trend color budget (DESIGN.md Composition): colored success/error trends
+   * belong to the hero zone only. Default renders neutral; `UiStats
+   * variant="cards"` (the hero pattern) opts its stats in automatically.
+   */
+  trendColored?: boolean
+
+  // sparkline
+  sparkline?: Datum[]
+
+  // sizing
+  size?: 'sm' | 'md' | 'lg'
+  /** Keep report-visible labels and deltas at the 14px readable tier. */
+  readableLabels?: boolean
+
+  // state
+  loading?: boolean
+
+  /**
+   * Rolls compact metric values when they change. Defaults on for numeric-ish
+   * values; pass false for dense/realtime surfaces or object options to tune.
+   */
+  animatedValue?: boolean | SlotTextOptions
+
+  // threshold alerting
+  status?: 'crisis' | 'warning' | 'good'
+
+  // render the value area inside a card, keeping the header outside
+  card?: boolean
+}

package/app/shared/table.ts

@@ -1,4 +1,4 @@
-import type { ColumnDef } from '@tanstack/table-core'
+import type { Cell, ColumnDef, Row, RowSelectionState } from '@tanstack/table-core'
 import {
   columnFilteringFeature,
   columnOrderingFeature,
@@ -103,3 +103,76 @@ export const uiTableVisibleFromClass: Record<UiTableVisibleFrom, string> = {
   'xl': 'hidden xl:table-cell',
   '2xl': 'hidden 2xl:table-cell',
 }
+
+/**
+ * `UiTable`'s props. They live in this module, not the SFC, so a consumer that
+ * wraps the table can name them in its own `defineProps`. The Vue SFC compiler
+ * resolves a type from a package `.ts` file; it cannot resolve one from a
+ * package `.vue` file.
+ */
+export interface UiTableProps<T extends object> {
+  data: T[]
+  columns: UiTableColumn<T>[]
+  selected?: RowSelectionState
+  controlledSelection?: boolean
+  rowHover?: boolean
+  rowClickable?: boolean
+  enableSorting?: boolean
+  /** Caller owns sort state; UiTable emits @sortColumn and bypasses client-side sorting. */
+  manualSorting?: boolean
+  pageSize?: number
+  ignoreHeader?: boolean
+  size?: UiTableSize
+  loading?: boolean
+  loadingRows?: number
+  rowId?: UiTableRowId<T>
+  manualPagination?: boolean
+  disablePagination?: boolean
+  total?: number
+  /** Accessible name for the table. Rendered as a visually-hidden <caption>. */
+  label: string
+  /** Draw the canonical rounded table surface. */
+  bordered?: boolean
+  /** Pagination density. Compact renders previous, page position, and next only. */
+  paginationPreset?: 'default' | 'compact'
+  /** Fill the caller's available height and keep pagination pinned to the bottom. */
+  fill?: boolean
+  /** Extra classes applied per data row — e.g. a selection highlight. */
+  rowClass?: (row: T) => string
+  /** Row id presented as the active item in a click-through table. */
+  activeRowId?: string
+  /** Row id to open when the table first receives deep-linked evidence. */
+  initialExpandedRowId?: string
+  /**
+   * Show Export CSV and Export JSON, saving to this file name without the
+   * extension. The export holds every filtered and sorted row, not one page.
+   * Ignored with `manualPagination`: mount `UiTableExport` with every row.
+   */
+  exportFilename?: string
+}
+
+/** What a `#<column id>-cell` slot receives: the TanStack row and cell, and the cell's value. */
+export interface UiTableCellSlotProps<T extends object> {
+  row: Row<UiTableFeatures, T>
+  cell: Cell<UiTableFeatures, T, unknown>
+  value: unknown
+}
+
+/**
+ * `UiTable`'s slots. A `#<column id>-cell` slot draws that column's cells and
+ * wins over the column's `cell` renderer. A column with no slot keeps its
+ * renderer. `#empty` replaces the zero-rows line.
+ */
+export type UiTableSlots<T extends object> = {
+  [K in `${string}-cell`]?: (props: UiTableCellSlotProps<T>) => unknown
+} & {
+  'empty'?: () => unknown
+  'expanded-component'?: (props: { row: T }) => unknown
+  'actions'?: (props: { row: T }) => unknown
+  'tfoot'?: () => unknown
+}
+
+/** The slot name that draws one column's cells. */
+export function uiTableCellSlotName(columnId: string): `${string}-cell` {
+  return `${columnId}-cell`
+}

package/app/shared/toast.ts

@@ -0,0 +1,52 @@
+import type { Component } from 'vue'
+import type { SemanticStatus } from '../composables/semanticColors'
+
+// `UiToast` and `UiToaster` props. They live in this module, not the SFCs, so
+// a consumer can name them in its own `defineProps`: the Vue SFC compiler
+// resolves a type from a package `.ts` file and not from a package `.vue` file.
+
+export interface ToastAction {
+  label: string
+  icon?: string
+  to?: string
+  onClick?: (e: MouseEvent) => void
+  /** Visual emphasis. `primary` = filled, `neutral` = quiet. */
+  color?: 'primary' | 'neutral'
+}
+
+export interface UiToastProps {
+  /** Heading text (string or a render component). */
+  title?: string | Component
+  /** Body text (string or a render component). */
+  description?: string | Component
+  /** Semantic status — drives accent + default icon. Wins over `color`. */
+  status?: SemanticStatus
+  /** Nuxt UI color compatibility for existing `toast.add({ color })` call sites. */
+  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  /** Icon override. Defaults to the status icon. */
+  icon?: string
+  /** Inline action buttons. */
+  actions?: ToastAction[]
+  /**
+   * Bug-report handler. When set, failure toasts (error/warning) that carry no
+   * action of their own get a "Report bug" button. Wired by the app (the
+   * design system must not reach for the feedback drawer itself).
+   */
+  reportBug?: (toast: { title?: string, description?: string }) => void
+  /** Show the close button. */
+  close?: boolean
+  /** Auto-dismiss progress 0..1 (remaining), or false to hide the bar. */
+  progress?: number | false
+  /** Collapsed back card — fade content so the deck reads as peeking cards. */
+  peek?: boolean
+}
+
+export interface UiToasterProps {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  /** Max cards rendered in the deck (older ones collapse into a "+N" pill). */
+  max?: number
+  /** Default auto-dismiss in ms; a per-toast `duration` overrides. 0 = sticky. */
+  duration?: number
+  /** Passed to every card: adds "Report bug" to failure toasts. See UiToast. */
+  reportBug?: UiToastProps['reportBug']
+}

package/app/shared/widget-failure.ts

@@ -121,6 +121,7 @@ export function toWidgetFailure(error: unknown): WidgetFailure {
   return { _tag: 'unknown' }
 }
 
-export function widgetFailureCopy(error: unknown): WidgetFailureCopy {
-  return WIDGET_FAILURE_COPY[toWidgetFailure(error)._tag]
+/** The copy for a caught value. Pass `copy` to use a site's reworded failures. */
+export function widgetFailureCopy(error: unknown, copy: Readonly<Record<WidgetFailureTag, WidgetFailureCopy>> = WIDGET_FAILURE_COPY): WidgetFailureCopy {
+  return copy[toWidgetFailure(error)._tag]
 }

package/build/design-system.ts

@@ -1,7 +1,9 @@
 import type { ModuleOptions as IconModuleOptions } from '@nuxt/icon'
 import type { NuxtOptions } from 'nuxt/schema'
 import type { IconSet } from '../shared/icons'
-import { addTemplate, defineNuxtModule } from 'nuxt/kit'
+import { existsSync, mkdirSync, realpathSync, writeFileSync } from 'node:fs'
+import { defineNuxtModule } from 'nuxt/kit'
+import { dirname, resolve } from 'pathe'
 import { iconAliasMap, iconBundleList, parseIconSet } from '../shared/icons'
 import { externalLinkMarkerCss } from './external-links'
 
@@ -12,13 +14,12 @@ export interface DesignSystemOptions {
    */
   iconSet?: IconSet
   /**
-   * Load Nuxt SEO's Hubot Sans and Fira Code faces as global families, so
-   * every page preloads them. Defaults to false: a site sets its own families
-   * through `fonts.families` and the `--font-*` tokens. The layer's
-   * `modules:before` hook reads it, because @nuxt/fonts reads its families
-   * when it installs, which can come before this module's setup.
+   * Keep the layer's composables and utils in the app's auto-import scan, and
+   * so in `#imports`. Defaults to false: their names, such as a one-argument
+   * `formatNumber`, would clash with a site's own helpers. A site imports
+   * them by path instead. Nuxt SEO's private `layers/brand` turns it on.
    */
-  fonts?: boolean
+  autoImportUtils?: boolean
   /**
    * Hosts that count as this site. An absolute prose link to one of them gets
    * no external-link arrow. Defaults to none, so every absolute http(s) link
@@ -59,11 +60,46 @@ export default defineNuxtModule<DesignSystemOptions>({
     icon.clientBundle ??= {}
     icon.clientBundle.icons = [...new Set([...iconBundleList(iconSet), ...(icon.clientBundle.icons ?? [])])]
 
-    const externalLinks = addTemplate({
-      filename: 'design-system/external-links.css',
-      getContents: () => externalLinkMarkerCss(options.internalLinkHosts ?? []),
-      write: true,
+    // A plain file, not a Nuxt template. In dev, Nuxt links every
+    // `nuxt.options.css` entry the module graph has not loaded, matching by
+    // file path. The graph holds a template as a `virtual:nuxt:` id with no
+    // such path, so a template stylesheet was linked twice, the second copy
+    // after the site's own CSS. The CLI clears the build directory after
+    // modules load, so the file is written when the build starts.
+    const externalLinks = resolve(nuxt.options.buildDir, 'design-system/external-links.css')
+    nuxt.options.css.push(externalLinks)
+    nuxt.hook('build:before', () => {
+      mkdirSync(dirname(externalLinks), { recursive: true })
+      writeFileSync(externalLinks, externalLinkMarkerCss(options.internalLinkHosts ?? []))
     })
-    nuxt.options.css.push(externalLinks.dst)
+
+    // The layer's templates pass `aria-*` attributes and a few listeners to
+    // components through $attrs, and `app/component-attributes.d.ts` types
+    // them. A consumer's tsconfig excludes node_modules, so the declaration
+    // never reached its program and a TypeScript 7 native typecheck failed
+    // inside the layer's templates. A reference ignores that exclude.
+    nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ path: resolve(LAYER_ROOTS[0]!, 'app/component-attributes.d.ts') })
+    })
+
+    // Nuxt scans every layer's composables/ and utils/ for auto-imports, and a
+    // layer's `imports.scan: false` would merge into the app and stop its scan
+    // too. So the layer removes only its own directories here.
+    if (!options.autoImportUtils) {
+      nuxt.hook('imports:dirs', (dirs) => {
+        const kept = dirs.filter(dir => !isLayerPath(dir))
+        dirs.splice(0, dirs.length, ...kept)
+      })
+    }
   },
 })
+
+const LAYER_ROOTS = [...new Set([resolve(import.meta.dirname, '..'), resolve(realpathSync(resolve(import.meta.dirname, '..')))])]
+
+/** Whether a directory sits inside this layer, through a symlink or not. */
+export function isLayerPath(dir: string): boolean {
+  const paths = [resolve(dir)]
+  if (existsSync(dir))
+    paths.push(resolve(realpathSync(dir)))
+  return paths.some(path => LAYER_ROOTS.some(root => path === root || path.startsWith(`${root}/`)))
+}

package/css/global.css

@@ -4,7 +4,7 @@
 /* Type families. A site sets its own in an unlayered `:root` rule; OG images
    read them from the Tailwind entry instead (README, Brand seams). `--font-title`
    carries page titles (`.text-title`, `font-title`) and defaults to the display
-   family. The faces load only with `designSystem: { fonts: true }`. */
+   family. The layer registers no faces; a site loads its own (README). */
 @theme {
   --font-sans: 'Hubot Sans', sans-serif;
   --font-display: 'Hubot Sans', sans-serif;
@@ -575,7 +575,13 @@
   touch-action: manipulation;
 }
 
-.light {
+/* Surface seam. The mode and dashboard blocks below sit in `:where()`, so
+   they carry no specificity: a site's plain `:root` rule sets any surface
+   token in both modes, and its `.dark` rule sets dark, whichever stylesheet
+   loads last. Nuxt UI's own defaults sit in `@layer theme` and still lose to
+   these. Source order decides between these blocks, so the dashboard blocks
+   stay after the mode blocks. */
+:where(.light) {
   color-scheme: light;
   /* Bind surfaces to `--ui-color-neutral-*` (Nuxt UI's neutral alias → the
      hue-292 slate override) rather than stock `--color-neutral-*` (cold hue
@@ -609,7 +615,7 @@
   --nuxtseo-brand-tile-ink: oklch(98.4% 0.005 292);
 }
 
-.dark {
+:where(.dark) {
   color-scheme: dark;
   /* Tier ladder in dark: 8.5 → 15 → 21 → 30. The old 7.5 → 13 gap read flat
      on large surfaces; the new deltas give nav / body / elevated cards a
@@ -1193,7 +1199,7 @@ textarea {
 /* Dashboard mauve palette: editorial monochrome tone reserved for /pro/dashboard.
    Marketing/docs pages stay on the warm-slate neutral (hue 285). A site keeps
    its own ramp here by setting `--ui-dashboard-neutral-<step>` (README). */
-.dashboard-theme {
+:where(.dashboard-theme) {
   --ui-color-neutral-50: var(--ui-dashboard-neutral-50, var(--color-mauve-50, oklch(98.5% 0 0)));
   --ui-color-neutral-100: var(--ui-dashboard-neutral-100, var(--color-mauve-100, oklch(96.7% 0.001 286.375)));
   --ui-color-neutral-200: var(--ui-dashboard-neutral-200, var(--color-mauve-200, oklch(92% 0.004 286.32)));
@@ -1207,7 +1213,7 @@ textarea {
   --ui-color-neutral-950: var(--ui-dashboard-neutral-950, var(--color-mauve-950, oklch(14.1% 0.005 285.823)));
 }
 
-.light.dashboard-theme {
+:where(.light.dashboard-theme) {
   background-color: var(--ui-bg);
   --ui-bg: #fff;
   --ui-bg-muted: var(--ui-color-neutral-50);
@@ -1226,7 +1232,7 @@ textarea {
   --ui-border-inverted: var(--ui-color-neutral-900);
 }
 
-.dark.dashboard-theme {
+:where(.dark.dashboard-theme) {
   background-color: var(--ui-bg);
   --color-mauve-50: oklch(98.5% 0.002 326);
   --color-mauve-100: oklch(96.4% 0.005 325.6);
@@ -1356,7 +1362,7 @@ textarea {
   mask-image: linear-gradient(to bottom, black 0%, transparent 86%);
   -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 86%);
 }
-.ui-atmosphere[data-geometry="bloom"] {
+.ui-atmosphere[data-geometry="bloom"][data-bloom-mask] {
   mask-image: radial-gradient(58% 50% at 50% 38%, black, transparent 76%);
   -webkit-mask-image: radial-gradient(58% 50% at 50% 38%, black, transparent 76%);
 }
@@ -1366,7 +1372,8 @@ textarea {
 }
 /* veil = full scrim tint over a faded preview; no mask, softer by default */
 
-/* grain — baked in, static (soft-light so it reads as tooth, not dirt) */
+/* grain — opt in through `grain` or `designSystem.atmosphere.grain`; static,
+   soft-light so it reads as tooth, not dirt */
 .ui-atmosphere[data-grain]::after {
   content: "";
   position: absolute;
@@ -1477,10 +1484,40 @@ textarea {
    need primary/success/current keep overriding it (an unlayered rule would beat
    the utility and silently force muted). */
 @layer components {
+  /* Type seam: a site sets `--ui-label-size`, `--ui-label-weight`,
+     `--ui-label-case` and `--ui-label-tracking` at `:root` to retune every
+     label at once (README, Brand seams). Unset, each keeps this spec. */
   .text-label {
-    @apply text-[10px] font-semibold uppercase tracking-wider;
+    font-size: var(--ui-label-size, 10px);
+    font-weight: var(--ui-label-weight, 600);
+    text-transform: var(--ui-label-case, uppercase);
+    letter-spacing: var(--ui-label-tracking, 0.05em);
     color: var(--ui-text-muted);
   }
+
+  /* Table type seam. Cells read `--ui-table-cell-size` and
+     `--ui-table-cell-leading`; header labels read `--ui-table-head-size`, then
+     the label size. Declared after `.text-label`, so a header carrying both
+     takes the table size. Unset leading inherits, as the old rules did. */
+  .ui-table-cell {
+    font-size: var(--ui-table-cell-size, var(--text-xs));
+    line-height: var(--ui-table-cell-leading, var(--text-xs--line-height));
+  }
+
+  .ui-table-head {
+    font-size: var(--ui-table-head-size, var(--ui-label-size, 10px));
+    line-height: var(--ui-table-head-leading);
+  }
+
+  /* `UiTrend` sizes `xs`; `2xs` sits below, unlayered like `.text-mini`. */
+  .ui-trend-xs {
+    font-size: var(--ui-trend-xs-size, var(--text-xs));
+    line-height: var(--ui-trend-xs-leading, var(--text-xs--line-height));
+  }
+}
+
+.ui-trend-2xs {
+  font-size: var(--ui-trend-2xs-size, 10px);
 }
 
 /* Micro label — the 9px tier below .text-label, for the tiniest tags (table

package/nuxt.config.ts

@@ -1,9 +1,5 @@
-import type { NuxtOptions } from 'nuxt/schema'
-import type { DesignSystemOptions } from './build/design-system'
 import { defineNuxtConfig } from 'nuxt/config'
-import { useNuxt } from 'nuxt/kit'
 import { join } from 'pathe'
-import { withNuxtSeoFonts } from './build/fonts'
 import { UI_ICON_SLOTS } from './shared/icons/ui-slots'
 
 const currentDir = import.meta.dirname
@@ -84,28 +80,14 @@ export default defineNuxtConfig({
     ],
   },
 
-  // The type stack is a brand seam. The layer self-hosts Nuxt SEO's Hubot Sans
-  // and Fira Code in public/fonts/, and the `modules:before` hook below
-  // registers them only for a site that sets `designSystem: { fonts: true }`.
+  // The type stack is a brand seam. The layer ships and registers no faces, so
+  // a site sets its own through `fonts.families` and the `--font-*` tokens.
   fonts: {
     // CSS variable discovery cannot add another face, so avoid parsing every
     // component style during each Vite build.
     processCSSVariables: false,
   },
 
-  hooks: {
-    // @nuxt/fonts reads its families when it installs, and an app that lists
-    // @nuxt/fonts itself can install it before this layer's own module. This
-    // hook runs before any module installs.
-    'modules:before': function () {
-      const options = useNuxt().options as NuxtOptions & { designSystem?: DesignSystemOptions }
-      // `false` turns @nuxt/fonts off, so there is nothing to register.
-      if (options.fonts === false)
-        return
-      options.fonts.families = withNuxtSeoFonts(options.fonts.families, options.designSystem?.fonts)
-    },
-  },
-
   vite: {
     optimizeDeps: {
       // The layer's tables run @tanstack/vue-table 9, and @nuxt/ui's UTable