kmcom-nuxt-layers 4.0.0 → 5.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>

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

@@ -48,7 +48,7 @@
         v-if="asPortfolio(item).image"
         :src="asPortfolio(item).image"
         :alt="item.title"
-        class="w-full rounded-lg mb-8"
+        class="mb-8 w-full rounded-lg"
       />
     </template>
 

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

@@ -56,7 +56,7 @@
           v-if="item.image"
           :src="item.image"
           :alt="item.title"
-          class="w-full h-48 object-cover rounded"
+          class="h-48 w-full rounded object-cover"
         />
         <template #footer>
           <div class="flex flex-wrap gap-1.5">

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

@@ -8,24 +8,24 @@
 
 <template>
   <div v-if="typography.length" class="space-y-6">
-    <h3 class="text-2xl font-semibold tracking-tight text-highlighted">Typography</h3>
+    <h3 class="text-highlighted text-2xl font-semibold tracking-tight">Typography</h3>
     <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="font-name font-semibold text-highlighted tracking-tight truncate">
+          <p class="font-name text-highlighted truncate font-semibold tracking-tight">
             {{ font.name }}
           </p>
-          <p v-if="font.usage" class="text-sm text-muted shrink-0">{{ font.usage }}</p>
+          <p v-if="font.usage" class="text-muted shrink-0 text-sm">{{ font.usage }}</p>
         </div>
         <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">
+          <span class="text-muted font-mono text-xs tracking-widest uppercase opacity-50">
             Weights
           </span>
           <span
             v-for="weight in font.weights"
             :key="weight"
-            class="text-xs font-mono text-muted uppercase tracking-widest"
+            class="text-muted font-mono text-xs tracking-widest uppercase"
           >
             {{ weight }}
           </span>

package/layers/content/app/components/content/Figure.vue

@@ -17,7 +17,7 @@
 <template>
   <figure class="my-6">
     <img :src :alt :width :height class="w-full rounded-lg" />
-    <figcaption v-if="caption" class="mt-2 text-center text-sm text-muted italic">
+    <figcaption v-if="caption" class="text-muted mt-2 text-center text-sm italic">
       {{ caption }}
     </figcaption>
   </figure>

package/layers/core/app/assets/css/core.css

@@ -17,8 +17,8 @@
    source/import order still decides the winner. */
 @layer theme, base, components, utilities;
 
-@import 'tailwindcss';
-@import '@nuxt/ui';
+@import "tailwindcss";
+@import "@nuxt/ui";
 
 @config '#layers/core/tailwind.config.js';
 
@@ -28,18 +28,18 @@
 @source '../../../../*/app/**/*.{vue,ts}';
 @source '../../../../../apps/*/app/**/*.{vue,ts}';
 
-@import '#layers/core/app/assets/css/layout.css';
-@import '#layers/core/app/assets/css/base.css';
-@import '#layers/core/app/assets/css/tokens/breakpoints.css';
-@import '#layers/core/app/assets/css/tokens/spacing-fluid.css';
-@import '#layers/core/app/assets/css/tokens/container.css';
+@import "#layers/core/app/assets/css/layout.css";
+@import "#layers/core/app/assets/css/base.css";
+@import "#layers/core/app/assets/css/tokens/breakpoints.css";
+@import "#layers/core/app/assets/css/tokens/spacing-fluid.css";
+@import "#layers/core/app/assets/css/tokens/container.css";
 
 /* Relative path, not the '#layers/typography' alias — that alias only exists
    when the typography layer is in a consumer's `extends`. This file is a CSS
    import (needed so Tailwind treats it as part of this one build root, see
    typography.css's header comment), and must resolve even for consumers that
    only extend core, since it lives in the same single published package. */
-@import '../../../../design-system/typography/app/assets/css/typography.css';
+@import "../../../../design-system/typography/app/assets/css/typography.css";
 
 /* Same relative-path requirement as typography.css above. tokens.css defines
    an `@theme static` block (radius/shadow/duration) — per the CSS
@@ -51,4 +51,4 @@
    every rounded-, shadow-, duration- utility fell back to Tailwind's stock
    defaults instead of this file's values. Confirmed via compiled dev output:
    the custom --shadow-sm value never appeared; Tailwind's built-in default did. */
-@import '../../../../design-system/theming/app/assets/css/tokens.css';
+@import "../../../../design-system/theming/app/assets/css/tokens.css";

package/layers/core/app/assets/css/layout.css

@@ -14,7 +14,7 @@
   hr {
     margin: 1rem 0;
     border: 0;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid oklch(84.52% 0 0deg);
   }
 
   img,

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

@@ -30,7 +30,7 @@
       <ClientOnly>
         <div class="space-y-8">
           <div class="text-center">
-            <h1 class="text-4xl font-bold mb-2">Core Layer Diagnostics</h1>
+            <h1 class="mb-2 text-4xl font-bold">Core Layer Diagnostics</h1>
             <p class="text-gray-500 dark:text-gray-400">Feature detection and system information</p>
           </div>
 
