nuxt-unified-ui 0.5.4 → 0.5.6

package/app/components/un-card.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   titleClasses?: string;
   subtitleClasses?: string;
   textClasses?: string;
+  headerLevel?: number;
 
   fluidBody?: boolean;
 
@@ -42,6 +43,7 @@ const slots = useSlots();
       :icon-classes="props.iconClasses"
       :title-classes="props.titleClasses"
       :subtitle-classes="props.subtitleClasses"
+      :header-level="props.headerLevel"
       class="p-3">
 
       <template v-if="isSlotFilled(slots.title)" #title>

package/app/components/un-typography.vue

@@ -27,11 +27,36 @@ const props = defineProps({
   textClasses: {
     type: String,
   },
+  headerLevel: {
+    type: Number,
+    default: 2,
+  },
 });
 
 const slots = useSlots();
 
 
+/* header */
+
+const titleTag = computed(() => {
+  return `h${resolveHeaderLevel(props.headerLevel)}`;
+});
+
+const subtitleTag = computed(() => {
+  return `h${Math.min(resolveHeaderLevel(props.headerLevel) + 1, 6)}`;
+});
+
+
+function resolveHeaderLevel(level) {
+  if (level >= 1 && level <= 6) {
+    return level;
+  }
+  else {
+    return 2;
+  }
+}
+
+
 /* flags */
 
 const shouldShow = computed(() => {
@@ -59,12 +84,12 @@ const shouldShow = computed(() => {
           <template v-if="props.title || isSlotFilled(slots.title)">
             <div style="font-size: 1.3em;">
               <slot name="title">
-                <h1
-                  v-if="props.title"
+                <component
+                  :is="titleTag"
                   class="font-medium"
                   :class="props.titleClasses">
                   {{ props.title }}
-                </h1>
+                </component>
               </slot>
             </div>
           </template>
@@ -74,12 +99,12 @@ const shouldShow = computed(() => {
         <template v-if="props.subtitle || isSlotFilled(slots.subtitle)">
           <div style="font-size: 0.9em;" :style="{ marginInlineStart: props.icon ? '2em' : '0' }">
             <slot name="subtitle">
-              <h2
-                v-if="props.subtitle"
+              <component
+                :is="subtitleTag"
                 class="font-light"
                 :class="props.subtitleClasses">
                 {{ props.subtitle }}
-              </h2>
+              </component>
             </slot>
           </div>
         </template>

package/app/utils/launch-toast.ts

@@ -24,3 +24,19 @@ export function toastError(options: ITypedToast) {
     ...options,
   });
 }
+
+export function toastWarning(options: ITypedToast) {
+  toast({
+    icon: 'lucide:triangle-alert',
+    color: 'warning',
+    ...options,
+  });
+}
+
+export function toastInfo(options: ITypedToast) {
+  toast({
+    icon: 'lucide:info',
+    color: 'info',
+    ...options,
+  });
+}

package/app/utils/make-confetti.ts

@@ -0,0 +1,182 @@
+import confetti from 'canvas-confetti';
+
+
+function makeEdgeBumps() {
+
+  const bumpsPerFullEdge = 24;
+  const bumpsPerHalfEdge = bumpsPerFullEdge / 2;
+
+
+  return {
+    left: [
+      ...makeSectionBumps({
+        from: {
+          x: 0.5,
+          y: 0,
+        },
+        to: {
+          x: 0,
+          y: 0,
+        },
+        angle: 270,
+        count: bumpsPerHalfEdge,
+      }),
+      ...makeSectionBumps({
+        from: {
+          x: 0,
+          y: 0,
+        },
+        to: {
+          x: 0,
+          y: 1,
+        },
+        angle: 0,
+        count: bumpsPerFullEdge,
+      }),
+      ...makeSectionBumps({
+        from: {
+          x: 0,
+          y: 1,
+        },
+        to: {
+          x: 0.5,
+          y: 1,
+        },
+        angle: 90,
+        count: bumpsPerHalfEdge,
+        includeEnd: true,
+      }),
+    ],
+    right: [
+      ...makeSectionBumps({
+        from: {
+          x: 0.5,
+          y: 0,
+        },
+        to: {
+          x: 1,
+          y: 0,
+        },
+        angle: 270,
+        count: bumpsPerHalfEdge,
+      }),
+      ...makeSectionBumps({
+        from: {
+          x: 1,
+          y: 0,
+        },
+        to: {
+          x: 1,
+          y: 1,
+        },
+        angle: 180,
+        count: bumpsPerFullEdge,
+      }),
+      ...makeSectionBumps({
+        from: {
+          x: 1,
+          y: 1,
+        },
+        to: {
+          x: 0.5,
+          y: 1,
+        },
+        angle: 90,
+        count: bumpsPerHalfEdge,
+        includeEnd: true,
+      }),
+    ],
+  };
+
+}
+
+function makeSectionBumps(options: { from: { x: number, y: number; }; to: { x: number; y: number; }; angle: number; count: number; includeEnd?: boolean; }) {
+  return Array.from({ length: options.count }, (_, index) => {
+
+    const progress = options.includeEnd
+      ? index / Math.max(options.count - 1, 1)
+      : index / options.count;
+
+    return {
+      x: options.from.x + ((options.to.x - options.from.x) * progress),
+      y: options.from.y + ((options.to.y - options.from.y) * progress),
+      angle: options.angle,
+    };
+
+  });
+}
+
+
+export function makeConfettiParade(duration = 1000, config: confetti.Options) {
+
+  if (import.meta.server) {
+    return Promise.resolve();
+  }
+
+
+  const end = Date.now() + duration;
+
+  (function frame() {
+
+    confetti(config);
+
+    if (Date.now() < end) {
+      requestAnimationFrame(frame);
+    }
+
+  }());
+
+
+  return new Promise(resolve => setTimeout(resolve, duration));
+
+}
+
+export function makeConfettiOnTop(duration = 1000) {
+  return makeConfettiParade(duration, {
+    particleCount: 7,
+    angle: 270,
+    origin: {
+      x: 0.5,
+      y: 0,
+    },
+  });
+}
+
+export function makeConfettiOnEdges(duration = 2000) {
+
+  if (import.meta.server) {
+    return Promise.resolve();
+  }
+
+
+  const { left, right } = makeEdgeBumps();
+  const delay = duration / left.length;
+
+
+  for (const [index, leftBump] of left.entries()) {
+
+    setTimeout(() => {
+
+      for (const bump of [leftBump, right[index]!]) {
+        confetti({
+          particleCount: 24,
+          angle: bump.angle,
+          spread: 50,
+          startVelocity: 22,
+          scalar: 0.7,
+          ticks: 160,
+          origin: {
+            x: bump.x,
+            y: bump.y,
+          },
+        });
+      }
+
+    }, index * delay);
+
+  }
+
+
+  return new Promise(resolve => setTimeout(resolve, duration));
+
+}

package/modules/radashi.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, addImports } from '@nuxt/kit';
+import { addImports, addServerImports, defineNuxtModule } from '@nuxt/kit';
 import * as radashi from 'radashi';
 
 
@@ -9,14 +9,14 @@ export default defineNuxtModule({
   setup() {
     for (const name of Object.keys(radashi)) {
 
-      const prefix = 'rad';
-      const as = `${prefix}${radashi.pascal(name)}`;
-
-      addImports({
+      const spec = {
         name,
-        as,
+        as: `rad${radashi.pascal(name)}`,
         from: 'radashi',
-      });
+      };
+
+      addImports(spec);
+      addServerImports(spec);
 
     }
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {
@@ -24,8 +24,10 @@
     "@nuxt/kit": "4.5.2",
     "@nuxt/ui": "4.11.0",
     "@nuxtjs/i18n": "10.6.0",
+    "@types/canvas-confetti": "1.9.0",
     "@vueuse/core": "14.4.0",
     "@vueuse/nuxt": "14.4.0",
+    "canvas-confetti": "1.9.4",
     "radashi": "12.9.1",
     "unified-mongo-filter": "0.4.0"
   },

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

@@ -60,6 +60,7 @@ Absolute highlights:
 - Every `<script setup>` section starts with `/* section name */`, then a blank line
 - Within a section, group declarations by kind (imports, refs, computeds, watchers, functions, etc.): two blank lines between groups; no blanks between consecutive refs; one blank between consecutive members of other groups
 - Non-trivial async/functions: blank line after `{`, double blank between major steps, blank before `}`
+- A function whose body is one `for` / `while` / `if` or one connected `if` / `else` / `else if` or `try` / `catch` / `finally` chain stays flush: no blank lines between the function `{` / `}` and that block
 - A function dedicated to choosing a return value from multiple criteria uses one exhaustive `if` / `else if` / `else` chain; broader functions may use guard clauses and early returns
 - `else` / `catch` on their own line after `}`
 - Script object literals always multi-line (even one property)
@@ -141,7 +142,7 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 | Schema form | `useForm` + `<form-tag />` / `<un-form>` → [forms.md](references/forms.md) |
 | Modal form | `launchFormPickerDialog` + `submitButton.onClick` → [dialogs.md](references/dialogs.md) |
 | Confirm / choice | `launchChoicePickerDialog` + button `onClick` (avoid `value`) |
-| Feedback | `toastSuccess` / `toastError` / `toast` |
+| Feedback | `toastSuccess` / `toastError` / `toastWarning` / `toastInfo` / `toast` |
 | Page chrome | `un-typography` + `un-card` |
 | Custom field | `registerFormExtraElement` in a plugin |
 | Utilities | `radXxx` → [radashi.md](references/radashi.md) |

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

@@ -14,7 +14,7 @@ Write code so a reader can **scan vertically** and see structure before details.
    Start each logical `<script setup>` domain with a `/* section name */` comment and a blank line. Within that section, group imports, refs, computeds, watchers, functions, and other declarations by kind. Double blank lines separate groups; refs stay tightly stacked; consecutive members of other groups have one blank line between them.
 
 2. **Function body spacing follows the work.**
-   A non-trivial workflow function is a mini-document: blank line after `{`, full-block guards, double blanks between major steps, and a blank before `}`. Small helpers and functions whose whole job is choosing a return value stay compact.
+   A non-trivial workflow function is a mini-document: blank line after `{`, full-block guards, double blanks between major steps, and a blank before `}`. A function whose body is one control block — or one connected `if` / `else` / `else if` or `try` / `catch` / `finally` chain — stays flush: no blanks between the function braces and that block. Small helpers and functions whose whole job is choosing a return value stay compact.
 
 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.
@@ -138,6 +138,7 @@ async function handleLogin() {
 - Guards as full blocks
 - Double blank between guard/setup and main work / between major steps
 - Blank line before closing `}`
+- **Not** when the body is a single (connected) control block — that stays flush; see below
 
 ### Tiny blocks stay tight
 
@@ -156,6 +157,56 @@ async function handleSubmitSelection(items) {
 
 Same for a `finally` that only flips one flag.
 
+### Single-block functions stay flush
+
+When a function body is **only** one control block (`for`, `while`, `if`, or similar) or **only** one connected chain (`if` / `else if` / `else`, or `try` / `catch` / `finally`), do **not** put blank lines before or after that block. The declaration line connects to the block (next line after `{` is the block), and the function’s closing `}` connects to the end of the block (no blank above it).
+
+`if` / `else` / `else if` and `try` / `catch` / `finally` already stay adjacent — no blank lines between their parts — so the whole chain counts as one block.
+
+```ts
+function fireBumps(bumps) {
+  for (const bump of bumps) {
+    confetti({
+      particleCount: 20,
+      origin: {
+        x: bump.x,
+        y: bump.y,
+      },
+    });
+  }
+}
+
+function abortIfServer() {
+  if (import.meta.server) {
+    return Promise.resolve();
+  }
+}
+
+async function saveOrToast() {
+  try {
+    await save();
+  }
+  catch {
+    toastError({
+      title: 'Failed',
+    });
+  }
+}
+```
+
+```ts
+// ❌ breathing-room blanks around a lone block
+function fireBumps(bumps) {
+
+  for (const bump of bumps) {
+    ...
+  }
+
+}
+```
+
+If the function has **any other statement** besides that one block (a guard plus a loop, setup then a `for`, two separate `if`s, …), use the non-trivial workflow spacing instead. Interior spacing *inside* the block still follows the other rules.
+
 ### Return-only decision functions
 
 When a function's whole job is to choose and return a value from multiple criteria, express the complete decision as one compact `if` / `else if` / `else` chain:
@@ -174,7 +225,7 @@ function getSortLabel(column) {
 }
 ```
 
-Use this pattern only when value selection is essentially the function's entire body. Functions that perform broader work may use guard clauses and early returns when those make the workflow clearer; do not force their logic into an exhaustive chain.
+Use this pattern only when value selection is essentially the function's entire body. Keep the chain flush with the function braces (single-block rule). Functions that perform broader work may use guard clauses and early returns when those make the workflow clearer; do not force their logic into an exhaustive chain.
 
 ### `else` / `catch`
 
@@ -724,6 +775,7 @@ export default defineEventHandler(async event => {
 | One-line `useUFetch(...)` | URL on next line; options multi-line |
 | `.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 |
 
 ---
 
@@ -735,6 +787,7 @@ export default defineEventHandler(async event => {
 - [ ] Every `<script setup>` section starts with `/* section name */`, followed by a blank line
 - [ ] Declarations are grouped by kind inside each section: two blanks between groups; no blanks between refs; one blank between other same-kind declarations
 - [ ] Non-trivial workflow functions: blank after `{`, double blanks between major steps, blank before `}`
+- [ ] Single-block functions (one `for` / `while` / `if`, or one connected `if` / `else` / `try` / `catch` chain) stay flush with the function braces
 - [ ] 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

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

@@ -110,7 +110,7 @@ Requires app tree under `u-app` (toaster from Nuxt UI + layer plugin `plugins/us
 | `launchDialog({ component, props })` | `modal.open(props).result` | `app/utils/launch-dialog.ts` |
 | `launchFormPickerDialog(options)` | submitted form object (or dismiss) | `app/utils/launch-form-picker-dialog.ts` |
 | `launchChoicePickerDialog(options)` | button `value` if set (or dismiss) | `app/utils/launch-choice-picker-dialog.ts` |
-| `toast` / `toastSuccess` / `toastError` | void | `app/utils/launch-toast.ts` |
+| `toast` / `toastSuccess` / `toastError` / `toastWarning` / `toastInfo` | void | `app/utils/launch-toast.ts` |
 
 ```ts
 await launchDialog({

package/skills/nuxt-unified-ui/references/layer-setup.md

@@ -37,7 +37,7 @@ Both are required:
 ## Peer / stack
 
 - Peer dependency: `nuxt >= 4.5.2` (required)
-- Bundled deps (layer): `@nuxt/ui`, `@nuxtjs/i18n`, `@vueuse/nuxt`, `@vueuse/core`, `radashi`, `unified-mongo-filter`, `@formkit/tempo`, Lucide iconify JSON, `@nuxt/kit`
+- Bundled deps (layer): `@nuxt/ui`, `@nuxtjs/i18n`, `@vueuse/nuxt`, `@vueuse/core`, `radashi`, `unified-mongo-filter`, `@formkit/tempo`, `canvas-confetti`, `@types/canvas-confetti`, Lucide iconify JSON, `@nuxt/kit`
 
 ## Modules
 
@@ -51,7 +51,7 @@ modules: [
 ]
 ```
 
-Additionally, Nuxt auto-loads `modules/radashi.ts`, which registers every radashi export as `rad` + PascalCase name (`get` → `radGet`, `pick` → `radPick`, `camel` → `radCamel`, …). Full catalog: [radashi.md](radashi.md).
+Additionally, Nuxt auto-loads `modules/radashi.ts`, which registers every radashi export as `rad` + PascalCase name (`get` → `radGet`, `pick` → `radPick`, `camel` → `radCamel`, …) in both the Vue app (`addImports`) and Nitro server (`addServerImports`). Full catalog: [radashi.md](radashi.md).
 
 ## UI defaults
 

package/skills/nuxt-unified-ui/references/public-surface.md

@@ -35,6 +35,8 @@ Reference components in **kebab-case** in templates.
 | `toast` | `utils/launch-toast.ts` | Uses `$toaster` from plugin |
 | `toastSuccess` | same | `icon: lucide:check`, `color: success` |
 | `toastError` | same | `icon: lucide:circle-alert`, `color: error` |
+| `toastWarning` | same | `icon: lucide:triangle-alert`, `color: warning` |
+| `toastInfo` | same | `icon: lucide:info`, `color: info` |
 
 Plugin: `plugins/use-toaster.ts` → `provide.toaster = useToast()`.
 
@@ -53,6 +55,7 @@ Plugin: `plugins/use-toaster.ts` → `provide.toaster = useToast()`.
 | `formatDate` / `parseDate` | `utils/format-date.ts` | `@formkit/tempo` helpers |
 | `isSlotFilled` | `utils/is-slot-filled.ts` | Slot emptiness check |
 | `pathRelativeToBase` | `utils/path-relative.ts` | Also exported from package entry |
+| `makeConfettiParade` / `makeConfettiOnTop` / `makeConfettiOnEdges` | `utils/make-confetti.ts` | `canvas-confetti` helpers |
 
 ## Built-in form element identifiers
 
@@ -60,7 +63,7 @@ Mapped in `un-form`: `input`, `textarea`, `select`, `series`, `date`, `checkbox`
 
 ## Radashi
 
-All radashi runtime exports are auto-imported as `radXxx`. See [radashi.md](radashi.md).
+All radashi runtime exports are auto-imported as `radXxx` in both `app/` and `server/`. See [radashi.md](radashi.md).
 
 ## Package entry types (`index.d.ts`)
 

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

@@ -1,6 +1,6 @@
 # Radashi auto-imports (`radXxx`)
 
-Layer module `modules/radashi.ts` registers every runtime export from `radashi` as a Nuxt auto-import:
+Layer module `modules/radashi.ts` registers every runtime export from `radashi` as a Nuxt auto-import in both the Vue app (`addImports`) and Nitro server (`addServerImports`):
 
 ```text
 rad + PascalCase(originalName)

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

@@ -9,6 +9,8 @@ type ITypedToast = Omit<IToast, 'icon' | 'color'>
 toast(options: IToast)
 toastSuccess(options: ITypedToast) // icon lucide:check, color success
 toastError(options: ITypedToast)   // icon lucide:circle-alert, color error
+toastWarning(options: ITypedToast) // icon lucide:triangle-alert, color warning
+toastInfo(options: ITypedToast)    // icon lucide:info, color info
 ```
 
 Implementation uses `useNuxtApp().$toaster` from `app/plugins/use-toaster.ts`:
@@ -23,11 +25,13 @@ export default defineNuxtPlugin(() => {
 })
 ```
 
-Pass any Nuxt UI toast fields (`title`, `description`, `color`, …). Success/error helpers omit `icon`/`color` from the options type; call `toast` directly for full control.
+Pass any Nuxt UI toast fields (`title`, `description`, `color`, …). Typed helpers omit `icon`/`color` from the options type; call `toast` directly for full control.
 
 ## `un-typography` — `app/components/un-typography.vue`
 
-Props: `icon`, `title`, `subtitle`, `text`, plus `*Classes` variants.
+Props: `icon`, `title`, `subtitle`, `text`, plus `*Classes` variants, and `headerLevel` (1–6, default `2`).
+
+Title renders as `h{headerLevel}`; subtitle renders as the next heading level (capped at `h6`).
 
 Slots: `title`, `subtitle`, `append`.
 
@@ -42,6 +46,7 @@ Notable props:
 | Prop | Role |
 |------|------|
 | `icon`, `title`, `subtitle`, `text` | Header / body copy |
+| `headerLevel` | Passed to `un-typography` (1–6, default `2`) |
 | `fluidBody` | Drop body padding when true |
 | `actions` | Footer buttons; items may set `actionType: 'spacer' \| 'button'`, `tooltip` |
 | `verticalActions` | Stack actions; buttons `block` |