kmcom-nuxt-layers 2.6.3 → 2.7.0

package/docs/UPAGE-GRID-INTEGRATION.md

@@ -43,6 +43,7 @@ Every direct child that doesn't explicitly span rows becomes ~8.5vh tall. `<UPag
 The mobile breakpoint already uses this. Apply it at all breakpoints.
 
 **What changes:**
+
 - `<LayoutSection>` spanning 12 rows = at least `12 × 8.5vh ≈ 100vh` (min preserved)
 - `<UPage>` in a single row = auto-sized to its content height
 - Column alignment is fully preserved
@@ -69,6 +70,7 @@ ui: {
 With `display: contents`, `<UPage>` generates no box — its children (`UPageHero`, `UPageSection`, etc.) become direct grid items in `mastmain`.
 
 **What changes:**
+
 - `<UPage>` styling is effectively gone (use with care)
 - Each child component becomes a grid item and needs its own column/row spanning
 - Requires configuring `UPageSection`, `UPageHero`, etc. similarly
@@ -84,10 +86,10 @@ A new component that gives pages an explicit choice between Swiss Grid and norma
 ```vue
 <!-- layers/layout/app/components/Layout/Page/index.vue -->
 <script setup lang="ts">
-interface Props {
-  mode?: 'swiss' | 'flow'
-}
-const { mode = 'swiss' } = defineProps<Props>()
+  interface Props {
+    mode?: 'swiss' | 'flow'
+  }
+  const { mode = 'swiss' } = defineProps<Props>()
 </script>
 
 <template>
@@ -178,9 +180,9 @@ Don't apply `<LayoutMain>` in the layouts at all. Let pages that want the Swiss
 
 ## CSS Grid Behaviour Reference
 
-| Scenario | `grid-auto-rows: 8.5vh` | `grid-auto-rows: minmax(8.5vh, auto)` |
-|---|---|---|
-| `<LayoutSection>` (spans 12 rows) | ✅ Exactly 100vh | ✅ At least 100vh, grows with content |
-| `<UPage>` (1 auto row) | ❌ Collapsed to 8.5vh | ✅ Grows to content height |
-| `<LayoutGridItem rowStart="3">` | ✅ Predictable position | ⚠️ Position shifts if rows above grew |
-| `<LayoutGridItem rowSpan="6">` | ✅ 6 × 8.5vh = 51vh | ✅ At least 6 × 8.5vh |
+| Scenario                          | `grid-auto-rows: 8.5vh` | `grid-auto-rows: minmax(8.5vh, auto)` |
+| --------------------------------- | ----------------------- | ------------------------------------- |
+| `<LayoutSection>` (spans 12 rows) | ✅ Exactly 100vh        | ✅ At least 100vh, grows with content |
+| `<UPage>` (1 auto row)            | ❌ Collapsed to 8.5vh   | ✅ Grows to content height            |
+| `<LayoutGridItem rowStart="3">`   | ✅ Predictable position | ⚠️ Position shifts if rows above grew |
+| `<LayoutGridItem rowSpan="6">`    | ✅ 6 × 8.5vh = 51vh     | ✅ At least 6 × 8.5vh                 |

package/docs/USAGE.md

@@ -15,10 +15,7 @@ Add layers to the `extends` array in your `nuxt.config.ts`. Each layer is refere
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  extends: [
-    'kmcom-nuxt-layers/layers/core',
-    'kmcom-nuxt-layers/layers/ui',
-  ]
+  extends: ['kmcom-nuxt-layers/layers/core', 'kmcom-nuxt-layers/layers/ui'],
 })
 ```
 
@@ -26,16 +23,16 @@ Nuxt resolves each layer via the `package.json` → `"main": "./nuxt.config.ts"`
 
 ## Available Layers
 
-| Layer | Extends Path | Depends On | Required Dependencies |
-|-------|-------------|------------|----------------------|
-| **core** | `kmcom-nuxt-layers/layers/core` | — | `nuxt`, `@nuxt/ui`, `pinia`, `@vueuse/nuxt`, `@nuxtjs/device` |
-| **ui** | `kmcom-nuxt-layers/layers/ui` | core | — |
-| **layout** | `kmcom-nuxt-layers/layers/layout` | core | — |
-| **motion** | `kmcom-nuxt-layers/layers/motion` | core | `gsap`, `locomotive-scroll` |
-| **shader** | `kmcom-nuxt-layers/layers/shader` | core | `three`, `@tresjs/nuxt`, `@tresjs/core`, `@tresjs/cientos`, `@tresjs/post-processing` |
-| **forms** | `kmcom-nuxt-layers/layers/forms` | core | `zod` |
-| **theme** | `kmcom-nuxt-layers/layers/theme` | core | — |
-| **content** | `kmcom-nuxt-layers/layers/content` | core | `@nuxt/content`, `better-sqlite3` |
+| Layer       | Extends Path                       | Depends On | Required Dependencies                                                                 |
+| ----------- | ---------------------------------- | ---------- | ------------------------------------------------------------------------------------- |
+| **core**    | `kmcom-nuxt-layers/layers/core`    | —          | `nuxt`, `@nuxt/ui`, `pinia`, `@vueuse/nuxt`, `@nuxtjs/device`                         |
+| **ui**      | `kmcom-nuxt-layers/layers/ui`      | core       | —                                                                                     |
+| **layout**  | `kmcom-nuxt-layers/layers/layout`  | core       | —                                                                                     |
+| **motion**  | `kmcom-nuxt-layers/layers/motion`  | core       | `gsap`, `locomotive-scroll`                                                           |
+| **shader**  | `kmcom-nuxt-layers/layers/shader`  | core       | `three`, `@tresjs/nuxt`, `@tresjs/core`, `@tresjs/cientos`, `@tresjs/post-processing` |
+| **forms**   | `kmcom-nuxt-layers/layers/forms`   | core       | `zod`                                                                                 |
+| **theme**   | `kmcom-nuxt-layers/layers/theme`   | core       | —                                                                                     |
+| **content** | `kmcom-nuxt-layers/layers/content` | core       | `@nuxt/content`, `better-sqlite3`                                                     |
 
 ## Layer Dependency Rules
 
@@ -67,10 +64,7 @@ npm install @nuxt/content better-sqlite3
 
 ```ts
 export default defineNuxtConfig({
-  extends: [
-    'kmcom-nuxt-layers/layers/core',
-    'kmcom-nuxt-layers/layers/ui',
-  ]
+  extends: ['kmcom-nuxt-layers/layers/core', 'kmcom-nuxt-layers/layers/ui'],
 })
 ```
 
@@ -82,7 +76,7 @@ export default defineNuxtConfig({
     'kmcom-nuxt-layers/layers/core',
     'kmcom-nuxt-layers/layers/ui',
     'kmcom-nuxt-layers/layers/layout',
-  ]
+  ],
 })
 ```
 
@@ -94,10 +88,7 @@ npm install gsap locomotive-scroll
 
 ```ts
 export default defineNuxtConfig({
-  extends: [
-    'kmcom-nuxt-layers/layers/core',
-    'kmcom-nuxt-layers/layers/motion',
-  ]
+  extends: ['kmcom-nuxt-layers/layers/core', 'kmcom-nuxt-layers/layers/motion'],
 })
 ```
 
@@ -118,7 +109,7 @@ export default defineNuxtConfig({
     'kmcom-nuxt-layers/layers/forms',
     'kmcom-nuxt-layers/layers/theme',
     'kmcom-nuxt-layers/layers/content',
-  ]
+  ],
 })
 ```
 
