nuxt-unified-ui 0.5.14 → 0.5.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {
@@ -20,15 +20,15 @@
   ],
   "dependencies": {
     "@formkit/tempo": "1.1.0",
-    "@iconify-json/lucide": "1.2.135",
+    "@iconify-json/lucide": "1.2.136",
     "@nuxt/kit": "4.5.2",
-    "@nuxt/ui": "4.11.1",
+    "@nuxt/ui": "4.11.2",
     "@nuxtjs/i18n": "10.6.0",
     "@types/canvas-confetti": "1.9.0",
     "@vueuse/core": "15.0.0",
     "@vueuse/nuxt": "15.0.0",
     "canvas-confetti": "1.9.4",
-    "radashi": "12.9.5",
+    "radashi": "12.9.6",
     "unified-mongo-filter": "0.4.0"
   },
   "peerDependencies": {

package/skills/nuxt-unified-ui/SKILL.md

@@ -8,10 +8,11 @@ description: >-
   (attribute order, row actions, pagination), pages /
   definePageMeta, page /* params */ and /* seo */ blocks, ufetch / useUFetch wrapping, unified resources
   (server plugins, REST handleResource*, resource-manager dashboard /
-  customization), attribute order/defaults, and whitespace/formatting
-  conventions for all Nuxt-generated code. Use when working in or consuming
-  nuxt-unified-ui, declaring or customizing resources, or whenever generating
-  Vue/Nuxt code that must match unified code style.
+  customization), layer-private app/atoms and app/libs vs public
+  components/utils (relative imports), attribute order/defaults, and
+  whitespace/formatting conventions for all Nuxt-generated code. Use when
+  working in or consuming nuxt-unified-ui, declaring or customizing resources,
+  or whenever generating Vue/Nuxt code that must match unified code style.
 ---
 
 # nuxt-unified-ui
@@ -69,12 +70,13 @@ Absolute highlights:
 - Kebab-case tags (`u-button`, `un-card`)
 - `v-if` / `v-for` on `<template>` wrappers — not on rendered nodes
 - If a condition changes several component attributes, prefer explicit `<template v-if>` / `v-else` component variants over nested ternaries and overly dynamic bindings
-- **2+ attributes → one per line** except structural **`template` wrappers** and **`u-modal`** (keep either on one line); attribute order + default omissions (`variant="subtle"`, **Cancel only → `ghost`**, omit neutral `color`, `loading-auto`); non-self-closing `>` on same line as last attr; multi-line self-closing `/>` on its own line
+- Tags with children keep all attributes on one line with the opening tag unless a multiline attribute (multi-line array/object/function binding) forces a split — then the opening tag goes on its own line, one attribute per line, value styled like JS; childless tags are self-closing — one single-line attribute stays inline, otherwise tag and attributes each go on their own line with `/>` on its own line; attribute order + default omissions (`variant="subtle"`, **Cancel only → `ghost`**, omit neutral `color`, `loading-auto`); split non-self-closing `>` on same line as last attr; split self-closing `/>` on its own line
 - `{{ ... }}` on its own line (static + dynamic text may mix)
 - `/* section */` comments; imports co-located under the section that uses them
 - Light naming: `handleXxx` handlers, `it` in short callbacks, descriptive `for...of`, computeds use block + `return`
 - Pages: explicit `definePageMeta.name`, `/* params */` for `route.params` / `route.query`, required `/* seo */` (`useHead` + `useSeoMeta`, `useJsonld` when installed) → [pages.md](references/pages.md)
 - Fetching: `ufetch(url, {` one line; `useUFetch` with URL on next line + `data*Data` / `is*Loading` / `refresh*` → [data-fetching.md](references/data-fetching.md)
+- Layer modules: generate private first (`app/atoms/` components, `app/libs/` functions and similar); promote to `app/components/` / `app/utils/` only when another layer needs them; import `atoms`/`libs` with relative paths → [code-style.md](references/code-style.md)
 
 ---
 
@@ -152,6 +154,7 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 | New page / route | [pages.md](references/pages.md) |
 | List/detail fetch or mutation | [data-fetching.md](references/data-fetching.md) |
 | New / custom resource | [resources.md](references/resources.md) |