@@ -124,7 +124,7 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Type:</span>
+                <span class="w-24 font-medium">Type:</span>
                 <span v-if="isMobile" class="text-primary">Mobile</span>
                 <span v-else-if="isTablet" class="text-primary">Tablet</span>
                 <span v-else-if="isDesktop" class="text-primary">Desktop</span>
@@ -138,16 +138,16 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Status:</span>
+                <span class="w-24 font-medium">Status:</span>
                 <span v-if="isOnline" class="text-green-500">Online</span>
                 <span v-else class="text-red-500">Offline</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Type:</span>
+                <span class="w-24 font-medium">Type:</span>
                 <span>{{ effectiveType || 'unknown' }}</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Quality:</span>
+                <span class="w-24 font-medium">Quality:</span>
                 <span
                   :class="{
                     'text-green-500': connectionQuality === 'excellent',
@@ -160,13 +160,13 @@
                 </span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Speed:</span>
+                <span class="w-24 font-medium">Speed:</span>
                 <span v-if="isFast" class="text-green-500">Fast</span>
                 <span v-else-if="isSlow" class="text-red-500">Slow</span>
                 <span v-else>Normal</span>
               </div>
               <div v-if="saveData" class="flex items-center gap-2">
-                <span class="font-medium w-24">Data Saver:</span>
+                <span class="w-24 font-medium">Data Saver:</span>
                 <span class="text-yellow-500">Enabled</span>
               </div>
             </div>
@@ -178,16 +178,16 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Mode:</span>
-                <span class="uppercase text-primary">{{ mode }}</span>
+                <span class="w-24 font-medium">Mode:</span>
+                <span class="text-primary uppercase">{{ mode }}</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Environment:</span>
+                <span class="w-24 font-medium">Environment:</span>
                 <span v-if="isClient" class="text-primary">Client</span>
                 <span v-else-if="isServer" class="text-primary">Server</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Hydrated:</span>
+                <span class="w-24 font-medium">Hydrated:</span>
                 <span v-if="isHydrated" class="text-green-500">Yes</span>
                 <span v-else class="text-yellow-500">No</span>
               </div>
@@ -200,17 +200,17 @@
             </template>
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Installed:</span>
+                <span class="w-24 font-medium">Installed:</span>
                 <span v-if="isInstalled" class="text-green-500">Yes</span>
                 <span v-else class="text-gray-500">No</span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium w-24">Installable:</span>
+                <span class="w-24 font-medium">Installable:</span>
                 <span v-if="canInstall" class="text-green-500">Yes</span>
                 <span v-else class="text-gray-500">No</span>
               </div>
               <div v-if="needRefresh" class="flex items-center gap-2">
-                <span class="font-medium w-24">Update:</span>
+                <span class="w-24 font-medium">Update:</span>
                 <span class="text-yellow-500">Available</span>
               </div>
             </div>
@@ -218,7 +218,7 @@
         </div>
 
         <template #fallback>
-          <div class="text-center text-muted py-16">Loading diagnostics…</div>
+          <div class="text-muted py-16 text-center">Loading diagnostics…</div>
         </template>
       </ClientOnly>
     </UContainer>

package/layers/core/app/components/Element.test.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import Element from './Element.vue'
 

package/layers/core/app/components/ElementTw.test.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import ElementTw from './ElementTw.vue'
 

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

@@ -61,25 +61,25 @@
     <template #error="{ error, clearError }">
       <slot name="error" :error :clear-error>
         <!-- Default error UI -->
-        <div class="rounded-lg border border-error bg-error/10 p-4">
+        <div class="border-error bg-error/10 rounded-lg border p-4">
           <div class="flex items-start gap-3">
             <!-- Error icon -->
             <span
-              class="iconify i-lucide:alert-circle mt-0.5 shrink-0 text-error"
+              class="iconify i-lucide:alert-circle text-error mt-0.5 shrink-0"
               aria-hidden="true"
             />
 
             <!-- Error content -->
             <div class="flex-1 space-y-2">
               <!-- Error message -->
-              <p class="text-sm font-medium text-error">
+              <p class="text-error text-sm font-medium">
                 {{ message }}
               </p>
 
               <!-- Error details (dev only) -->
               <details v-if="showDetails && import.meta.dev" class="text-xs">
-                <summary class="cursor-pointer text-muted">Show error details</summary>
-                <pre class="mt-2 overflow-x-auto rounded bg-elevated p-2">{{ error }}</pre>
+                <summary class="text-muted cursor-pointer">Show error details</summary>
+                <pre class="bg-elevated mt-2 overflow-x-auto rounded p-2">{{ error }}</pre>
               </details>
 
               <!-- Retry button -->

package/layers/core/app/composables/useElementGrid.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementGrid } from './useElementGrid'
 

package/layers/core/app/composables/useElementInteraction.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { useElementInteraction } from './useElementInteraction'