kmcom-nuxt-layers 4.0.1 → 5.0.1

package/docs/PEER-DEPENDENCY-MISMATCHES.md

@@ -0,0 +1,48 @@
+# Peer Dependency Mismatches
+
+## Context
+
+Checked on 2026-10-16 against the `KMCOMv5/frontend` consumer after upgrading its dependencies. `pnpm peers check` reports four unmet peers from `kmcom-nuxt-layers@5.0.0`:
+
+| Package          | Consumer version | Current layer peer range | Suggested supported majors, after testing |
+| ---------------- | ---------------- | ------------------------ | ----------------------------------------- |
+| `@nuxtjs/seo`    | `6.0.1`          | `^5.0.0`                 | 5 and 6                                   |
+| `@vueuse/nuxt`   | `15.0.0`         | `^14.3.0`                | 14 and 15                                 |
+| `better-sqlite3` | `13.0.3`         | `^12.10.0`               | 12 and 13                                 |
+| `pinia`          | `4.1.0`          | `^3.0.4`                 | 3 and 4                                   |
+
+Suggested `peerDependencies` values:
+
+```json
+{
+  "@nuxtjs/seo": "^5.0.0 || ^6.0.0",
+  "@vueuse/nuxt": "^14.3.0 || ^15.0.0",
+  "better-sqlite3": "^12.10.0 || ^13.0.0",
+  "pinia": "^3.0.4 || ^4.1.0"
+}
+```
+
+These ranges are proposals, not proof of compatibility. A peer range is a support promise: widen it only after the layer code and tests pass against the new major. `@pinia/nuxt@1.0.3` itself requires `pinia@^4.1.0`, so the consumer's Pinia 4 pairing is intentional.
+
+## Recommended Fix
+
+1. In the layers repo root `package.json`, update the four entries under `peerDependencies` to the proposed ranges above. Keep their existing `peerDependenciesMeta` optional flags; these packages are optional for consumers that do not use those layers.
+2. Align the layers repo's development catalog and test dependencies with the versions being claimed. In particular, test Pinia 4 together with `@pinia/nuxt` 1, not the existing Pinia 3 test setup.
+3. Run the affected layer checks and tests, then build the playground with the SEO, VueUse, and database layers enabled. Check both the currently supported older majors and the new majors where practical. If an older major is no longer supported, remove it from the range and document the minimum instead of claiming compatibility.
+4. Publish a patch release if the change only adds verified compatibility to the existing v5 contract. Use a breaking release if layer APIs or supported behavior must change.
+5. In the frontend consumer, reinstall and run `pnpm peers check`. Do not silence these warnings with `allowedVersions` or overrides; those mechanisms do not establish runtime compatibility.
+
+## Separate Transitive Warnings
+
+The same consumer check also reported two warnings that do not come from `kmcom-nuxt-layers`' peer declarations:
+
+| Package      | Installed | Requested by `unctx@3.0.1` |
+| ------------ | --------- | -------------------------- |
+| `oxc-parser` | `0.139.0` | `>=0.140.0`                |
+| `unplugin`   | `2.3.11`  | `^3.3.0`                   |
+
+Trace these with `pnpm why unctx` in the consumer and inspect the resolved dependency chain. Update the dependency that brings in `unctx` or move to a compatible `unctx` release; only use an override after confirming the affected packages support the overridden versions. Keep this investigation separate from the four layer peer-range changes.
+
+## Runtime Note
+
+`@nuxtjs/seo@6.0.1` declares Node support for `^22.22.3 || ^24.15.0 || >=26.0.0`. The frontend check used Node `24.22.0`, which is supported. Consumers on Node 25 or earlier Node 24 releases are outside that declared range and should not be considered covered by this upgrade.

package/docs/VITE-PLUS-MIGRATION.md