+| New component / util in a layer | Start in `app/atoms/` or `app/libs/`; relative imports; promote to `components/` / `utils/` only if another layer needs it → [code-style.md](references/code-style.md) |
 | Formatting any of the above | [code-style.md](references/code-style.md) |
 
 ## Do / don’t
@@ -164,6 +167,7 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 - Handle dialog actions in `onClick`
 - Follow code style for every generated file
 - Resources: plugin → full REST set → dashboard nav / custom `<resource-manager>` page → [resources.md](references/resources.md)
+- Start generated layer components in `app/atoms/` and functions in `app/libs/`; import them with relative paths; move to `app/components/` / `app/utils/` only when another layer needs them
 
 **Don’t**
 
@@ -173,3 +177,5 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 - Set choice-button `value` unless the await result must distinguish buttons
 - Assume color mode is enabled (layer disables it)
 - Reimplement resource CRUD in route files (use `handleResource*`; customize via dedicated pages + domain APIs)
+- Put a layer-private component or util in `components/` or `utils/` (becomes app-global)
+- Import `atoms`/`libs` via `~/`, `#layers`, or from another layer — use relative paths; promote first if another layer needs them

package/skills/nuxt-unified-ui/references/code-style.md

@@ -1,8 +1,8 @@
 # Nuxt unified code style
 
-**Mandatory** whenever generating or editing code in a Nuxt project that uses this stack. Applies to **all** Nuxt project files: Vue SFCs and `.ts`/`.js` under `app/`, `server/`, composables, utils, plugins, middleware, etc.
+**Mandatory** whenever generating or editing code in a Nuxt project that uses this stack. Applies to **all** Nuxt project files: Vue SFCs and `.ts`/`.js` under `app/` (including `atoms/` and `libs/`), `server/`, composables, utils, plugins, middleware, etc.
 
-This document is about the **look and shape** of code — whitespace, wrapping, braces, template structure, sectioning, and light naming that affects scanning — not business logic or architecture.
+This document is about the **look and shape** of code — whitespace, wrapping, braces, template structure, sectioning, file placement for layer-private vs public modules, and light naming that affects scanning — not business logic.
 
 ---
 
@@ -19,8 +19,8 @@ Write code so a reader can **scan vertically** and see structure before details.
 3. **One idea per line in structured data.**
    Object/array literals in script are multi-line with trailing commas — even single-property objects passed to helpers (`toastSuccess`, `ufetch` options, etc.). Compact one-liners hide diffs and force horizontal reading.
 
-4. **Templates are layout, not mini-scripts.**
-   Structural directives live on one-line `<template>` wrappers so the rendered node stays a clean component/element. Rendered component attributes wrap predictably (`u-modal` stays one line); closing `>` / `/>` placement is consistent; interpolations sit on their own line (static + dynamic text may share one `{{ ... }}` or surrounding text).
+4. **Templates stay single-line unless a multiline attribute — or a childless multi-attribute tag — forces a split.**
+   A tag with children keeps all attributes on the same single line as the opening tag — no wrapping for length or attribute count. Only a multiline attribute (an array, object, or function literal bound to an attribute that spans multiple lines) forces such a tag to split: then the opening tag goes on its own line, every other attribute gets its own line, and the multiline value is formatted like a JS literal. Childless tags follow their own exception (self-closing; split when they carry more than one attribute or a multiline attribute). Closing `>` / `/>` placement is consistent; interpolations sit on their own line (static + dynamic text may share one `{{ ... }}` or surrounding text).
 
 5. **Section comments are the map.**
    `/* section */` labels define logical domains, while declaration-kind spacing exposes the structure inside each domain. Imports sit in the section that needs them, not in a hoisted pile at the top.
@@ -49,6 +49,7 @@ When editing an existing file, **absolute rules below always win**. For choices
 | Braces | always for `if` / `else` / `for` / `while` — no brace-less single-liners |
 | `else` / `catch` | on their **own line** after `}` |
 | `.js` / `.ts` file start | **two** blank lines at the top, **unless** the file starts with imports — then **no** blank lines before the first `import` |
+| **Single-line principle (JS/TS only)** | **Do not wrap JS/TS code solely because it has grown long**; keep every statement on a single line unless the explicit JS/TS wrapping rules below dictate otherwise. The default is single-statement-per-line; only break across lines when a specific rule permits or requires it. Template sections have their own rule (single-line attributes unless a multiline attribute forces a split) — see Template rules. |
 
 ---
 
