@nuxtseo/design-system 0.1.1 → 0.1.2

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxtseo/design-system",
   "type": "module",
-  "version": "0.1.1",
-  "description": "Nuxt SEO design system layer: UI primitives, tokens, fonts, motion, and chart helpers. Extend it from a Nuxt app.",
+  "version": "0.1.2",
+  "description": "Nuxt SEO design system layer: UI primitives, tokens, motion, and chart helpers. Extend it from a Nuxt app.",
   "license": "MIT",
   "homepage": "https://nuxtseo.com",
   "repository": {
@@ -37,13 +37,14 @@
     "build",
     "css",
     "nuxt.config.ts",
-    "public",
     "server",
     "shared",
     "types"
   ],
   "peerDependencies": {
+    "@nuxt/scripts": "^1.3.10 || ^2.0.0-beta.14",
     "@nuxt/ui": "^4.11.1",
+    "@vueuse/core": "^14.0.0 || ^15.0.0",
     "motion-v": "^2.4.2",
     "nuxt": "^4.6.0",
     "tailwindcss": "^4.3.0",
@@ -62,19 +63,19 @@
     "@nuxt/fonts": "^1.0.1",
     "@nuxt/icon": "^2.5.1",
     "@nuxt/image": "^2.1.0",
-    "@nuxt/scripts": "^2.0.0-beta.14",
     "@tanstack/table-core": "^9.2.4",
     "@tanstack/vue-table": "^9.2.4",
     "@unovis/ts": "^1.6.7",
     "@unovis/vue": "^1.6.7",
-    "@vueuse/core": "^14.0.0",
     "nuxtseo-shared": "^6.0.2",
     "pathe": "^2.0.3",
     "rangi": "^2.2.0",
     "reka-ui": "^2.10.4"
   },
   "devDependencies": {
+    "@nuxt/scripts": "^2.0.0-beta.14",
     "@nuxt/ui": "^4.11.1",
+    "@vueuse/core": "^14.4.0",
     "ai": "^7.0.122",
     "motion-v": "2.4.2",
     "nuxt": "4.6.1",

package/build/fonts.ts

@@ -1,39 +0,0 @@
-import type { FontFamilyManualOverride } from '@nuxt/fonts'
-
-/**
- * Nuxt SEO's own faces, self-hosted from this layer's `public/fonts/`. Builds
- * never download them from a provider, so an app build does not depend on
- * Google Fonts availability. Hubot Sans keeps its variable weight and width
- * axes for the design tokens.
- *
- * A site loads them only when it sets `designSystem: { fonts: true }`. A
- * global family is preloaded on every page, so a site with its own type stack
- * would otherwise pay for two faces it never renders.
- */
-export const NUXT_SEO_FONT_FAMILIES: readonly FontFamilyManualOverride[] = [
-  {
-    name: 'Hubot Sans',
-    src: '/fonts/hubot-sans-var-latin.woff2',
-    weight: '200 900',
-    stretch: '75% 125%',
-    style: 'normal',
-    global: true,
-  },
-  {
-    name: 'Fira Code',
-    src: '/fonts/fira-code-var-latin.woff2',
-    weight: '400 500',
-    style: 'normal',
-    global: true,
-  },
-]
-
-/**
- * The font families @nuxt/fonts should register. With `enabled`, Nuxt SEO's
- * faces come first and the app's own families follow; without it, the app's
- * families pass through unchanged.
- */
-export function withNuxtSeoFonts<T>(families: readonly T[] | undefined, enabled: boolean | undefined): Array<T | FontFamilyManualOverride> {
-  const own = families ?? []
-  return enabled === true ? [...NUXT_SEO_FONT_FAMILIES, ...own] : [...own]
-}