@@ -132,39 +123,39 @@ export default defineAppConfig({
   // Core layer overrides
   coreLayer: {
     loading: {
-      enabled: false,          // Disable loading screen
+      enabled: false, // Disable loading screen
     },
     scrollGuard: {
-      enabled: false,          // Disable scroll guard
+      enabled: false, // Disable scroll guard
     },
   },
 
   // Motion layer overrides
   motion: {
     lenis: {
-      duration: 0.8,           // Faster smooth scroll
-      smoothTouch: true,       // Enable on touch devices
+      duration: 0.8, // Faster smooth scroll
+      smoothTouch: true, // Enable on touch devices
     },
   },
 
   // Theme layer overrides
   themeLayer: {
-    defaultAccent: 'indigo',   // Change default accent color
-    accents: ['blue', 'indigo', 'violet', 'purple'],  // Limit palette
+    defaultAccent: 'indigo', // Change default accent color
+    accents: ['blue', 'indigo', 'violet', 'purple'], // Limit palette
   },
 })
 ```
 
 ### Available Config Namespaces
 
-| Namespace | Layer | Key Options |
-|-----------|-------|-------------|
-| `coreLayer.loading` | core | `enabled`, `minDuration`, `maxDuration`, `background`, `textColor` |
-| `coreLayer.scrollGuard` | core | `enabled`, `strict`, `excludeSelectors`, `debug` |
-| `coreLayer.errors` | core | `logToConsole`, `logToExternal`, `externalUrl` |
-| `coreLayer.notFound` | core | `icon`, `title`, `description`, `showHomeButton`, `actions`, `suggestions` |
-| `motion` | motion | `gsapScrollTrigger`, `lenis.*` (duration, smoothWheel, smoothTouch, etc.) |
-| `themeLayer` | theme | `accents`, `defaultAccent` |
+| Namespace               | Layer  | Key Options                                                                |
+| ----------------------- | ------ | -------------------------------------------------------------------------- |
+| `coreLayer.loading`     | core   | `enabled`, `minDuration`, `maxDuration`, `background`, `textColor`         |
+| `coreLayer.scrollGuard` | core   | `enabled`, `strict`, `excludeSelectors`, `debug`                           |
+| `coreLayer.errors`      | core   | `logToConsole`, `logToExternal`, `externalUrl`                             |
+| `coreLayer.notFound`    | core   | `icon`, `title`, `description`, `showHomeButton`, `actions`, `suggestions` |
+| `motion`                | motion | `gsapScrollTrigger`, `lenis.*` (duration, smoothWheel, smoothTouch, etc.)  |
+| `themeLayer`            | theme  | `accents`, `defaultAccent`                                                 |
 
 ## Optional Modules
 

package/layers/animations/app/utils/pointerMotion.ts

@@ -12,10 +12,7 @@ export function resolvePointerSpring(
   return next * (1 - damping)
 }
 
-export function usePointerMotionFrame(
-  update: () => void,
-  cleanup?: () => void
-) {
+export function usePointerMotionFrame(update: () => void, cleanup?: () => void) {
   const { gsap } = useGsap()
 
   onMounted(() => {

package/layers/baseline/app/components/BaselineStatus.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
-import { defineComponent, h } from 'vue'
+  import { defineComponent, h } from 'vue'
 
-export default defineComponent({
-  name: 'BaselineStatus',
-  props: {
-    featureId: {
-      type: String,
-      required: true,
+  export default defineComponent({
+    name: 'BaselineStatus',
+    props: {
+      featureId: {
+        type: String,
+        required: true,
+      },
     },
-  },
-  setup(props) {
-    if (import.meta.server) return () => null
-    return () => h('baseline-status', { featureId: props.featureId })
-  },
-})
+    setup(props) {
+      if (import.meta.server) return () => null
+      return () => h('baseline-status', { featureId: props.featureId })
+    },
+  })
 </script>

package/layers/baseline/app/plugins/baseline-status.client.ts

@@ -1,3 +1,6 @@
 import 'baseline-status'
 
-export default defineNuxtPlugin(() => {})
+export default defineNuxtPlugin({
+  name: 'baseline-status',
+  setup() {},
+})

package/layers/canvas/app/composables/useRendererCapabilities.ts

@@ -1,11 +1,11 @@
-import type { WebGPURenderer } from 'three/webgpu'
-import type { WebGLRenderer } from 'three'
 import {
   QUALITY_PRESETS,
   type QualityLevel,
   type QualitySettings,
   type RendererCapabilities,
 } from '#layers/canvas/types/renderer'
+import type { WebGLRenderer } from 'three'
+import type { WebGPURenderer } from 'three/webgpu'
 
 /**
  * Detect and expose renderer capabilities

package/layers/content/app/components/Blog/Card.vue

@@ -38,5 +38,6 @@
       }))
     "
     variant="outline"
+    class="@container"
   />
 </template>

package/layers/content/app/components/Gallery/Card.vue

@@ -22,7 +22,7 @@
 </script>
 
 <template>
-  <UPageCard :title v-bind="cardProps" variant="outline">
+  <UPageCard :title v-bind="cardProps" variant="outline" class="@container">
     <img
       v-if="coverImage"
       :src="coverImage.src"

package/layers/content/app/components/Gallery/Detail.vue

@@ -45,7 +45,7 @@
     <template #after-content="{ item }">
       <template v-if="asGallery(item).images?.length">
         <USeparator class="my-8" />
-        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+        <div class="gallery-grid gap-4">
           <div
             v-for="(img, idx) in asGallery(item).images"
             :key="img.src"
@@ -88,3 +88,10 @@
     </template>
   </NuxtContentDetail>
 </template>
+
+<style scoped>
+  .gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  }
+</style>

package/layers/content/app/components/Portfolio/Card.vue

@@ -22,6 +22,7 @@
   <UPageCard
     :title
     variant="outline"
+    class="@container"
     v-bind="{ ...(description !== undefined && { description }), ...(to !== undefined && { to }) }"
   >
     <img v-if="image" :src="image" :alt="title" class="w-full h-48 object-cover rounded" />

package/layers/content/app/components/Portfolio/ColorPalette.vue

@@ -17,7 +17,7 @@
 <template>
   <div v-if="colors.length" class="space-y-6">
     <h3 class="text-2xl font-semibold tracking-tight text-highlighted">Palette</h3>
-    <LinksGroup class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+    <LinksGroup class="palette-grid gap-3">
       <div v-for="color in colors" :key="color.value">
         <div
           class="aspect-2/3 flex flex-col justify-between p-4 rounded-lg border border-default/20 shadow-lg cursor-default"
@@ -33,3 +33,10 @@
     </LinksGroup>
   </div>
 </template>
+
+<style scoped>
+  .palette-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  }
+</style>

package/layers/content/app/components/Portfolio/Typography.vue

@@ -12,12 +12,12 @@
     <div class="mt-8 flex flex-col gap-24">
       <div v-for="font in typography" :key="font.name" class="flex flex-col gap-6">
         <div class="flex items-baseline justify-between gap-4">
-          <p class="text-4xl sm:text-5xl font-semibold text-highlighted tracking-tight truncate">
+          <p class="font-name font-semibold text-highlighted tracking-tight truncate">
             {{ font.name }}
           </p>
           <p v-if="font.usage" class="text-sm text-muted shrink-0">{{ font.usage }}</p>
         </div>
-        <p class="text-2xl sm:text-3xl text-muted tracking-wide">ABCDEFGHabcdefgh 0123456789</p>
+        <p class="font-sample text-muted tracking-wide">ABCDEFGHabcdefgh 0123456789</p>
         <div class="flex items-center gap-4">
           <span class="text-xs font-mono text-muted uppercase tracking-widest opacity-50">
             Weights
@@ -34,3 +34,13 @@
     </div>
   </div>
 </template>
+
+<style scoped>
+  .font-name {
+    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
+  }
+
+  .font-sample {
+    font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
+  }
+</style>

package/layers/content/app/composables/useGalleryItems.ts

@@ -5,8 +5,9 @@ export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const key = `gallery-items:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
 
   return useContentData(key, async () => {
-    let items = (await queryCollection('gallery').all())
-      .sort((a, b) => (b.date ?? '').localeCompare(a.date ?? ''))
+    let items = (await queryCollection('gallery').all()).sort((a, b) =>
+      (b.date ?? '').localeCompare(a.date ?? '')
+    )
 
     if (tags?.length) {
       items = items.filter((item) => Boolean(item.tags?.some((tag: string) => tags.includes(tag))))

package/layers/content/app/composables/usePortfolioItems.ts

@@ -5,8 +5,9 @@ export function usePortfolioItems(options: PortfolioQueryOptions = {}) {
   const key = `portfolio-items:${featured ?? ''}:${(tags ?? []).slice().sort().join(',')}:${limit ?? ''}`
 
   return useContentData(key, async () => {
-    let items = (await queryCollection('portfolio').all())
-      .sort((a, b) => (b.year ?? 0) - (a.year ?? 0))
+    let items = (await queryCollection('portfolio').all()).sort(
+      (a, b) => (b.year ?? 0) - (a.year ?? 0)
+    )
 
     if (featured !== undefined) {
       items = items.filter((item) => item.featured === featured)

package/layers/core/app/components/DiagnosticsPage.vue

@@ -38,7 +38,7 @@
             <template #header>
               <h2 class="text-xl font-semibold">CSS Features</h2>
             </template>
-            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+            <div class="diag-grid-9 gap-3">
               <div class="flex items-center gap-2">
                 <span v-if="grid" class="text-green-500">✓</span>
                 <span v-else class="text-red-500">✗</span>
@@ -76,7 +76,7 @@
             <template #header>
               <h2 class="text-xl font-semibold">Image Formats</h2>
             </template>
-            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            <div class="diag-grid-8 gap-3">
               <div class="flex items-center gap-2">
                 <span v-if="webp" class="text-green-500">✓</span>
                 <span v-else class="text-red-500">✗</span>
@@ -94,7 +94,7 @@
             <template #header>
               <h2 class="text-xl font-semibold">JavaScript APIs</h2>
             </template>
-            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+            <div class="diag-grid-9 gap-3">
               <div class="flex items-center gap-2">
                 <span v-if="intersectionObserver" class="text-green-500">✓</span>
                 <span v-else class="text-red-500">✗</span>
@@ -224,3 +224,15 @@
     </UContainer>
   </div>
 </template>
+
+<style scoped>
+  .diag-grid-9 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  }
+
+  .diag-grid-8 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  }
+</style>

package/layers/core/app/utils/featureClasses.test.ts

@@ -72,9 +72,7 @@ describe('getFeatureClassNames', () => {
   })
 
   it('only includes extra classes for the features that are truthy', () => {
-    const classes = getFeatureClassNames(
-      createFeatures({ intersectionObserver: true, avif: true })
-    )
+    const classes = getFeatureClassNames(createFeatures({ intersectionObserver: true, avif: true }))
 
     expect(classes).toContain('has-intersection-observer')
     expect(classes).toContain('supports-avif')

package/layers/core/app/utils/featureClasses.ts

@@ -25,9 +25,7 @@ export function getFeatureClassNames(features: FeatureDetection): string[] {
     features[key] ? supportedClass : unsupportedClass
   )
 
-  classes.push(
-    ...EXTRA_CLASS_MAP.flatMap(([key, className]) => (features[key] ? [className] : []))
-  )
+  classes.push(...EXTRA_CLASS_MAP.flatMap(([key, className]) => (features[key] ? [className] : [])))
 
   return classes
 }

package/layers/core/app/utils/helpers.test.ts

@@ -38,11 +38,15 @@ describe('core helpers', () => {
       ],
       docs: [{ kind: 'docs', id: 2 }],
     })
-    expect(pick({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['title', 'slug'])).toEqual({
+    expect(
+      pick({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['title', 'slug'])
+    ).toEqual({
       title: 'Nuxt',
       slug: 'nuxt-layers',
     })
-    expect(omit({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['description'])).toEqual({
+    expect(
+      omit({ title: 'Nuxt', description: 'Layers', slug: 'nuxt-layers' }, ['description'])
+    ).toEqual({
       title: 'Nuxt',
       slug: 'nuxt-layers',
     })

package/layers/core/nuxt.config.ts

@@ -65,6 +65,8 @@ export default defineNuxtConfig({
       meta: [
         // <meta name="viewport" content="width=device-width, initial-scale=1">
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        // Opt page into browser's text-scale preference respecting default font size
+        { name: 'text-scale', content: 'scale' },
       ],
 
       noscript: [

package/layers/feeds/app/assets/css/feeds.css

@@ -35,9 +35,11 @@
   .feed-badge-rss {
     color: var(--color-orange-400, #fb923c);
   }
+
   .feed-badge-atom {
     color: var(--color-purple-400, #c084fc);
   }
+
   .feed-badge-json {
     color: var(--color-yellow-400, #facc15);
   }
@@ -49,8 +51,7 @@
   background-color: var(--color-gray-950, #030712);
   padding: 1rem;
   max-height: 24rem;
-  overflow-x: auto;
-  overflow-y: auto;
+  overflow: auto;
   color: var(--color-gray-100, #f3f4f6);
   font-size: 0.75rem;
   line-height: 1.6;

package/layers/feeds/app/components/Feeds/Index.vue

@@ -16,7 +16,8 @@
 
 <template>
   <div
-    class="relative overflow-hidden rounded-4xl border border-amber-200/70 bg-[linear-gradient(180deg,rgba(255,251,244,0.96),rgba(243,236,223,0.95))] px-5 py-5 shadow-[0_30px_100px_rgba(15,23,42,0.12)] dark:border-slate-800/80 dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.96),rgba(3,7,18,0.98))] sm:px-6 sm:py-6"
+    class="feeds-shell relative overflow-hidden rounded-4xl border border-amber-200/70 bg-[linear-gradient(180deg,rgba(255,251,244,0.96),rgba(243,236,223,0.95))] shadow-[0_30px_100px_rgba(15,23,42,0.12)] dark:border-slate-800/80 dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.96),rgba(3,7,18,0.98))]"
+    style="container-type: inline-size"
   >
     <div class="pointer-events-none absolute inset-0">
       <div
@@ -31,7 +32,7 @@
     </div>
 
     <div class="relative space-y-8">
-      <div class="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(18rem,0.85fr)]">
+      <div class="feeds-split grid gap-6">
         <div class="space-y-6">
           <div
             class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-amber-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
@@ -42,18 +43,18 @@
 
           <div class="space-y-3">
             <h1
-              class="max-w-3xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl md:text-6xl dark:text-slate-50"
+              class="feeds-h1 max-w-3xl font-semibold tracking-tight text-slate-950 dark:text-slate-50"
             >
               Feed catalog for {{ catalog.site.title }}
             </h1>
-            <p class="max-w-2xl text-base leading-7 text-slate-700 sm:text-lg dark:text-slate-300">
+            <p class="feeds-body max-w-2xl leading-7 text-slate-700 dark:text-slate-300">
               Configured in <code class="font-mono text-[0.9em]">app.config.ts</code>, validated
               against <code class="font-mono text-[0.9em]">content.config.ts</code>, and rendered as
               a human-readable index for readers and site owners.
             </p>
           </div>
 
-          <div class="grid gap-3 sm:grid-cols-3">
+          <div class="feeds-cards-grid gap-3">
             <div
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
@@ -201,7 +202,7 @@
               </UBadge>
             </div>
 
-            <div class="grid gap-3 p-5 sm:grid-cols-3">
+            <div class="feeds-cards-grid gap-3 p-5">
               <FeedsRouteCard v-for="route in group.routes" :key="route.path" :route compact />
             </div>
           </UCard>
@@ -227,3 +228,32 @@
     </div>
   </div>
 </template>
+
+<style scoped>
+  .feeds-shell {
+    padding: clamp(1.25rem, 1rem + 1vw, 1.5rem);
+  }
+
+  .feeds-h1 {
+    font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
+  }
+
+  .feeds-body {
+    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  }
+
+  .feeds-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  }
+
+  .feeds-split {
+    grid-template-columns: 1fr;
+  }
+
+  @container (width >= 48rem) {
+    .feeds-split {
+      grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
+    }
+  }
+</style>

package/layers/feeds/app/components/Feeds/RouteCard.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-  import { computed } from 'vue'
-
   import { type FeedRoute } from '../../utils/feed-catalog'
 
   const { route, compact = false } = defineProps<{
@@ -50,7 +48,7 @@
   <UCard
     :to="route.path"
     :ui="{ body: 'p-0' }"
-    class="group relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700"
+    class="group relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700 @container"
   >
     <div class="absolute inset-y-0 left-0 w-1" :class="routeTone.strip" />
     <div :class="compact ? 'flex items-center gap-3 p-3' : 'flex items-center gap-3 p-4'">

package/layers/feeds/app/plugins/feed-head.ts

@@ -27,7 +27,7 @@ export default defineNuxtPlugin({
       const mainLinks = catalog.siteRoutes
         .filter((route) => route.kind === 'format')
         .map((route) => ({
-          rel: 'alternate',
+          rel: 'alternate' as const,
           type: route.contentType ?? 'application/octet-stream',
           title: `${siteTitle || 'Site'} (${route.label})`,
           href: route.path,
@@ -38,7 +38,7 @@ export default defineNuxtPlugin({
       const collectionLinks =
         currentCollection && currentCollection.collection !== catalog.feed.defaultCollection
           ? currentCollection.routes.map((route) => ({
-              rel: 'alternate',
+              rel: 'alternate' as const,
               type: route.contentType ?? 'application/octet-stream',
               title: `${currentCollection.label} (${route.label})`,
               href: route.path,

package/layers/feeds/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@nuxt/content": "catalog:",
     "nuxt": "catalog:",
-    "vue": "catalog:conflicts_conflicts_vue_latest_h3_5_35",
+    "vue": "catalog:",
     "vue-router": "catalog:"
   }
 }