@@ -296,9 +297,9 @@ const response = await ufetch(
 
 ### Template bindings — compactness
 
-- Single-key object binding may stay inline: `:ui="{ content: 'max-w-7xl' }"`
-- Multi-key template object/array bindings are multi-line
-- Simple scalars and simple ternaries stay inline; break only when branches become objects/arrays or nested structure
+- A bound array, object, or function literal that spans multiple lines is a **multiline attribute** and forces the tag to split (see Attribute wrapping). A single-pair object with scalar values stays inline and does **not** trigger a split: `:ui="{ content: 'max-w-7xl' }"`
+- Multi-key or nested template object/array bindings are multiline attributes: split the tag and format the value like a JS literal
+- Simple scalars and simple ternaries stay inline; break only when a branch becomes a multiline object/array or nested structure
 - When one condition changes several attributes, labels/icons, or an object-shaped binding such as `to`, use adjacent `<template v-if>` / `v-else-if` / `v-else` branches with explicit component variants. Prefer small markup duplication over nested ternaries and overly dynamic attributes.
 
 ```vue
@@ -372,7 +373,7 @@ The comment names a logical domain, not a declaration kind. Follow it with a bla
 ```ts
 /* resource */
 
-import ResourceExplorerCell from '~/atoms/resource-explorer-cell.vue';
+import ResourceExplorerCell from '../atoms/resource-explorer-cell.vue';
 
 
 const itemsPerPage = ref(20);
@@ -431,6 +432,39 @@ Place non-auto-imported imports **inside the section that uses them**, not hoist
 import { VisXYContainer, VisLine } from '@unovis/vue';
 ```
 
+### Layer-private `atoms` / `libs` vs public `components` / `utils`
+
+Nuxt auto-imports `app/components/` and `app/utils/` across the **entire** app (every layer). Files that must stay inside one layer do not belong there.
+
+Any component or util in a layer which is not supposed to be used from another layer should be put in (`atoms` for components) and (`libs` for functions and ...), and if we notice that one of these is needed in another layer, we move it to `components` or `utils` folder. A generated component or util starts in these private folders, then moves into public ones if needed. These should be imported with relative path in their callsites.
+
+| Role | Directory | Visibility |
+|------|-----------|------------|
+| Private Vue component | `app/atoms/` | This layer only |
+| Private function / helper / similar | `app/libs/` | This layer only |
+| Public Vue component | `app/components/` | Whole app (auto-imported) |
+| Public util | `app/utils/` | Whole app (auto-imported) |
+
+`app/composables/` is public like `utils/`. Private composables and other non-component helpers go in `app/libs/`.
+
+**Generate private first.** New components go in `app/atoms/`. New functions and similar go in `app/libs/`. Promote (move the file, update call sites) to `app/components/` or `app/utils/` only when another layer needs them. After a promote, drop the relative import — public modules are auto-imported.
+
+**Import `atoms` / `libs` with relative paths only** (`../atoms/foo.vue`, `../libs/bar`). Never `~/`, `@/`, `#layers/`, or other aliases. Never import another layer's `atoms` or `libs`; promote first, then use the public auto-import.
+
+Do not register `atoms` or `libs` with Nuxt `components` / `imports` config.
+
+```ts
+// ✅ same layer
+import ResourceExplorerCell from '../atoms/resource-explorer-cell.vue';
+import { formatColumn } from '../libs/format-column';
+```
+
+```ts
+// ❌ aliases / other layers
+import ResourceExplorerCell from '~/atoms/resource-explorer-cell.vue';
+import { formatColumn } from '#layers/other-layer/libs/format-column';
+```
+
 ### Watcher formatting
 
 - Prefer `watchImmediate` over `watch(..., { immediate: true })`
@@ -475,40 +509,69 @@ Keep tight `v-if` / `v-else` chains adjacent (no blank line between matching bra
 
 ### Attribute wrapping (hard rule)
 
-- **0–1 attributes:** may stay on one line with the tag
-- **Structural `<template>` wrappers:** keep the opening tag on one line, even with several directives, keys, or dynamic slot bindings
-- **2+ attributes on rendered elements/components:** one attribute per line — **except `u-modal`**
-- **`u-modal` only:** keep **all** attributes on the **same single line** as the tag (do not wrap), even when there are many
+- **Childless tags must be self-closing:** a tag with no children is written `<tag ... />` — never an empty open/close pair (`<tag ...></tag>`).
+- **Tags with children — single line unless multiline:** all attributes stay on the **same single line** as the opening tag, regardless of attribute count or line length. Never wrap only because the line got long or because there are 2+ attributes. This applies equally to rendered elements, components, `u-modal`, and structural `<template>` wrappers.
+- **Only trigger for tags with children — multiline attribute:** such a tag splits only when one of its attributes is a **multiline attribute**: an array, object, or function literal bound to the attribute that spans multiple lines (e.g. `:class="{\n … \n}"`, `:items="[\n … \n]"`). References, calls, and scalar expressions (`:field="field"`, `v-bind="radOmit(action, [...])"`, `:is="elementsMap[x]"`, `@click="handleSave"`) are **not** multiline attributes, even when their runtime value is an object. A single-pair object with scalar values (`:ui="{ content: 'max-w-5xl' }"`) stays inline and does **not** trigger a split.
+- **Childless exception:** a childless (self-closing) tag with a single single-line attribute stays on one line with the tag (`<u-icon name="lucide:check" />`). When it has more than one attribute **or** at least one multiline attribute, the tag and its attributes each go on their own line: the opening tag on its own line (`<tag`), one attribute per line in attribute order, and `/>` on its own line.
+- **Split shape (tags with children):** when a multiline attribute triggers the split, the opening tag goes on its **own line** (`<tag`), every other attribute gets **its own line** in attribute order, and the multiline attribute's value is formatted **like a JS value** (one entry per line, trailing commas). Closing `>` / `/>` placement follows [`>` and `/>` placement](#-and--placement).
 
 ```vue
-<!-- ✅ 0–1 attributes — inline OK -->
-<div class="space-y-3">
-<u-form-field label="Captcha">
+<!-- ✅ tag with children, no multiline attribute — one line, however many attributes -->
+<u-modal :ui="{ content: 'max-w-5xl' }" scrollable @update:open="!$event && emit('close')">
   ...
-</u-form-field>
-<u-icon name="lucide:check" />
+</u-modal>
 
-<!-- ✅ structural template wrappers stay on one line -->
+<!-- ✅ structural template wrappers follow the same rule -->
 <template v-for="column in columns" :key="column.accessorKey" #[column.accessorKey+'-cell']="{ row }">
   ...
 </template>
 
-<!-- ✅ u-modal — always one line (exception) -->
-<u-modal :ui="{ content: 'max-w-5xl' }" scrollable @update:open="!$event && emit('close')">
+<!-- ✅ tag with children + multiline attribute — splits, value styled like JS -->
+<div
+  v-if="show"
+  :class="{
+    'p-3': !fluidBody,
+  }">
   ...
-</u-modal>
+</div>
+
+<!-- ✅ childless, single single-line attribute — one line -->
+<u-icon name="lucide:check" />
 
-<!-- ✅ other components — 2+ attributes, one per line -->
+<!-- ✅ childless, more than one attribute — tag and attributes each on their own line -->
 <u-button
   variant="subtle"
   icon="lucide:refresh-ccw"
   @click="refresh"
 />
+
+<!-- ✅ childless with a multiline attribute — same split shape -->
+<component
+  :is="elementsMap[field.identifier]"
+  :field="field"
+  :class="{
+    'p-2': true,
+  }"
+/>
+
+<!-- ❌ childless multi-attribute tag on one line -->
+<u-button variant="subtle" icon="lucide:refresh-ccw" @click="refresh" />
+
+<!-- ❌ empty open/close pair — self-close instead -->
+<div class="grow"></div>
+
+<!-- ❌ splitting a tag with children that has no multiline attribute -->
+<un-card
+  icon="lucide:key"
+  :title="title"
+  fluid-body>
+  ...
+</un-card>
 ```
 
 ### Attribute order
 
-When wrapping, order attributes as:
+When a multiline attribute forces a split, order attributes as:
 
 1. Refs / identity: `ref`, `id`, `name`
 2. Component visual props: `variant`, `color`, `size`, `icon`, static `label`
@@ -573,27 +636,30 @@ Prefer defaults by **omitting** props rather than restating them:
 ```
 ### `>` and `/>` placement
 
-**Non-self-closing**, multi-attribute: `>` on the **same line** as the last attribute:
+Single-line tags keep their closer on the same line (`<u-icon name="lucide:check" />`, `<div class="space-y-3">`).
+
+**Split (multiline-attribute) non-self-closing:** `>` on the **same line** as the last attribute:
 
 ```vue
-<un-card
-  icon="lucide:key"
-  :title="title"
-  fluid-body>
+<div
+  v-if="show"
+  :class="{
+    'p-3': !fluidBody,
+  }">
   ...
-</un-card>
+</div>
 ```
 
-**Self-closing**, multi-attribute: `/>` on its **own line**; always a space before `/>`:
+**Split self-closing (childless multi-attribute or multiline attribute):** `/>` on its **own line**; always a space before `/>`:
 
 ```vue
-<u-button
-  variant="subtle"
-  icon="lucide:refresh-ccw"
-  @click="refresh"
+<component
+  :is="elementsMap[field.identifier]"
+  :field="field"
+  :class="{
+    'p-2': true,
+  }"
 />
