@nuxtseo/design-system 0.1.0 → 0.1.1

package/README.md

@@ -15,7 +15,7 @@ Design system layer: design language extended by every app. It owns UI primitive
 
 **Depends on:** `nuxtseo-shared` (brand marks) and the published Nuxt modules in `package.json`. No workspace package.
 
-**Consumed by:** `apps/site`, `apps/pro`, `apps/admin`, `apps/brand-kit`, and outside sites through the [npm](https://npmjs.com) package `@nuxtseo/design-system`.
+**Consumed by:** `layers/brand`, which every Nuxt SEO app (`apps/site`, `apps/pro`, `apps/admin`, `apps/brand-kit`) extends in its place, and outside sites through the [npm](https://npmjs.com) package `@nuxtseo/design-system`.
 
 ## Rules
 
@@ -39,16 +39,20 @@ export default defineNuxtConfig({
 })
 ```
 
-- Peers: `nuxt` 4.6+, `vue` 3.5+, and `typescript` 5.8 to 6. The Vue SFC compiler resolves the layer's prop types through the TypeScript JS API, and TypeScript 7 has none.
+- Peers: `nuxt` 4.6+, `vue` 3.5+, `typescript` 5.8 to 6, `@nuxt/ui` 4.11+, `motion-v` 2.4+, `tailwindcss` 4.3+, and `zod` 4. The Vue SFC compiler resolves the layer's prop types through the TypeScript JS API, and TypeScript 7 has none.
+- The layer shares your copy of each peer, so the app runs one Nuxt UI, one Tailwind, one motion-v context, and one zod. pnpm and npm install a missing peer for you. You need no `overrides` for the layer.
 - If [pnpm](https://pnpm.io) reports ignored build scripts, allow `esbuild` and `@parcel/watcher` under `allowBuilds` in `pnpm-workspace.yaml`.
-- Import components from `#components`. The layer turns auto-imports off.
+- Import components from `#components`. The layer turns auto-imports off, in Nitro too.
+- Write `app.config.ts` as a plain object. `defineAppConfig` is an auto-import, so the server bundle has no such function.
+- Import other modules by their path: `@nuxtseo/design-system/app/composables/formatting`. A directory with an `index.ts` imports by its name: `@nuxtseo/design-system/shared/icons`, `@nuxtseo/design-system/shared/contracts`, and `@nuxtseo/design-system/types`.
+- The layer ships no favicon and loads no fonts. Set both through the brand seams below.
 
 ### Overrides
 
 | What | How |
 | --- | --- |
 | Nuxt UI colours, slots, icons, toaster, favicon paths | `app.config.ts` in your app. It merges over the layer's `app/app.config.ts`. |
-| Tokens: colours, fonts, density, elevation | CSS custom properties in your own stylesheet, loaded after the layer's `css/global.css`. Override `--ui-*`, `--density-*`, and `--elevation-*`; never `--_depth-*`. |
+| Tokens: colours, fonts, density, elevation | CSS custom properties in your own stylesheet, loaded after the layer's `css/global.css`. Override `--ui-*`, `--font-*`, `--density-*`, and `--elevation-*`; never `--_depth-*` or `--_viz-*`. |
 | One instance | Props and slots on the component. |
 | Icon set, chart colours, icon colour roles | The brand seams below. |
 
@@ -77,12 +81,86 @@ export default defineNuxtConfig({
 })
 ```
 
-**Chart colours.** Every chart identity slot in `dataVizColors.ts` reads a `--ui-viz-<slot>` custom property: `clicks`, `impressions`, `ctr`, `position`, `sessions`, `users`, `pageviews`, `lcp`, `inp`, `cls`, `current`, `comparison`, `device-desktop`, `device-mobile`, `device-tablet`, `brand`, `non-brand`, `rank-1` to `rank-10`, `resource-document`, `resource-script`, `resource-stylesheet`, `resource-image`, `resource-font`, `category-1` to `category-5`, and `neutral`. The SVG paint, the `bg-viz-*` and `text-viz-*` classes, and the `/15` fills all follow it. Text classes use the same colour, so pick one that passes AA as text. Unset, light mode reads a deeper default for any slot whose stock hue falls under 3:1 on white; dark mode keeps the stock hue.
+**Favicon.** The layer's favicon plugin emits a theme-aware icon link and an Apple touch icon link from `favicon` in `app.config.ts`. Unset, it emits neither. Each link's MIME type follows the file extension, so an SVG declares `image/svg+xml`. A mode without its own path uses the other mode's path. The links carry `id: 'favicon'` and `id: 'apple-touch-icon'`.
+
+```ts
+// app.config.ts
+export default {
+  favicon: {
+    light: '/icon-light.svg',
+    dark: '/icon-dark.svg',
+    appleTouchLight: '/touch-icon.png',
+    appleTouchDark: '/touch-icon-dark.png',
+  },
+}
+```
+
+**Type.** Set `--font-sans`, `--font-display`, `--font-title`, and `--font-mono` in your stylesheet, and register the faces with `fonts.families`. `--font-title` carries page titles (`.text-title` and the `font-title` utility). Its default is the display family. The layer self-hosts Nuxt SEO's Hubot Sans and Fira Code but registers neither by default, so no page preloads them. To use them, opt in:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@nuxtseo/design-system'],
+  designSystem: { fonts: true },
+})
+```
+
+**Own-site links.** An absolute HTTP or HTTPS prose link gets an external-link arrow. List the hosts that count as your site, and links to them get none. Unset, the layer lists no host.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  designSystem: { internalLinkHosts: ['example.com', 'www.example.com'] },
+})
+```
+
+**OG images.** [nuxt-og-image](https://nuxtseo.com/docs/og-image) compiles OG images against one Tailwind entry: the `#tailwindcss` alias, or else the first CSS entry that imports Tailwind, which is the layer's. Runtime `:root` overrides never reach it. To give OG images your theme, write an entry that imports the layer's stylesheet and restates your theme values. Then point the alias at it. Browsers never load this file.
+
+```css
+/* app/assets/css/og-theme.css */
+@import '@nuxtseo/design-system/css/global.css';
+
+@theme {
+  --font-sans: 'DM Sans', system-ui, sans-serif;
+  --font-display: 'Poppins', system-ui, sans-serif;
+  --font-title: 'Poppins', system-ui, sans-serif;
+}
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  alias: { '#tailwindcss': fileURLToPath(new URL('./app/assets/css/og-theme.css', import.meta.url)) },
+})
+```
+
+**Text and dashboard neutrals.** Three light mode text tokens sit on Nuxt SEO's violet hue, off the neutral ramp. The dashboard (`.dashboard-theme`) swaps the neutral ramp to mauve. Set these properties to re-hue them; never override the selectors. Unset, each keeps Nuxt SEO's value.
+
+| Property | Sets |
+| --- | --- |
+| `--ui-light-text`, `--ui-light-text-dimmed`, `--ui-light-text-highlighted` | `--ui-text`, `--ui-text-dimmed`, `--ui-text-highlighted` in light mode |
+| `--ui-dashboard-neutral-50` to `--ui-dashboard-neutral-950` | The dashboard's neutral ramp, both modes |
+| `--ui-dashboard-light-text-dimmed` | Dashboard `--ui-text-dimmed`, light mode |
+| `--ui-dashboard-dark-text-dimmed`, `--ui-dashboard-dark-text-muted` | Dashboard `--ui-text-dimmed` and `--ui-text-muted`, dark mode |
+
+```css
+:root {
+  --ui-light-text: var(--color-olive-800);
+  --ui-dashboard-neutral-50: var(--color-olive-50);
+  /* and each step to 950 */
+}
+```
+
+A `var()` inside a custom property resolves on the element that declares it. So `:root { --ui-dashboard-dark-text-muted: var(--ui-color-neutral-400) }` reads the marketing ramp's 400 step. Name a fixed colour or a `--color-*` step instead.
+
+**Chart colours.** Every chart identity slot in `dataVizColors.ts` reads a `--ui-viz-<slot>` custom property: `clicks`, `impressions`, `ctr`, `position`, `sessions`, `users`, `pageviews`, `lcp`, `inp`, `cls`, `current`, `comparison`, `device-desktop`, `device-mobile`, `device-tablet`, `brand`, `non-brand`, `rank-1` to `rank-10`, `resource-document`, `resource-script`, `resource-stylesheet`, `resource-image`, `resource-font`, `category-1` to `category-5`, and `neutral`. The SVG paint, the `bg-viz-*` and `text-viz-*` classes, and the `/15` fills all follow it. Unset, light mode reads a deeper default for any slot whose stock hue falls under 3:1 on white; dark mode keeps the stock hue. Text classes use the mark colour unless `--ui-viz-<slot>-text` is set. If the mark colour fails AA as text, set it.
 
 ```css
 :root {
   --ui-viz-clicks: var(--ui-primary);
   --ui-viz-neutral: #94a3b8;
+  --ui-viz-comparison: #a3a292;
+  --ui-viz-comparison-text: #67713a;
 }
 ```
 