@@ -0,0 +1,246 @@
+# Migrating to Vite+ (nuxt-layers v5.0.0)
+
+**Audience:** a developer or AI coding agent updating a downstream Nuxt app that consumes
+`kmcom-nuxt-layers`, and wants the same toolchain this repo moved to in v5.0.0.
+
+> Using the layers does **not** force you onto Vite+. The layers are plain Nuxt layers and keep
+> working in an app on stock Vite/Vitest/Prettier. This guide is for apps that want to adopt the
+> same toolchain. Sections 1–2 say what changed in the repo; sections 3–9 are the steps.
+
+Work top to bottom. Each step has a **Detect** (does it apply?) and an **Apply**. Run the
+**Verify** checklist at the end before calling it done. Where this guide and the repo disagree,
+the repo wins — the reference files are listed at the bottom.
+
+## 1. What Vite+ is, and what v5.0.0 changed
+
+[Vite+](https://viteplus.dev) (`vp`, package `vite-plus`) is one CLI over the Vite ecosystem:
+dev/build (Vite), test (Vitest), lint (oxlint), format (oxfmt), and a managed Node runtime.
+
+In this repo the migration (`vp migrate`, then hand fixes) did:
+
+| Area      | Before                             | After                                                          |
+| --------- | ---------------------------------- | -------------------------------------------------------------- |
+| Vite      | `vite: ^8`                         | `vite: npm:@voidzero-dev/vite-plus-core@1.2.0` (catalog alias) |
+| Vitest    | `vitest ^4`                        | `vitest 5.0.4` + `@vitest/coverage-v8 5.0.4`                   |
+| Test API  | `import … from 'vitest'`           | `import … from 'vite-plus/test'`                               |
+| Formatter | Prettier + 6 plugins               | oxfmt (`vp fmt`), config in `vite.config.ts`                   |
+| Linter    | ESLint only                        | `vp lint` (oxlint) chained before the per-package ESLint       |
+| Scripts   | `vitest run`, `prettier --write .` | `vp test run`, `vp fmt .`                                      |
+| Node file | `.nvmrc`                           | `.node-version`                                                |
+| pnpm      | 11                                 | 12 (`packageManager: pnpm@12.10.1`)                            |
+| `nuxt`    | `latest`                           | pinned `4.6.1`                                                 |
+
+**Breaking for consumers:** Node 24 only (`engines: >=24 <25`), and the toolchain/script names
+above. The layers' runtime behaviour is unchanged.
+
+## 2. Preconditions
+
+- Node 24 (`node -v`). Vite+ can manage this for you via `.node-version`.
+- pnpm 12 (`corepack enable && corepack use pnpm@12`). pnpm 10/11 will not read the new settings
+  locations in step 4.
+- A clean git tree, on a new branch. `vp migrate` rewrites many files.
+
+## 3. Install Vite+ and run the migration
+
+**Detect:** your `package.json` has `vite`, `vitest`, or `prettier` in `devDependencies`.
+
+**Apply:**
+
+```bash
+git switch -c chore/migrate-to-vite-plus
+vp migrate                     # rewrites vite/vitest deps, test imports, scripts, prettier → oxfmt
+pnpm install
+```
+
+`vp migrate` handles the mechanical parts: dependency swap, `vitest` → `vite-plus/test` imports,
+script renames, `.nvmrc` → `.node-version`. Review the diff before moving on — it is the source
+of truth for what changed in _your_ app.
+
+If you use a pnpm catalog, point `vite` / `vitest` / `@vitest/coverage-v8` at the Vite+ entries
+(see the table in section 1) and add overrides so transitive deps resolve to the same copy:
+
+```yaml
+# pnpm-workspace.yaml
+overrides:
+  vite@*: 'catalog:'
+  vitest@*: 'catalog:'
+```
+
+## 4. pnpm 12 settings (don't skip)
+
+**Detect:** your `.npmrc` contains `shamefully-hoist` or `strict-peer-dependencies`.
+
+pnpm 12 **ignores those keys in `.npmrc`**. Symptom: dev server dies with
+`"extend" … no default export` (a CJS interop failure from a package that is no longer hoisted).
+
+**Apply:** move them to `pnpm-workspace.yaml` (create it for single-package projects):
+
+```yaml
+shamefullyHoist: true
+strictPeerDependencies: false
+```
+
+Keep `allowBuilds` for packages with install scripts (`esbuild`, `sharp`, `@parcel/watcher`, …).
+
+## 5. Pin Nuxt (and the Vite builder patch)
+
+**Detect:** your `nuxt` version is `latest` or a loose range.
+
+This repo patches `@nuxt/vite-builder` (a `listenAndRestrict` `ENOENT` guard on the vite-node
+socket chmod). A pnpm patch targets an **exact** version, so an unpinned `nuxt` silently breaks it
+on the next release.
+
+**Apply:**
+
+1. Pin `nuxt` to an exact version (this repo: `4.6.1`).
+2. Only if you hit `NUXT_B7018` on the vite-node socket, copy
+   `patches/@nuxt__vite-builder@4.6.1.patch` and register it:
+
+```yaml
+patchedDependencies:
+  '@nuxt/vite-builder@4.6.1': patches/@nuxt__vite-builder@4.6.1.patch
+```
+
+If you do not hit that error, you do not need the patch. Patches are **not** inherited from the
+layers package — they only apply where declared.
+
+## 6. Declare `typescript` in every app
+
+**Detect:** `pnpm why typescript` shows two versions (e.g. 5.9.3 and 6.0.3), or
+`@nuxt/test-utils` fails with
+`Failed to resolve import "./diagnostics/core.js" from … nuxt-vitest-app-entry.js`.
+
+pnpm builds a separate `nuxt` install per set of resolved peers. If an app doesn't declare
+`typescript`, it can resolve a different TS than the rest of the workspace and get a `nuxt`
+variant whose generated test entry can't find its own files.
+
+**Apply:** add `"typescript": "catalog:"` (or the same range as the rest of the repo) to each
+app's `devDependencies`, then `pnpm install`. Confirm one `nuxt` variant per app with
+`ls -d node_modules/.pnpm/nuxt@*`.
+
+## 7. Replace Prettier with oxfmt
+
+**Detect:** `prettier`, `prettier-plugin-*`, `.prettierrc*`, or `prettier` scripts exist.
+
+**Apply:**
+
+- Delete Prettier and every plugin from `devDependencies`, and remove `eslint-plugin-prettier` /
+  `stylelint-prettier` from your ESLint and Stylelint configs.
+- Put formatter options in `vite.config.ts` under `fmt` (this repo: no semicolons, single quotes,
+  ES5 trailing commas, 100 columns, `sortTailwindcss: {}`, `vueIndentScriptAndStyle: true`).
+- Move `.prettierignore` entries into `fmt.ignorePatterns`.
+- Scripts: `"format": "vp fmt ."`, `"format:check": "vp fmt --check ."`.
+- Run `vp fmt .` once as its own commit (`style: format with oxfmt`) so it stays out of review diffs.
+
+Expect small differences from Prettier output (quote style in CSS `@import`, JSON line widths).
+Reformatting generated baselines or lockfiles is churn — ignore them.
+
+## 8. Lint: oxlint first, ESLint second
+
+**Apply:**
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  lint: {
+    jsPlugins: [{ name: 'vite-plus', specifier: 'vite-plus/oxlint-plugin' }],
+    rules: { 'vite-plus/prefer-vite-plus-imports': 'error' },
+    // Nuxt auto-imports are invisible to oxlint's type analysis — keep these off
+    // or every `ref`/`computed`/`useFetch` is reported as undefined.
+    options: { typeAware: false, typeCheck: false },
+  },
+})
+```
+
+```jsonc
+// package.json
+"lint": "vp lint && turbo run lint",          // or just `vp lint && eslint .` without Turbo
+"lint:fix": "vp lint --fix && turbo run lint -- --fix"
+```
+
+`vp lint` is the built-in oxlint with rules from `vite.config.ts`; `pnpm lint` runs your
+`package.json` script. They are different commands.
+
+### Stylelint with Tailwind v4
+
+If you run Stylelint, these false positives are expected with Tailwind v4 and layer CSS:
+
+- `at-rule-no-unknown` / `no-invalid-position-at-import-rule`: ignore `layer`, `config`,
+  `custom-variant`, `source`, `plugin`, `utility`, `variant`.
+- `no-invalid-position-declaration`: off for `.vue`.
+- `value-keyword-case`: ignore font properties and `--*font*` custom properties.
+- `declaration-no-important`: allow only in files that implement user-preference overrides
+  (reduced motion / transparency) that must beat utilities and inline styles. Scope it with an
+  `overrides` entry — do not disable it globally.
+- Ignore `**/dist/**`, `**/.output/**`, `**/.nuxt/**`.
+
+## 9. Tests
+
+**Apply:**
+
+- `vitest` imports → `vite-plus/test` (done by `vp migrate`; `vite-plus/prefer-vite-plus-imports`
+  keeps it that way).
+- Scripts: `"test": "vp test run"`, `"test:watch": "vp test"`, `"test:coverage": "vp test run --coverage"`.
+- If tests relied on mock call history surviving between tests, keep
+  `test: { clearMocks: false }` in `vite.config.ts` (newer Vitest versions clear mocks by default).
+- `@nuxt/test-utils` projects (`defineVitestProject`) keep working; see step 6 if they fail to load.
+- Playwright: the repo's Playwright wants its own browser build. Run
+  `pnpm exec playwright install chromium` (not a globally installed Playwright) before e2e.
+  Stop dev servers with `pkill -f "nuxt dev"` **and** delete a stale
+  `apps/<app>/.nuxt/nuxt.lock` if the next start says "Another Nuxt dev server is already running".
+
+## 10. Nuxt-specific issues you may meet
+
+These came up during this migration and are independent of Vite+ itself:
+
+- **Hydration mismatches** after changing theme state: don't read `localStorage` during plugin
+  setup — apply stored prefs in `useNuxtApp().hook('app:mounted', …)`, and keep per-page state in
+  `useState`. A Playwright spec that fails on any `hydrat` console message is a cheap guard
+  (see `tests/playwright/hydration.spec.ts`).
+- **`NUXT_E4004` / "Component inside `<Transition>` renders non-element root node"**: a page root
+  that is a fragment (multiple roots, a root-level HTML comment, or a renderless provider like
+  `ShaderRuntime`). Wrap in `<div class="contents">` — `display: contents` generates no box, so
+  grid children still lay out as direct children of the parent grid.
+- **jiti warnings for layer configs**: use explicit `.ts` extensions in layer `nuxt.config.ts`
+  relative imports.
+- **Dev prebundling**: this repo adds `@vue/devtools-core` to `vite.optimizeDeps.include`
+  (see `apps/playground/nuxt.config.ts`) so dev doesn't re-optimise it on first load. Only needed
+  if you see repeated dependency re-optimisation reloads.
+
+## Verify checklist
+
+Run all of these; every one should be clean.
+
+```bash
+pnpm install --frozen-lockfile     # lockfile consistent
+vp fmt --check .                   # formatting
+command vp lint                    # oxlint, 0 warnings
+pnpm lint                          # oxlint + ESLint across packages
+pnpm typecheck                     # vue-tsc
+vp test run                        # unit / nuxt-env tests
+pnpm test:e2e                      # Playwright (needs matching chromium)
+pnpm build                         # production build
+```
+
+Also: `ls -d node_modules/.pnpm/nuxt@*` shows one variant per app, `pnpm why typescript` shows one
+version, and the dev server starts with no `no default export` error.
+
+## Rollback
+
+The migration is mechanical and lives on one branch. To back out: `git revert` the migration and
+format commits, restore `.nvmrc`, and `pnpm install`. Nothing in the layers package requires
+Vite+, so rolling back does not break layer consumption.
+
+## Reference files in this repo
+
+| Topic                  | File                                      |
+| ---------------------- | ----------------------------------------- |
+| Vite+ config           | `vite.config.ts`                          |
+| Catalog / overrides    | `pnpm-workspace.yaml`                     |
+| Scripts                | `package.json`                            |
+| Builder patch          | `patches/@nuxt__vite-builder@4.6.1.patch` |
+| Stylelint overrides    | `stylelint.config.mjs`                    |
+| Hydration spec         | `tests/playwright/hydration.spec.ts`      |
+| Migration PR / release | PR #57, #58; release `v5.0.0`             |

package/docs/superpowers/plans/2026-09-03-layout-layer-fluid-rebuild.md

@@ -1146,7 +1146,7 @@ Column count is now emergent (native `auto-fill`), so there's nothing left to tr
 
 <template>
   <Teleport to="body">
-    <div v-if="visible" :style class="layout-grid-debug z-9999 fixed inset-0" aria-hidden="true" />
+    <div v-if="visible" :style class="layout-grid-debug fixed inset-0 z-9999" aria-hidden="true" />
   </Teleport>
 </template>
 ```
@@ -1208,7 +1208,7 @@ The old page documented the 6/12/18 preset system in detail; that entire API is
         <div class="flex items-center gap-4">
           <UButton to="/" variant="ghost" icon="i-lucide-arrow-left" />
           <div>
-            <h1 class="text-3xl font-bold text-highlighted">Layout Layer</h1>
+            <h1 class="text-highlighted text-3xl font-bold">Layout Layer</h1>
             <p class="text-muted">Fluid grid, sections, and page components</p>
           </div>
           <div class="ml-auto">
@@ -1232,14 +1232,14 @@ The old page documented the 6/12/18 preset system in detail; that entire API is
                 :span2="cell.span2"
               >
                 <h3 class="font-mono text-sm">Cell {{ cell.id }}</h3>
-                <p class="text-sm text-muted">variant: {{ cell.variant }}</p>
+                <p class="text-muted text-sm">variant: {{ cell.variant }}</p>
               </LayoutCell>
             </div>
           </section>
 
           <LayoutSection align="split" class="mt-12">
             <div class="flex items-center justify-center">
-              <div class="text-center space-y-2">
+              <div class="space-y-2 text-center">
                 <h2 class="text-2xl font-bold">LayoutSection align="split"</h2>
                 <p class="text-muted">
                   100svh block, optical 40/60 padding split derived from --lines/--fields.
@@ -1249,7 +1249,7 @@ The old page documented the 6/12/18 preset system in detail; that entire API is
           </LayoutSection>
 
           <LayoutSection align="center">
-            <div class="text-center space-y-2">
+            <div class="space-y-2 text-center">
               <h2 class="text-2xl font-bold">LayoutSection align="center"</h2>
               <p class="text-muted">
                 place-content: center — true horizontal+vertical centering, no fighting align-items:
@@ -1268,7 +1268,7 @@ The old page documented the 6/12/18 preset system in detail; that entire API is
 
         <section class="space-y-8">
           <div>
-            <h2 class="text-2xl font-bold mb-2">Z-Index System</h2>
+            <h2 class="mb-2 text-2xl font-bold">Z-Index System</h2>
             <p class="text-muted">
               Unchanged from the old system — read via
               <code class="font-mono text-sm">useGridConfig().useZIndex(layer)</code>
@@ -1276,13 +1276,13 @@ The old page documented the 6/12/18 preset system in detail; that entire API is
           </div>
           <UCard>
             <pre
-              class="bg-muted text-highlighted p-4 rounded-lg text-sm overflow-x-auto"
+              class="bg-muted text-highlighted overflow-x-auto rounded-lg p-4 text-sm"
             ><code>const { useZIndex } = useGridConfig()
 const zModal = useZIndex('modal') // → 400</code></pre>
           </UCard>
         </section>
 
-        <div class="flex gap-4 justify-center pt-4">
+        <div class="flex justify-center gap-4 pt-4">
           <UButton to="/ui" variant="outline" icon="i-lucide-arrow-left">UI Layer Demo</UButton>
           <UButton to="/" icon="i-lucide-home">Back to Home</UButton>
           <UButton to="/core" variant="outline" trailing-icon="i-lucide-arrow-right">

package/docs/superpowers/specs/2026-08-30-layer-taxonomy-tier-7-design.md

@@ -52,7 +52,7 @@ regardless of layer), so `apps/playground/app/pages/baseline.vue` and `index.vue
   playground. `app.config.ts`, `feed-catalog.ts` (collection resolution, missing-collection
   warnings), `feed-head.ts` plugin (auto-discovery `<link rel="alternate">` tags), `feed-service.ts`,
   all `server/routes/feed/**` handlers (sampled `rss.get.ts`, `index.get.ts` — consistent), `Feeds/
-Index.vue`, `Feeds/RouteCard.vue` — real, thorough, already well-tested
+  Index.vue`, `Feeds/RouteCard.vue` — real, thorough, already well-tested
   (`content-adapter.test.ts`, `feed-author.test.ts`, `feed-config.test.ts`, `formats.test.ts`),
   consumed by `apps/playground/app/pages/feeds.vue`.
 

package/docs/superpowers/specs/2026-08-31-swiss-grid-layer-design.md

@@ -64,11 +64,11 @@ versa.
 The artifact leaves the exact alias set open (§13). Resolved here:
 
 - Aliases are expressed in a fixed **12-unit vocabulary**: `full=12,
-half=6, third=4, quarter=3` — independent of the grid's live column
+  half=6, third=4, quarter=3` — independent of the grid's live column
   count, the same mental model as Bootstrap-style 12-col systems.
 - Because `columns` can be less than 12 at smaller breakpoints (4 at `xs`,
   8 at `sm`/`md` per §1's default), an alias's rendered span is `min(alias
-value, current column count)` — computed in the component, not CSS
+  value, current column count)` — computed in the component, not CSS
   `calc()` (integer `grid-column: span N` can't come from a fractional
   division). This keeps `half` always rendering as "half of whatever this
   breakpoint's grid actually has," clamped so it never overflows a
@@ -85,7 +85,7 @@ New components, this layer, alongside `SwissGrid`/`SwissGridItem`:
   For groups of items that wrap as a unit (tag lists, button rows,
   metadata chips) — distinct from `SwissGrid`, which is column-track-based.
 - **`Flow`** — vertical stack with automatic rhythm: renders `> * + *
-{ margin-block-start: var(--fluid-space-<size>) }` scoped via a CSS
+  { margin-block-start: var(--fluid-space-<size>) }` scoped via a CSS
   class, `size` prop selecting the `core` fluid-space token. For prose-like
   vertical sequences where every child needs the same gap, without each
   child managing its own margin.

package/docs/superpowers/specs/2026-09-03-layout-layer-fluid-rebuild-design.md

@@ -155,7 +155,7 @@ layers/structure/layout/app/components/
   properties via `:style`.
 - **`LayoutSection`** — see §4.
 - **`LayoutCell`** (replaces `LayoutGridItem`) — `variant: 'block' |
-'plate'` prop (border vs. filled, matching the prototype's `.block`/
+  'plate'` prop (border vs. filled, matching the prototype's `.block`/
   `.plate`), `span2` / `span2Rows` / `span3Rows` boolean/enum props. No
   `colStart`/`rowStart`/`preset`/`layer`/`bleed` — those go in the
   migration guide as removed, with the nearest equivalent noted.
@@ -207,11 +207,11 @@ inspection.
    resolved (narrow/medium viewport), squashing siblings. Fix:
    `grid-auto-columns: minmax(measure-min, 1fr)` (belt-and-braces) plus
    gating `.span-2` behind `@container viewport (min-width: 2 *
-measure-min + gutter)` so it only activates once 2 columns have
+   measure-min + gutter)` so it only activates once 2 columns have
    genuinely resolved.
 3. **Hand-synced container-query thresholds.** `@container` conditions
    can't reference custom properties — the `@container cell (max-width:
-22rem)` / `@container viewport (min-width: 46rem)` thresholds must be
+   22rem)` / `@container viewport (min-width: 46rem)` thresholds must be
    hand-kept in sync with `--measure-min`, commented at both ends.
 
 ## §8 Constraints to preserve

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

@@ -20,7 +20,7 @@
 <template>
   <NuxtContentDetail collection="blog" :slug not-found-message="Blog post not found">
     <template #headline="{ item }">
-      <div class="flex items-center gap-3 text-sm text-muted">
+      <div class="text-muted flex items-center gap-3 text-sm">
         <time v-if="asBlog(item).date">{{ formatDate(asBlog(item).date) }}</time>
         <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
           {{ asBlog(item).badge }}

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

@@ -25,7 +25,7 @@
   <NuxtContentDetail collection="gallery" :slug not-found-message="Gallery not found">
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
-        <span v-if="asGallery(item).images?.length" class="text-sm text-muted">
+        <span v-if="asGallery(item).images?.length" class="text-muted text-sm">
           {{ asGallery(item).images!.length }} image{{
             asGallery(item).images!.length === 1 ? '' : 's'
           }}
@@ -49,30 +49,30 @@
           <div
             v-for="(img, idx) in asGallery(item).images"
             :key="img.src"
-            class="overflow-hidden rounded-lg group relative"
+            class="group relative overflow-hidden rounded-lg"
           >
-            <NuxtLink :to="`/gallery/${slug}/${idx}`" class="block relative overflow-hidden">
+            <NuxtLink :to="`/gallery/${slug}/${idx}`" class="relative block overflow-hidden">
               <img
                 :src="img.src"
                 :alt="img.alt"
-                class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
+                class="h-48 w-full object-cover transition-transform duration-300 group-hover:scale-105"
               />
               <div
-                class="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"
+                class="bg-primary/60 absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
               >
-                <span class="text-white font-semibold text-sm text-center px-3">
+                <span class="px-3 text-center text-sm font-semibold text-white">
                   {{ img.title || img.alt }}
                 </span>
               </div>
             </NuxtLink>
             <button
-              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 cursor-pointer"
+              class="absolute top-2 right-2 z-10 cursor-pointer rounded-full bg-black/50 p-1.5 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 hover:bg-black/70"
               @click.stop="() => openLightbox(asGallery(item).images!, idx)"
             >
               <UIcon name="i-lucide-expand" class="size-4" />
             </button>
             <div v-if="img.caption" class="p-2">
-              <p class="text-xs text-muted line-clamp-1">
+              <p class="text-muted line-clamp-1 text-xs">
                 {{ img.caption }}
               </p>
             </div>

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

@@ -15,30 +15,30 @@
         v-for="item in items"
         :key="item.id"
         :to="item.path"
-        class="group rounded-lg border border-default overflow-hidden block"
+        class="group border-default block overflow-hidden rounded-lg border"
       >
         <div class="relative overflow-hidden">
           <img
             v-if="item.images?.[0]"
             :src="item.images[0].src"
             :alt="item.images[0].alt"
-            class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
+            class="h-48 w-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
           <div
-            class="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"
+            class="bg-primary/60 absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
           >
-            <span class="text-white font-semibold text-center px-3">
+            <span class="px-3 text-center font-semibold text-white">
               {{ item.title }}
             </span>
           </div>
         </div>
-        <div class="p-3 space-y-1.5">
-          <p class="font-medium text-highlighted">{{ item.title }}</p>
-          <p v-if="item.description" class="text-sm text-muted line-clamp-2">
+        <div class="space-y-1.5 p-3">
+          <p class="text-highlighted font-medium">{{ item.title }}</p>
+          <p v-if="item.description" class="text-muted line-clamp-2 text-sm">
             {{ item.description }}
           </p>
           <div class="flex flex-wrap items-center gap-2">
-            <span v-if="item.images?.length" class="text-xs text-muted">
+            <span v-if="item.images?.length" class="text-muted text-xs">
               {{ item.images.length }} image{{ item.images.length === 1 ? '' : 's' }}
             </span>
             <UBadge v-for="tag in item.tags" :key="tag" color="neutral" variant="subtle" size="xs">

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

@@ -43,13 +43,13 @@
         <!-- Ambient glow radiating from the image -->
         <div
           v-if="image.ambient"
-          class="absolute -inset-12 sm:-inset-20 pointer-events-none"
+          class="pointer-events-none absolute -inset-12 sm:-inset-20"
           aria-hidden="true"
         >
           <img
             :src="image.src"
             alt=""
-            class="w-full h-full object-cover blur-3xl bg-blend-luminosity mix-blend-darken dark:mix-blend-lighten opacity-40 dark:opacity-35 saturate-300 scale-x-200"
+            class="h-full w-full scale-x-200 object-cover opacity-40 bg-blend-luminosity mix-blend-darken blur-3xl saturate-300 dark:opacity-35 dark:mix-blend-lighten"
           />
           <!-- class="w-full h-full object-cover rounded-3xl blur-3xl opacity-80 dark:opacity-30 saturate-200 scale-110 bg-blend-overlay dark:mix-blend-color" -->
         </div>
@@ -63,13 +63,13 @@
         />
         <figcaption
           v-if="image.caption"
-          class="relative mt-3 text-center text-sm text-muted italic"
+          class="text-muted relative mt-3 text-center text-sm italic"
         >
           {{ image.caption }}
         </figcaption>
       </figure>
 
-      <div class="flex items-center justify-between mt-6">
+      <div class="mt-6 flex items-center justify-between">
         <UButton
           v-if="hasPrevious"
           :to="`/gallery/${slug}/${index - 1}`"
@@ -80,7 +80,7 @@
         </UButton>
         <span v-else />
 
-        <span class="text-sm text-muted"> {{ index + 1 }} / {{ totalImages }} </span>
+        <span class="text-muted text-sm"> {{ index + 1 }} / {{ totalImages }} </span>
 
         <UButton
           v-if="hasNext"
@@ -94,5 +94,5 @@
       </div>
     </UPageBody>
   </div>
-  <div v-else class="text-muted text-center py-12">Image not found</div>
+  <div v-else class="text-muted py-12 text-center">Image not found</div>
 </template>

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

@@ -50,7 +50,7 @@
     :ui="{ content: 'bg-black/95 flex items-center justify-center' }"
   >
     <template #content>
-      <div class="relative w-full h-full flex items-center justify-center p-4">
+      <div class="relative flex h-full w-full items-center justify-center p-4">
         <!-- Close -->
         <UButton
           icon="i-lucide-x"
@@ -82,7 +82,7 @@
           :alt="currentImage.alt"
           :width="currentImage.width"
           :height="currentImage.height"
-          class="max-w-full max-h-full object-contain"
+          class="max-h-full max-w-full object-contain"
         />
 
         <!-- Next -->
@@ -97,7 +97,7 @@
         />
 
         <!-- Counter -->
-        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-sm">
+        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm text-white">
           {{ currentIndex + 1 }} / {{ images.length }}
         </div>
       </div>

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

@@ -58,6 +58,6 @@
         <NuxtContentToc v-bind="item.body?.toc?.links ? { links: item.body.toc.links } : {}" />
       </template>
     </UPage>
-    <div v-else class="text-muted text-center py-12">{{ notFoundMessage }}</div>
+    <div v-else class="text-muted py-12 text-center">{{ notFoundMessage }}</div>
   </div>
 </template>

package/layers/content/app/components/NuxtContent/List.vue

@@ -16,6 +16,6 @@
     <template v-else-if="hasItems">
       <slot />
     </template>
-    <div v-else class="text-muted text-center py-12">{{ emptyMessage }}</div>
+    <div v-else class="text-muted py-12 text-center">{{ emptyMessage }}</div>
   </div>
 </template>

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

@@ -16,18 +16,18 @@
 
 <template>
   <div v-if="colors.length" class="space-y-6">
-    <h3 class="text-2xl font-semibold tracking-tight text-highlighted">Palette</h3>
+    <h3 class="text-highlighted text-2xl font-semibold tracking-tight">Palette</h3>
     <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"
+          class="border-default/20 flex aspect-2/3 cursor-default flex-col justify-between rounded-lg border p-4 shadow-lg"
           :style="{ backgroundColor: color.value, color: contrastColor(color.value) }"
         >
           <div>
-            <p class="text-sm font-medium leading-tight">{{ color.name }}</p>
-            <p v-if="color.usage" class="text-xs mt-1 opacity-60">{{ color.usage }}</p>
+            <p class="text-sm leading-tight font-medium">{{ color.name }}</p>
+            <p v-if="color.usage" class="mt-1 text-xs opacity-60">{{ color.usage }}</p>
           </div>
-          <p class="text-xs font-mono uppercase opacity-50">{{ color.value }}</p>
+          <p class="font-mono text-xs uppercase opacity-50">{{ color.value }}</p>
         </div>
       </div>
     </LinksGroup>