-
-<u-icon name="lucide:check" />
 ```
 
 Closing tags for block components (`</un-card>`, `</u-modal>`, …) always on their own line.
@@ -766,8 +832,10 @@ export default defineEventHandler(async event => {
 | `if (!x) return;` | braced block |
 | `} else {` | `}\nelse {` |
 | `toastSuccess({ title: 'x' })` one-liner object | multi-line object + trailing comma |
-| 3 attrs on one line (rendered element/component other than `u-modal`) | one attr per line |
-| Multi-line `u-modal` attrs | keep `u-modal` attrs on one line |
+| Splitting a tag with children that has no multiline attribute (wrapping for count/length) | keep all attributes on one line with the opening tag |
+| Childless multi-attribute tag on one line | split: opening tag on its own line, one attribute per line, `/>` on its own line |
+| Empty open/close pair (`<div ...></div>`) | self-close (`<div ... />`) |
+| Keeping a tag single-line when it has a multiline attribute | split: opening tag on its own line, one attribute per line, value like JS |
 | `>` on its own line after attrs | `>` after last attr |
 | `{{ x }}` glued to tags | interpolation on its own line (static + dynamic mix OK) |
 | `ghost` on non-Cancel buttons | `ghost` only for Cancel |
@@ -781,6 +849,10 @@ export default defineEventHandler(async event => {
 | `.ts`/`.js` with no leading blanks (and no imports) | two blank lines at file start |
 | Blank lines before first `import` | `import` on line 1 |
 | Blank lines around a function that is only one `for` / `if` / `try` chain | Function `{` / `}` flush against that block |
+| Layer-private component in `components/` | `app/atoms/` |
+| Layer-private util in `utils/` or `composables/` | `app/libs/` |
+| `~/atoms/...` / `#layers/.../atoms` / `#layers/.../libs` | Relative `../atoms/...` / `../libs/...` |
+| Import another layer's `atoms` or `libs` | Promote to `components/` / `utils/`, then auto-import |
 
 ---
 
@@ -796,11 +868,11 @@ export default defineEventHandler(async event => {
 - [ ] Tiny helpers stay tight
 - [ ] Return-only multi-criteria functions use a compact exhaustive `if` / `else if` / `else`; broader functions may use early returns
 - [ ] `else` / `catch` on new line
-- [ ] Script objects multi-line; template single-key objects may be inline
+- [ ] Script objects multi-line (the JS/TS single-line principle does not cover templates); template tags stay single-line unless a multiline attribute (multi-line array/object/function binding) forces a split; single-pair scalar objects (e.g. `:ui="{ content: '...' }"`) stay inline
 - [ ] Kebab-case component tags
 - [ ] `v-if` / `v-for` on `<template>` wrappers
 - [ ] Conditional states that change several attributes use explicit `<template v-if>` component variants, not nested ternaries
-- [ ] Structural `<template>` wrappers stay on one line; rendered elements/components with 2+ attributes wrap one per line (**`u-modal` stays on one line**); closing `>` / `/>` placement is correct
+- [ ] Tags with children keep all attributes on one line with the opening tag unless a multiline attribute forces a split (opening tag on its own line, one attribute per line, value like JS); childless tags are self-closing — single single-line attribute stays inline, otherwise tag and attributes each go on their own line with `/>` on its own line; closing `>` / `/>` placement is correct
 - [ ] Attribute order + default-value omissions respected (`subtle`, **Cancel → `ghost` only**, no neutral color noise, `loading-auto`)
 - [ ] `{{ }}` on own line (static + dynamic mix OK)
 - [ ] Every section is named; imports are co-located with the section that uses them
@@ -808,3 +880,4 @@ export default defineEventHandler(async event => {
 - [ ] Computeds that return structures use block + `return`
 - [ ] Pages: explicit `definePageMeta.name`, `/* params */` + `/* seo */` placement, named navigation ([pages.md](pages.md))
 - [ ] Fetching: `ufetch` / `useUFetch` wrap styles and destructure names ([data-fetching.md](data-fetching.md))
+- [ ] New layer components/utils start in `app/atoms/` or `app/libs/`; `atoms`/`libs` imported with relative paths only; promote to `components/` / `utils/` only when another layer needs them

package/skills/nuxt-unified-ui/references/dialogs.md

@@ -156,7 +156,7 @@ Action entries support `actionType: 'spacer'` (flex grow) and optional `tooltip`
 
 Cancel / dismiss actions use `variant: 'ghost'` (or `variant="ghost"`). Do **not** use `ghost` on primary/submit/other actions — prefer omit / `subtle`.
 
-Hand-rolled dialog shells keep **`u-modal` attributes on one line** (see [code-style.md](code-style.md)):
+Hand-rolled dialog shells follow the template single-line rule — this shell has no multiline attribute, so it stays on one line (see [code-style.md](code-style.md)):
 
 ```vue
 <u-modal :ui="{ content: 'max-w-5xl' }" scrollable @update:open="!$event && emit('close')">
@@ -169,7 +169,7 @@ Hand-rolled dialog shells keep **`u-modal` attributes on one line** (see [code-s
 - Prefer `launchFormPickerDialog` / `launchChoicePickerDialog` over hand-rolled `u-modal` for these flows
 - Handle actions in button / submit `onClick`
 - Keep field lists consistent with `un-form` (`identifier`, not `type`, for element kind)
-- Mark Cancel with `variant: 'ghost'`; keep `u-modal` attrs on one line
+- Mark Cancel with `variant: 'ghost'`; keep dialog shells single-line unless a multiline attribute forces a split
 
 **Don’t**
 

package/skills/nuxt-unified-ui/references/tables.md

@@ -57,7 +57,7 @@ Omit unused props. When present, write them in this order:
 13. `:extra-actions`
 14. `:meta`
 
-Models are always **page size, then page**. Closing `>` sits on the same line as the last attribute.
+Models are always **page size, then page**. Attributes stay on one line with the opening tag (a multiline attribute is the only split trigger — see [code-style.md](code-style.md)).
 
 ### Paged table
 
@@ -84,10 +84,7 @@ Models are always **page size, then page**. Closing `>` sits on the same line as
 No footer, no page models, no `total-items`:
 
 ```vue
-<un-card
-  :icon="icon"
-  :title="title"
-  fluid-body>
+<un-card :icon="icon" :title="title" fluid-body>
   <un-table
     :columns="columns"
     :data="rows"
@@ -298,10 +295,7 @@ const currentPage = ref(1);
 Prefer an `un-card` with `fluid-body` so the table and footer are edge-to-edge:
 
 ```vue
-<un-card
-  :title="`Manage ${titlePlural}`"
-  fluid-body
-  :append-actions="toolbarActions">
+<un-card :title="`Manage ${titlePlural}`" fluid-body :append-actions="toolbarActions">
   <un-table
     :columns="columns"
     :loading="isItemsLoading"

package/skills/nuxt-unified-ui/references/toast-and-ui.md

@@ -60,7 +60,10 @@ Action buttons: `loading-auto`, props via `radOmit` excluding `actionType` / `to
 ## `un-spinner` — `app/components/un-spinner.vue`
 
 ```vue
-<u-icon name="lucide:loader-circle" class="animate-spin" />
+<u-icon
+  name="lucide:loader-circle"
+  class="animate-spin"
+/>
 ```
 
 No props.