@@ -92,11 +170,13 @@ A palette `hex` field is a CSS colour, such as `var(--ui-viz-clicks, #3b82f6)`.
 
 ```ts
 // app.config.ts
-export default defineAppConfig({
+export default {
   designSystem: {
     iconColors: { lime: { bg: 'bg-lime-500/10', text: 'text-lime-500' } },
   },
-})
+}
 ```
 
+**Onboarding copy.** `UiOnboardingAnswers` takes an `intents` prop for the goal list and a `copy` prop for its strings: `roleQuestion`, `siteCountQuestion`, `seoExperienceQuestion`, `intentsQuestion`, `intentsHint`, `otherLabel`, and `otherPlaceholder`. Pass any of them. Unset keys keep the strings in `ONBOARDING_ANSWERS_COPY`. Onboarding Answers store the option ids, so the ids never change.
+
 **Motion.** The layer provides motion-v's `domAnimation` features to the whole app, `error.vue` included. A site needs no `<LazyMotion>` wrapper.

package/app/app.config.ts

@@ -1,3 +1,4 @@
+import type { AppFaviconConfig } from './utils/app-favicon'
 import type { IconColorClasses } from './utils/icon-color'
 import { UI_ICON_SLOTS } from '../shared/icons/ui-slots'
 
@@ -13,16 +14,11 @@ export default {
   designSystem: {
     iconColors: {} as Record<string, IconColorClasses>,
   },
-  // Theme-aware browser and installed-app brand marks. touch-icon(-dark).png are
-  // deliberately not named apple-touch-icon*.png: nuxt-seo-utils auto-generates a
-  // <link rel="apple-touch-icon"> for any public file matching that convention,
-  // which duplicated the reactive one this plugin already emits.
-  favicon: {
-    light: '/favicon-light.png',
-    dark: '/favicon-dark.png',
-    appleTouchLight: '/touch-icon.png',
-    appleTouchDark: '/touch-icon-dark.png',
-  },
+  // Theme-aware favicon and touch icon paths, read by plugins/favicon.ts. The
+  // layer ships no brand images, so every path is unset here and the plugin
+  // emits nothing until an app names its own files. The MIME type follows
+  // each file's extension.
+  favicon: {} as AppFaviconConfig,
   toaster: {
     position: 'bottom-right' as const,
     // Collapsed peek-deck that fans out on hover (Sonner/Linear). Read by UiToaster.

package/app/components/data/UiDataTableSection.vue

@@ -116,6 +116,7 @@ function errorText(value: unknown): string {
           type="search"
           class="w-full sm:w-56"
           :placeholder="searchPlaceholder"
+          icon="search"
           autocomplete="off"
           size="sm"
           :ui="{ base: 'min-h-11 transition-[width] duration-200 focus-within:w-72 sm:min-h-0' }"

package/app/components/element/UiOnboardingAnswers.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { OnboardingAnswersDraft } from './onboarding-answers'
+import type { OnboardingAnswersCopy, OnboardingAnswersDraft } from './onboarding-answers'
 import type { OnboardingIntent } from './onboarding-intents'
-import { useId } from 'vue'
+import { computed, useId } from 'vue'
 import { UiIcon, UTextarea } from '#components'
 import {
+  ONBOARDING_ANSWERS_COPY,
   ONBOARDING_OTHER_MAX_LENGTH,
-  ONBOARDING_QUESTIONS,
   ONBOARDING_ROLES,
   ONBOARDING_SEO_EXPERIENCE,
   ONBOARDING_SITE_COUNTS,
@@ -18,27 +18,29 @@ import { ONBOARDING_INTENTS } from './onboarding-intents'
 // the live teams/create wizard and the brand-kit showcase both v-model the
 // draft and decide when to save it.
 //
-// The goals list and its question name the product, so a site that extends this
-// layer passes its own. The other questions and their ids are shared.
+// The goals list and the copy name the product, so a site that extends this
+// layer passes its own `intents` and any `copy` keys it rewords. The option
+// ids are shared and stored, so they never change.
 const {
   intents = ONBOARDING_INTENTS,
-  intentsQuestion = ONBOARDING_QUESTIONS.intents,
+  copy: copyOverrides = {},
 } = defineProps<{
   intents?: readonly OnboardingIntent[]
-  intentsQuestion?: string
+  copy?: Partial<OnboardingAnswersCopy>
 }>()
+const copy = computed<OnboardingAnswersCopy>(() => ({ ...ONBOARDING_ANSWERS_COPY, ...copyOverrides }))
 const answers = defineModel<OnboardingAnswersDraft>({ required: true })
 
 const id = useId()
 const otherId = `${id}-other`
 
-const singleQuestions = [
-  { key: 'role', question: ONBOARDING_QUESTIONS.role, options: ONBOARDING_ROLES },
-  { key: 'siteCount', question: ONBOARDING_QUESTIONS.siteCount, options: ONBOARDING_SITE_COUNTS },
-  { key: 'seoExperience', question: ONBOARDING_QUESTIONS.seoExperience, options: ONBOARDING_SEO_EXPERIENCE },
-] as const
+const singleQuestions = computed(() => [
+  { key: 'role', question: copy.value.roleQuestion, options: ONBOARDING_ROLES },
+  { key: 'siteCount', question: copy.value.siteCountQuestion, options: ONBOARDING_SITE_COUNTS },
+  { key: 'seoExperience', question: copy.value.seoExperienceQuestion, options: ONBOARDING_SEO_EXPERIENCE },
+] as const)
 
-type SingleKey = (typeof singleQuestions)[number]['key']
+type SingleKey = 'role' | 'siteCount' | 'seoExperience'
 
 function pick(key: SingleKey, value: string) {
   answers.value = { ...answers.value, [key]: answers.value[key] === value ? undefined : value }
@@ -82,10 +84,10 @@ const restClass = 'border-accented bg-default/80 text-default hover:border-prima
 
     <fieldset class="space-y-2.5">
       <legend class="text-sm font-medium text-highlighted">
-        {{ intentsQuestion }}
+        {{ copy.intentsQuestion }}
       </legend>
       <p class="text-xs text-muted">
-        Pick any that fit.
+        {{ copy.intentsHint }}
       </p>
       <div class="flex flex-wrap gap-2">
         <button
@@ -107,7 +109,7 @@ const restClass = 'border-accented bg-default/80 text-default hover:border-prima
       </div>
       <div class="space-y-1.5 pt-1">
         <label :for="otherId" class="text-xs text-muted">
-          Anything else? Optional.
+          {{ copy.otherLabel }}
         </label>
         <UTextarea
           :id="otherId"
@@ -115,7 +117,7 @@ const restClass = 'border-accented bg-default/80 text-default hover:border-prima
           :maxlength="ONBOARDING_OTHER_MAX_LENGTH"
           :rows="2"
           autoresize
-          placeholder="Tell us what you're after"
+          :placeholder="copy.otherPlaceholder"
           class="w-full"
           @update:model-value="setOther(String($event ?? ''))"
         />

package/app/components/element/UiSelect.vue

@@ -18,7 +18,7 @@ import { USelect } from '#components'
 defineOptions({ inheritAttrs: false })
 
 const props = defineProps<Props>()
-const emit = defineEmits<SelectEmits<T, VK, M>>()
+const emit = defineEmits<Omit<SelectEmits<T, VK, M>, 'update:modelValue'> & { 'update:modelValue': [value: ModelValue] }>()
 /**
  * `open`, `defaultOpen` and `portal` are omitted deliberately, and dropping any
  * of them from this list breaks every select in the app.
@@ -37,13 +37,26 @@ const emit = defineEmits<SelectEmits<T, VK, M>>()
  * No caller passes any of the three, so omitting them costs nothing.
  */
 type Props = Omit<SelectProps<T, VK, M>, 'defaultValue' | 'modelModifiers' | 'open' | 'defaultOpen' | 'portal'>
+/**
+ * The value USelect emits is always a picked item, so the model never emits
+ * `undefined` and a caller may v-model a ref that never holds it. The type is
+ * read from SelectProps, not rebuilt from Nuxt UI's private ExcludeItem
+ * generic. Inside this generic component TypeScript 7.1 cannot prove that
+ * USelect's own emitted type matches it, so `updateModel` takes the value
+ * untyped and the caller-facing emit carries the type.
+ */
+type ModelValue = NonNullable<SelectProps<T, VK, M>['modelValue']>
+
+function updateModel(value: unknown) {
+  emit('update:modelValue', value as ModelValue)
+}
 </script>
 
 <template>
   <!-- @vue-generic {T, VK, M} -->
   <USelect
     v-bind="{ ...props, ...$attrs }"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:model-value="updateModel"
     @blur="emit('blur', $event)"
     @change="emit('change', $event)"
     @focus="emit('focus', $event)"

package/app/components/element/onboarding-answers.ts

@@ -44,6 +44,31 @@ export const ONBOARDING_QUESTIONS = {
   intents: 'What do you want to do with Nuxt SEO Pro?',
 } as const
 
+/**
+ * Every string `UiOnboardingAnswers` renders besides the option labels. COPY.md
+ * (Onboarding About you) owns the defaults. A site that extends the layer
+ * passes its own through the component's `copy` prop, one key or all of them.
+ */
+export interface OnboardingAnswersCopy {
+  roleQuestion: string
+  siteCountQuestion: string
+  seoExperienceQuestion: string
+  intentsQuestion: string
+  intentsHint: string
+  otherLabel: string
+  otherPlaceholder: string
+}
+
+export const ONBOARDING_ANSWERS_COPY: Readonly<OnboardingAnswersCopy> = {
+  roleQuestion: ONBOARDING_QUESTIONS.role,
+  siteCountQuestion: ONBOARDING_QUESTIONS.siteCount,
+  seoExperienceQuestion: ONBOARDING_QUESTIONS.seoExperience,
+  intentsQuestion: ONBOARDING_QUESTIONS.intents,
+  intentsHint: 'Pick any that fit.',
+  otherLabel: 'Anything else? Optional.',
+  otherPlaceholder: 'Tell us what you\'re after',
+}
+
 /** Label lookup for stored ids. An unknown id renders as itself. */
 export function onboardingAnswerLabel(options: readonly { id: string, label: string }[], id: string): string {
   return options.find(option => option.id === id)?.label ?? id

package/app/plugins/favicon.ts

@@ -1,29 +1,15 @@
 import { defineNuxtPlugin, useAppConfig, useHead } from 'nuxt/app'
 import { useColorMode } from '#imports'
+import { appFaviconLinks } from '../utils/app-favicon'
 
+// Emits the favicon and touch icon links that app.config's `favicon` names,
+// and swaps them with the colour mode. The layer ships no brand images, so an
+// app that sets no `favicon` gets no links from here.
 export default defineNuxtPlugin(() => {
   const { favicon } = useAppConfig()
   const colorMode = useColorMode()
 
-  useHead(() => {
-    const dark = colorMode.value === 'dark'
-
-    return {
-      link: [
-        {
-          id: 'favicon',
-          rel: 'icon',
-          type: 'image/png',
-          sizes: '32x32',
-          href: dark ? favicon.dark : favicon.light,
-        },
-        {
-          id: 'apple-touch-icon',
-          rel: 'apple-touch-icon',
-          sizes: '180x180',
-          href: dark ? favicon.appleTouchDark : favicon.appleTouchLight,
-        },
-      ],
-    }
-  })
+  useHead(() => ({
+    link: appFaviconLinks(favicon, colorMode.value === 'dark'),
+  }))
 })

package/app/utils/app-favicon.ts

@@ -0,0 +1,64 @@
+/**
+ * The app's own theme-aware favicon and touch icon, set under `favicon` in
+ * app.config. Every path is optional: the layer ships no brand images, so an
+ * unset path emits no link. A mode with no path of its own uses the other
+ * mode's path.
+ */
+export interface AppFaviconConfig {
+  light?: string
+  dark?: string
+  appleTouchLight?: string
+  appleTouchDark?: string
+}
+
+export type AppFaviconLink
+  = { id: 'favicon', rel: 'icon', href: string, type?: string, sizes?: string }
+    | { id: 'apple-touch-icon', rel: 'apple-touch-icon', href: string, sizes: string }
+
+const MIME_BY_EXTENSION: Readonly<Record<string, string>> = {
+  avif: 'image/avif',
+  gif: 'image/gif',
+  ico: 'image/x-icon',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  webp: 'image/webp',
+}
+
+/** The MIME type a favicon path declares, read from its extension. Undefined for an unknown extension. */
+export function faviconMimeType(href: string): string | undefined {
+  const path = href.split(/[?#]/, 1)[0] ?? ''
+  const extension = /\.([a-z0-9]+)$/i.exec(path)?.[1]?.toLowerCase()
+  return extension === undefined ? undefined : MIME_BY_EXTENSION[extension]
+}
+
+function pick(dark: boolean, light: string | undefined, darkPath: string | undefined): string | undefined {
+  return dark ? (darkPath ?? light) : (light ?? darkPath)
+}
+
+function iconSizes(type: string | undefined): string | undefined {
+  if (type === 'image/svg+xml')
+    return 'any'
+  if (type === 'image/x-icon')
+    return undefined
+  return '32x32'
+}
+
+/**
+ * The head links for the app's favicon in one colour mode. The ids let an app
+ * replace either link with its own `useHead` entry.
+ */
+export function appFaviconLinks(config: AppFaviconConfig | undefined, dark: boolean): AppFaviconLink[] {
+  const links: AppFaviconLink[] = []
+  const icon = pick(dark, config?.light, config?.dark)
+  if (icon !== undefined) {
+    const type = faviconMimeType(icon)
+    const sizes = iconSizes(type)
+    links.push({ id: 'favicon', rel: 'icon', ...(type ? { type } : {}), ...(sizes ? { sizes } : {}), href: icon })
+  }
+  const touch = pick(dark, config?.appleTouchLight, config?.appleTouchDark)
+  if (touch !== undefined)
+    links.push({ id: 'apple-touch-icon', rel: 'apple-touch-icon', sizes: '180x180', href: touch })
+  return links
+}

package/build/design-system.ts

@@ -1,8 +1,9 @@
 import type { ModuleOptions as IconModuleOptions } from '@nuxt/icon'
 import type { NuxtOptions } from 'nuxt/schema'
 import type { IconSet } from '../shared/icons'
-import { defineNuxtModule } from 'nuxt/kit'
+import { addTemplate, defineNuxtModule } from 'nuxt/kit'
 import { iconAliasMap, iconBundleList, parseIconSet } from '../shared/icons'
+import { externalLinkMarkerCss } from './external-links'
 
 export interface DesignSystemOptions {
   /**
@@ -10,6 +11,20 @@ export interface DesignSystemOptions {
    * Install the matching `@iconify-json/<set>` collection in the app.
    */
   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.
+   */
+  fonts?: 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
+   * is marked. Matches a substring of the href after `//`, so list `www.` too.
+   */
+  internalLinkHosts?: string[]
 }
 
 /**
@@ -43,5 +58,12 @@ export default defineNuxtModule<DesignSystemOptions>({
     icon.aliases = { ...iconAliasMap(iconSet), ...icon.aliases }
     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,
+    })
+    nuxt.options.css.push(externalLinks.dst)
   },
 })

package/build/external-links.ts

@@ -0,0 +1,38 @@
+/**
+ * The external-link arrow on outbound prose links. Only an absolute http(s)
+ * link that leaves the site gets it; a relative link never matches, and a
+ * link around an image is excluded because the arrow would hang off the
+ * corner of the figure.
+ *
+ * Which hosts count as this site is a brand choice, so the rules are built
+ * from `designSystem.internalLinkHosts`. A CSS custom property cannot feed an
+ * attribute selector, so the hosts have to reach the selector at build time.
+ *
+ * The marker is a background on a pseudo-element whose only content is a
+ * no-break space: the NBSP glues the arrow to the last word, so it can never
+ * orphan onto a line of its own, and there is no text for a screen reader to
+ * announce. The mask resolves `currentColor` against the image's own initial
+ * colour, which is opaque black, so the arrow always paints in the link's
+ * colour and the CSS holds no colour of its own.
+ */
+export function externalLinkMarkerCss(internalHosts: readonly string[]): string {
+  const own = internalHosts
+    .map(host => `:not([href*="//${host.replace(/["\\]/g, '\\$&')}"])`)
+    .join('')
+  const link = `a.prose-link[href^="http"]${own}:not(:has(img))`
+  return `${link}::after {
+  content: '\\00a0';
+  padding-inline-end: 0.72em;
+  background-color: currentcolor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: right center;
+  mask-size: 0.72em 0.72em;
+  opacity: 0.65;
+  vertical-align: baseline;
+}
+${link}:hover::after {
+  opacity: 1;
+}
+`
+}

package/build/fonts.ts

@@ -0,0 +1,39 @@
+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]
+}

package/css/global.css

@@ -1,9 +1,14 @@
 @import 'tailwindcss';
 @import '@nuxt/ui';
 
+/* 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 }`. */
 @theme {
   --font-sans: 'Hubot Sans', sans-serif;
   --font-display: 'Hubot Sans', sans-serif;
+  --font-title: 'Hubot Sans', sans-serif;
   --font-mono: 'Fira Code', monospace;
 }
 
@@ -271,11 +276,40 @@
   --color-viz-resource-image: var(--ui-viz-resource-image, var(--_viz-resource-image, var(--color-cyan-500)));
   --color-viz-resource-font: var(--ui-viz-resource-font, var(--color-pink-500));
 
-  --text-color-viz-inp: var(--ui-viz-inp, var(--ui-text-warning));
-  --text-color-viz-device-tablet: var(--ui-viz-device-tablet, var(--ui-text-warning));
-  --text-color-viz-rank-7: var(--ui-viz-rank-7, var(--ui-text-warning));
-  --text-color-viz-current: var(--ui-viz-current, var(--_viz-current-text));
-  --text-color-viz-comparison: var(--ui-viz-comparison, var(--_viz-comparison-text));
+  /* Text side. `--ui-viz-<slot>-text` recolours only the `text-viz-<slot>`
+     class, for a mark hue that fails AA as text; unset, text follows the mark. */
+  --text-color-viz-clicks: var(--ui-viz-clicks-text, var(--ui-viz-clicks, var(--color-blue-500)));
+  --text-color-viz-impressions: var(--ui-viz-impressions-text, var(--ui-viz-impressions, var(--color-purple-500)));
+  --text-color-viz-ctr: var(--ui-viz-ctr-text, var(--ui-viz-ctr, var(--_viz-ctr, var(--color-emerald-500))));
+  --text-color-viz-position: var(--ui-viz-position-text, var(--ui-viz-position, var(--_viz-position, var(--color-orange-500))));
+  --text-color-viz-sessions: var(--ui-viz-sessions-text, var(--ui-viz-sessions, var(--color-blue-500)));
+  --text-color-viz-users: var(--ui-viz-users-text, var(--ui-viz-users, var(--_viz-users, var(--color-cyan-500))));
+  --text-color-viz-pageviews: var(--ui-viz-pageviews-text, var(--ui-viz-pageviews, var(--color-purple-500)));
+  --text-color-viz-lcp: var(--ui-viz-lcp-text, var(--ui-viz-lcp, var(--color-blue-500)));
+  --text-color-viz-inp: var(--ui-viz-inp-text, var(--ui-viz-inp, var(--ui-text-warning)));
+  --text-color-viz-cls: var(--ui-viz-cls-text, var(--ui-viz-cls, var(--color-purple-500)));
+  --text-color-viz-current: var(--ui-viz-current-text, var(--ui-viz-current, var(--_viz-current-text)));
+  --text-color-viz-comparison: var(--ui-viz-comparison-text, var(--ui-viz-comparison, var(--_viz-comparison-text)));
+  --text-color-viz-device-desktop: var(--ui-viz-device-desktop-text, var(--ui-viz-device-desktop, var(--_viz-device-desktop, var(--color-blue-400))));
+  --text-color-viz-device-mobile: var(--ui-viz-device-mobile-text, var(--ui-viz-device-mobile, var(--_viz-device-mobile, var(--color-green-400))));
+  --text-color-viz-device-tablet: var(--ui-viz-device-tablet-text, var(--ui-viz-device-tablet, var(--ui-text-warning)));
+  --text-color-viz-brand: var(--ui-viz-brand-text, var(--ui-viz-brand, var(--color-violet-500)));
+  --text-color-viz-non-brand: var(--ui-viz-non-brand-text, var(--ui-viz-non-brand, var(--_viz-non-brand, var(--color-emerald-500))));
+  --text-color-viz-rank-1: var(--ui-viz-rank-1-text, var(--ui-viz-rank-1, var(--color-blue-500)));
+  --text-color-viz-rank-2: var(--ui-viz-rank-2-text, var(--ui-viz-rank-2, var(--color-purple-500)));
+  --text-color-viz-rank-3: var(--ui-viz-rank-3-text, var(--ui-viz-rank-3, var(--_viz-rank-3, var(--color-emerald-400))));
+  --text-color-viz-rank-4: var(--ui-viz-rank-4-text, var(--ui-viz-rank-4, var(--_viz-rank-4, var(--color-orange-500))));
+  --text-color-viz-rank-5: var(--ui-viz-rank-5-text, var(--ui-viz-rank-5, var(--_viz-rank-5, var(--color-cyan-500))));
+  --text-color-viz-rank-6: var(--ui-viz-rank-6-text, var(--ui-viz-rank-6, var(--color-pink-500)));
+  --text-color-viz-rank-7: var(--ui-viz-rank-7-text, var(--ui-viz-rank-7, var(--ui-text-warning)));
+  --text-color-viz-rank-8: var(--ui-viz-rank-8-text, var(--ui-viz-rank-8, var(--color-indigo-400)));
+  --text-color-viz-rank-9: var(--ui-viz-rank-9-text, var(--ui-viz-rank-9, var(--_viz-rank-9, var(--color-teal-400))));
+  --text-color-viz-rank-10: var(--ui-viz-rank-10-text, var(--ui-viz-rank-10, var(--_viz-rank-10, var(--color-rose-400))));
+  --text-color-viz-resource-document: var(--ui-viz-resource-document-text, var(--ui-viz-resource-document, var(--color-blue-500)));
+  --text-color-viz-resource-script: var(--ui-viz-resource-script-text, var(--ui-viz-resource-script, var(--_viz-resource-script, var(--color-orange-500))));
+  --text-color-viz-resource-stylesheet: var(--ui-viz-resource-stylesheet-text, var(--ui-viz-resource-stylesheet, var(--color-purple-500)));
+  --text-color-viz-resource-image: var(--ui-viz-resource-image-text, var(--ui-viz-resource-image, var(--_viz-resource-image, var(--color-cyan-500))));
+  --text-color-viz-resource-font: var(--ui-viz-resource-font-text, var(--ui-viz-resource-font, var(--color-pink-500)));
 }
 
 :root {
@@ -552,11 +586,13 @@
   --ui-bg-elevated: var(--ui-color-neutral-100);
   --ui-bg-accented: var(--ui-color-neutral-200);
   --ui-bg-inverted: var(--ui-color-neutral-900);
-  --ui-text-dimmed: oklch(47.5% 0.052 292);
+  /* Text seam. These three sit on Nuxt SEO's violet hue, off the neutral
+     ramp; a site re-hues them by setting `--ui-light-text*` (README). */
+  --ui-text-dimmed: var(--ui-light-text-dimmed, oklch(47.5% 0.052 292));
   --ui-text-muted: var(--ui-color-neutral-600);
   --ui-text-toned: var(--ui-color-neutral-700);
-  --ui-text: oklch(37% 0.044 285);
-  --ui-text-highlighted: oklch(21% 0.042 285);
+  --ui-text: var(--ui-light-text, oklch(37% 0.044 285));
+  --ui-text-highlighted: var(--ui-light-text-highlighted, oklch(21% 0.042 285));
   --ui-text-inverted: #fff;
   --ui-border: var(--ui-color-neutral-200);
   --ui-border-muted: var(--ui-color-neutral-100);
@@ -1155,19 +1191,20 @@ textarea {
 .section-accent-sky { @apply bg-sky-50 dark:bg-sky-500/5 border-sky-200/50 dark:border-sky-500/10; }
 
 /* Dashboard mauve palette: editorial monochrome tone reserved for /pro/dashboard.
-   Marketing/docs pages stay on the warm-slate neutral (hue 285). */
+   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 {
-  --ui-color-neutral-50: var(--color-mauve-50, oklch(98.5% 0 0));
-  --ui-color-neutral-100: var(--color-mauve-100, oklch(96.7% 0.001 286.375));
-  --ui-color-neutral-200: var(--color-mauve-200, oklch(92% 0.004 286.32));
-  --ui-color-neutral-300: var(--color-mauve-300, oklch(87.1% 0.006 286.286));
-  --ui-color-neutral-400: var(--color-mauve-400, oklch(70.5% 0.015 286.067));
-  --ui-color-neutral-500: var(--color-mauve-500, oklch(55.2% 0.016 285.938));
-  --ui-color-neutral-600: var(--color-mauve-600, oklch(44.2% 0.017 285.786));
-  --ui-color-neutral-700: var(--color-mauve-700, oklch(37.4% 0.016 285.822));
-  --ui-color-neutral-800: var(--color-mauve-800, oklch(27.4% 0.006 286.033));
-  --ui-color-neutral-900: var(--color-mauve-900, oklch(21% 0.006 285.885));
-  --ui-color-neutral-950: var(--color-mauve-950, oklch(14.1% 0.005 285.823));
+  --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)));
+  --ui-color-neutral-300: var(--ui-dashboard-neutral-300, var(--color-mauve-300, oklch(87.1% 0.006 286.286)));
+  --ui-color-neutral-400: var(--ui-dashboard-neutral-400, var(--color-mauve-400, oklch(70.5% 0.015 286.067)));
+  --ui-color-neutral-500: var(--ui-dashboard-neutral-500, var(--color-mauve-500, oklch(55.2% 0.016 285.938)));
+  --ui-color-neutral-600: var(--ui-dashboard-neutral-600, var(--color-mauve-600, oklch(44.2% 0.017 285.786)));
+  --ui-color-neutral-700: var(--ui-dashboard-neutral-700, var(--color-mauve-700, oklch(37.4% 0.016 285.822)));
+  --ui-color-neutral-800: var(--ui-dashboard-neutral-800, var(--color-mauve-800, oklch(27.4% 0.006 286.033)));
+  --ui-color-neutral-900: var(--ui-dashboard-neutral-900, var(--color-mauve-900, oklch(21% 0.006 285.885)));
+  --ui-color-neutral-950: var(--ui-dashboard-neutral-950, var(--color-mauve-950, oklch(14.1% 0.005 285.823)));
 }
 
 .light.dashboard-theme {
@@ -1177,7 +1214,7 @@ textarea {
   --ui-bg-elevated: var(--ui-color-neutral-100);
   --ui-bg-accented: var(--ui-color-neutral-200);
   --ui-bg-inverted: var(--ui-color-neutral-900);
-  --ui-text-dimmed: oklch(47.5% 0.018 286);
+  --ui-text-dimmed: var(--ui-dashboard-light-text-dimmed, oklch(47.5% 0.018 286));
   --ui-text-muted: var(--ui-color-neutral-600);
   --ui-text-toned: var(--ui-color-neutral-700);
   --ui-text: var(--ui-color-neutral-800);
@@ -1202,22 +1239,13 @@ textarea {
   --color-mauve-800: oklch(24.4% 0.032 320.12);
   --color-mauve-900: oklch(18.9% 0.026 322.12);
   --color-mauve-950: oklch(14.8% 0.018 326);
-  --ui-color-neutral-50: var(--color-mauve-50, oklch(98.5% 0 0));
-  --ui-color-neutral-100: var(--color-mauve-100, oklch(96.7% 0.001 286.375));
-  --ui-color-neutral-200: var(--color-mauve-200, oklch(92% 0.004 286.32));
-  --ui-color-neutral-300: var(--color-mauve-300, oklch(87.1% 0.006 286.286));
-  --ui-color-neutral-400: var(--color-mauve-400, oklch(70.5% 0.015 286.067));
-  --ui-color-neutral-500: var(--color-mauve-500, oklch(55.2% 0.016 285.938));
-  --ui-color-neutral-600: var(--color-mauve-600, oklch(44.2% 0.017 285.786));
-  --ui-color-neutral-700: var(--color-mauve-700, oklch(37.4% 0.016 285.822));
-  --ui-color-neutral-800: var(--color-mauve-800, oklch(27.4% 0.006 286.033));
-  --ui-color-neutral-900: var(--color-mauve-900, oklch(21% 0.006 285.885));
-  --ui-color-neutral-950: var(--color-mauve-950, oklch(14.1% 0.005 285.823));
+  /* `.dashboard-theme` binds `--ui-color-neutral-*` to these steps on this same
+     element, so the dark values above flow through without a second binding. */
 
   /* Mauve 400 measures 4.48:1 on mauve 700 (bg-accented), so muted and dimmed
      share one step just above it: 4.6:1 there, 7.7:1 on bg-default. */
-  --ui-text-dimmed: oklch(71.5% 0.032 323);
-  --ui-text-muted: oklch(71.5% 0.032 323);
+  --ui-text-dimmed: var(--ui-dashboard-dark-text-dimmed, oklch(71.5% 0.032 323));
+  --ui-text-muted: var(--ui-dashboard-dark-text-muted, oklch(71.5% 0.032 323));
   --ui-text-toned: var(--ui-color-neutral-300);
   --ui-text: var(--ui-color-neutral-200);
   --ui-text-highlighted: #fff;
@@ -1360,7 +1388,7 @@ textarea {
 /* Page title — the largest in-page heading (page headers, hero metrics). Size is
    a role var so it stays editorial on marketing, compact inside .dashboard-theme. */
 .text-title {
-  font-family: var(--font-display);
+  font-family: var(--font-title);
   font-size: var(--size-title);
   font-weight: var(--wght-title);
   font-stretch: var(--wdth-heading);
@@ -1739,32 +1767,8 @@ pre.prose-pre::-webkit-scrollbar-thumb {
   border-radius: 9999px;
 }
 
-/* Outbound prose links carry the same arrow the docs overflow menu already
-   uses for an external item, so "this leaves the site" means one thing in both
-   places. Only absolute http(s) links that are not ours: every `/docs/*` and
-   `/learn-seo/*` link is relative and never matches. A link around an image is
-   excluded — the arrow would hang off the corner of the figure.
-
-   The marker is a background on a pseudo-element whose only content is a
-   no-break space: the NBSP glues the arrow to the last word, so it can never
-   orphan onto a line of its own, and there is no text for a screen reader to
-   announce. The mask resolves `currentColor` against the image's own initial
-   colour, which is opaque black, so the arrow always paints in the link's
-   colour and the CSS holds no colour of its own. */
-a.prose-link[href^="http"]:not([href*="//nuxtseo.com"]):not([href*="//www.nuxtseo.com"]):not(:has(img))::after {
-  content: '\00a0';
-  padding-inline-end: 0.72em;
-  background-color: currentcolor;
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: right center;
-  mask-size: 0.72em 0.72em;
-  opacity: 0.65;
-  vertical-align: baseline;
-}
-a.prose-link[href^="http"]:not([href*="//nuxtseo.com"]):not([href*="//www.nuxtseo.com"]):not(:has(img)):hover::after {
-  opacity: 1;
-}
+/* The external-link arrow on outbound prose links lives in
+   build/external-links.ts: its own-site hosts are a build option. */
 
 /* Inline code inside a link. `prose.code` is an atomic inline (`inline-block`
    with its own fill), so the link underline stopped at the pill and the pill's

package/nuxt.config.ts

@@ -1,5 +1,9 @@
+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
@@ -80,33 +84,37 @@ export default defineNuxtConfig({
     ],
   },
 
-  // Canonical type stack for every surface that extends this layer (root app
-  // + apps/brand-kit brand-kit). Keep in sync via this single block —
-  // don't redeclare in root or app configs.
+  // 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 }`.
   fonts: {
-    // Both families are global. CSS variable discovery cannot add another
-    // face, so avoid parsing every component style during each Vite build.
+    // CSS variable discovery cannot add another face, so avoid parsing every
+    // component style during each Vite build.
     processCSSVariables: false,
-    families: [
-      // Keep build inputs in this layer. Provider downloads make every app
-      // build depend on Google Fonts availability after compilation finishes.
-      // Hubot Sans keeps variable weight and width axes for the design tokens.
-      {
-        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,
-      },
-    ],
+  },
+
+  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
+      // runs 8. Vite pre-bundles one copy per package name, so whichever it
+      // meets first serves both, and a layer table fails with "does not
+      // provide an export named 'useTable'". Unbundled, each importer resolves
+      // its own copy.
+      exclude: ['@tanstack/vue-table', '@tanstack/table-core'],
+    },
   },
 
   icon: {
@@ -125,7 +133,10 @@ export default defineNuxtConfig({
     experimental: { componentDetection: true },
     content: true,
     theme: {
-      colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'pro'],
+      // Each colour adds its variants to every Nuxt UI component theme in the
+      // CSS every page inlines. No app.config maps a `tertiary` colour and no
+      // component asks for one, so it is not listed.
+      colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'pro'],
     },
   },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxtseo/design-system",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Nuxt SEO design system layer: UI primitives, tokens, fonts, motion, and chart helpers. Extend it from a Nuxt app.",
   "license": "MIT",
   "homepage": "https://nuxtseo.com",
@@ -26,7 +26,10 @@
     "./composables/*": "./app/composables/*.ts",
     "./package.json": "./package.json",
     "./server/*": "./server/*.ts",
-    "./shared/*": "./shared/*.ts"
+    "./shared/contracts": "./shared/contracts/index.ts",
+    "./shared/icons": "./shared/icons/index.ts",
+    "./shared/*": "./shared/*.ts",
+    "./types": "./types/index.ts"
   },
   "main": "./nuxt.config.ts",
   "files": [
@@ -40,12 +43,16 @@
     "types"
   ],
   "peerDependencies": {
+    "@nuxt/ui": "^4.11.1",
+    "motion-v": "^2.4.2",
     "nuxt": "^4.6.0",
+    "tailwindcss": "^4.3.0",
     "typescript": ">=5.8.0 <7",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "zod": "^4.0.0"
   },
   "dependencies": {
-    "@comark/nuxt": "0.7.0",
+    "@comark/nuxt": "^0.7.0",
     "@iconify-json/hugeicons": "^1.2.34",
     "@iconify-json/logos": "^1.2.14",
     "@iconify-json/lucide": "^1.2.130",
@@ -55,27 +62,27 @@
     "@nuxt/fonts": "^1.0.1",
     "@nuxt/icon": "^2.5.1",
     "@nuxt/image": "^2.1.0",
-    "@nuxt/scripts": "2.0.0-beta.14",
-    "@nuxt/ui": "^4.11.1",
+    "@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.4.0",
-    "motion-v": "2.4.2",
+    "@vueuse/core": "^14.0.0",
     "nuxtseo-shared": "^6.0.2",
     "pathe": "^2.0.3",
     "rangi": "^2.2.0",
-    "reka-ui": "^2.10.4",
-    "tailwindcss": "^4.3.3",
-    "zod": "^4.6.7"
+    "reka-ui": "^2.10.4"
   },
   "devDependencies": {
+    "@nuxt/ui": "^4.11.1",
     "ai": "^7.0.122",
+    "motion-v": "2.4.2",
     "nuxt": "4.6.1",
     "sharp": "^0.35.4",
     "site-typecheck": "0.0.0",
-    "vue": "^3.5.43"
+    "tailwindcss": "^4.3.3",
+    "vue": "^3.5.43",
+    "zod": "^4.6.7"
   },
   "publishConfig": {
     "access": "public"

package/public/fonts/README.md

@@ -2,6 +2,8 @@
 
 The design system owns these font files. Nuxt copies them into every app that
 extends this layer. Builds never download fonts from an external provider.
+`build/fonts.ts` registers them only for an app that sets
+`designSystem: { fonts: true }`, as `layers/brand` does for Nuxt SEO.
 
 The Hubot Sans file is a latin/latin-ext subset of the official v1.0.1 release
 face (`HubotSans[slnt,wdth,wght].woff2`). It keeps the weight axis (200 to 900)