nuxt-ui-elements 0.1.1

package/README.md

@@ -0,0 +1,156 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# Nuxt UI Elements
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A collection of beautiful, animated UI components for Nuxt applications. Built with Vue 3 and designed to work seamlessly with Nuxt UI.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+
+## Features
+
+- ✨ **FlickeringGrid** - Animated canvas-based grid background with gradient effects
+- 🎨 **Dark Mode Support** - Automatic theme switching with customizable colors
+- 🚀 **Performance Optimized** - Uses IntersectionObserver and only animates when visible
+- 📦 **Auto-import** - Components are automatically available in your app
+- 🎯 **TypeScript** - Full type safety out of the box
+- ⚡️ **Lightweight** - Zero external dependencies
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+pnpm add nuxt-ui-elements
+```
+
+Add the module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-ui-elements']
+})
+```
+
+That's it! You can now use Nuxt UI Elements in your Nuxt app ✨
+
+## Usage
+
+### FlickeringGrid
+
+A beautiful animated grid background component perfect for hero sections and landing pages.
+
+```vue
+<template>
+  <div class="relative w-full h-screen">
+    <UiElementsFlickeringGrid
+      :square-size="7"
+      :grid-gap="10"
+      gradient-direction="left-right"
+      gradient-end-color="white"
+      :flicker-speed="0.2"
+      class="z-0"
+    />
+    <div class="relative z-10">
+      <!-- Your content here -->
+    </div>
+  </div>
+</template>
+```
+
+#### Props
+
+| Prop                     | Type     | Default        | Description                            |
+| ------------------------ | -------- | -------------- | -------------------------------------- |
+| `squareSize`             | `number` | `4`            | Size of each grid square in pixels     |
+| `gridGap`                | `number` | `6`            | Gap between grid squares               |
+| `flickerChance`          | `number` | `0.3`          | Probability of flicker per frame       |
+| `flickerSpeed`           | `number` | `1`            | Animation speed multiplier             |
+| `gradientDirection`      | `string` | `'left-right'` | Gradient direction (see options below) |
+| `gradientStartColor`     | `string` | `'#aaf'`       | Light mode gradient start color        |
+| `gradientEndColor`       | `string` | `'#fff'`       | Light mode gradient end color          |
+| `flickerColor`           | `string` | `'#fff'`       | Light mode flicker color               |
+| `darkGradientStartColor` | `string` | `'#23272f'`    | Dark mode gradient start color         |
+| `darkGradientEndColor`   | `string` | `'#353b45'`    | Dark mode gradient end color           |
+| `darkFlickerColor`       | `string` | `'#6b7280'`    | Dark mode flicker color                |
+| `maxOpacity`             | `number` | `0.3`          | Maximum opacity of grid squares        |
+| `width`                  | `number` | -              | Custom width (defaults to container)   |
+| `height`                 | `number` | -              | Custom height (defaults to container)  |
+| `class`                  | `string` | -              | Additional CSS classes                 |
+
+#### Gradient Directions
+
+- `left-right`
+- `right-left`
+- `top-bottom`
+- `bottom-top`
+- `in-out` (radial from center)
+- `out-in` (radial to center)
+- `top-left-bottom-right`
+- `bottom-right-top-left`
+
+## Configuration
+
+You can customize the component prefix in your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-ui-elements'],
+  uiElements: {
+    prefix: 'Custom' // Components will be named CustomFlickeringGrid
+  }
+})
+```
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/my-module
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Prefix for component names
+     * @default 'UE'
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-ui-elements",
+  "configKey": "uiElements",
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,29 @@
+import { defineNuxtModule, createResolver, useLogger, hasNuxtModule, addComponentsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-ui-elements",
+    configKey: "uiElements"
+  },
+  defaults: {
+    prefix: "UE"
+  },
+  moduleDependencies: {
+    "motion-v/nuxt": {}
+  },
+  setup(options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const logger = useLogger("nuxt-ui-elements");
+    if (!hasNuxtModule("@nuxt/ui")) {
+      logger.error("[nuxt-ui-elements] @nuxt/ui is required. Please install it");
+    }
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components/background"),
+      pathPrefix: false,
+      prefix: `${options.prefix}Background`,
+      global: true
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/background/Aurora.d.vue.ts

@@ -0,0 +1,62 @@
+/**
+ * Aurora - An animated aurora background component with gradient effects
+ */
+export type AuroraVariant = "calm" | "energetic" | "cosmic";
+export interface AuroraProps {
+    /**
+     * Pin the aurora to a specific corner or edge
+     * If undefined, aurora flows across the entire screen without mask
+     * @default 'top-right'
+     */
+    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Color variant
+     * @default 'primary'
+     */
+    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    /**
+     * Speed of the animation (0-100, where 100 is fastest)
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * Intensity of the aurora effect (0-100)
+     * Controls opacity and blur
+     * @default 50
+     */
+    intensity?: number;
+    /**
+     * Animation style variant
+     * Overrides speed and intensity when set
+     */
+    variant?: AuroraVariant;
+    /**
+     * Reverse the animation direction
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: any;
+}
+export interface AuroraSlots {
+    /**
+     * Default slot content rendered on top of the aurora
+     */
+    default(): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<AuroraProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
+    pin: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    speed: number;
+    intensity: number;
+    reverse: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/background/Aurora.vue

@@ -0,0 +1,120 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import {
+  adjustLightness,
+  getThemeColor,
+  oklchToRgb
+} from "../../composables/useThemeColors";
+import { createRepeatingGradient } from "../../composables/useGradient";
+const props = defineProps({
+  pin: { type: String, required: false, default: "top-right" },
+  color: { type: String, required: false, default: "primary" },
+  speed: { type: Number, required: false, default: 50 },
+  intensity: { type: Number, required: false, default: 50 },
+  variant: { type: String, required: false },
+  reverse: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const variants = {
+  calm: { speed: 20, intensity: 30, blur: 15 },
+  energetic: { speed: 80, intensity: 70, blur: 8 },
+  cosmic: { speed: 50, intensity: 90, blur: 12 }
+};
+const effectiveSpeed = computed(
+  () => props.variant ? variants[props.variant].speed : props.speed
+);
+const effectiveIntensity = computed(
+  () => props.variant ? variants[props.variant].intensity : props.intensity
+);
+const effectiveBlur = computed(
+  () => props.variant ? variants[props.variant].blur : 10
+);
+const baseColor = computed(() => getThemeColor(props.color, 500));
+const auroraColors = computed(() => {
+  const base = baseColor.value;
+  return [
+    oklchToRgb(adjustLightness(base, 60)),
+    oklchToRgb(adjustLightness(base, 75)),
+    oklchToRgb(adjustLightness(base, 70)),
+    oklchToRgb(adjustLightness(base, 80)),
+    oklchToRgb(adjustLightness(base, 65))
+  ];
+});
+const auroraColorsDark = computed(() => {
+  const base = baseColor.value;
+  return [
+    oklchToRgb(adjustLightness(base, 30)),
+    oklchToRgb(adjustLightness(base, 45)),
+    oklchToRgb(adjustLightness(base, 40)),
+    oklchToRgb(adjustLightness(base, 50)),
+    oklchToRgb(adjustLightness(base, 35))
+  ];
+});
+const auroraGradient = computed(
+  () => createRepeatingGradient(auroraColors.value, 100)
+);
+const auroraGradientDark = computed(
+  () => createRepeatingGradient(auroraColorsDark.value, 100)
+);
+const animationDuration = computed(() => {
+  const clampedSpeed = Math.max(1, Math.min(100, effectiveSpeed.value));
+  const duration = 120 - clampedSpeed * 0.9;
+  return `${duration}s`;
+});
+const animationState = computed(
+  () => effectiveSpeed.value === 0 ? "paused" : "running"
+);
+const animationDirection = computed(
+  () => props.reverse ? "reverse" : "normal"
+);
+const auroraOpacity = computed(() => {
+  const clampedIntensity = Math.max(0, Math.min(100, effectiveIntensity.value));
+  return clampedIntensity / 100;
+});
+const auroraBlur = computed(() => `${effectiveBlur.value}px`);
+const maskGradient = computed(() => {
+  if (!props.pin) return void 0;
+  const positions = {
+    "top-left": "ellipse at 0% 0%",
+    "top-right": "ellipse at 100% 0%",
+    "bottom-left": "ellipse at 0% 100%",
+    "bottom-right": "ellipse at 100% 100%",
+    top: "ellipse at 50% 0%",
+    bottom: "ellipse at 50% 100%",
+    left: "ellipse at 0% 50%",
+    right: "ellipse at 100% 50%"
+  };
+  return `radial-gradient(${positions[props.pin]}, black 10%, transparent 70%)`;
+});
+</script>
+
+<template>
+  <div
+    class="relative flex h-full w-full items-center justify-center bg-zinc-50 text-slate-950 transition-bg dark:bg-zinc-900"
+  >
+    <div
+      class="absolute inset-0 overflow-hidden"
+      :style="maskGradient ? { maskImage: maskGradient } : {}"
+    >
+      <ClientOnly>
+        <div
+          class="aurora-effect pointer-events-none absolute -inset-2.5 h-full w-full will-change-transform animate-in fade-in duration-1000"
+          :style="{ opacity: auroraOpacity }"
+        />
+      </ClientOnly>
+    </div>
+
+    <div class="relative z-10">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aurora-effect{background-size:200%,100%;filter:blur(v-bind(auroraBlur)) invert(1)}.aurora-effect,.aurora-effect:after{animation:aurora v-bind(animationDuration) linear infinite;animation-direction:v-bind(animationDirection);animation-play-state:v-bind(animationState);background-image:repeating-linear-gradient(100deg,#fff,#fff 7%,transparent 10%,transparent 12%,#fff 16%),v-bind(auroraGradient);background-position:50% 50%,50% 50%}.aurora-effect:after{background-attachment:fixed;background-size:180%,100%;content:"";inset:0;mix-blend-mode:difference;position:absolute}:global(.dark) .aurora-effect{background-image:repeating-linear-gradient(100deg,#000,#000 7%,transparent 10%,transparent 12%,#000 16%),v-bind(auroraGradientDark);filter:blur(10px) invert(0)}:global(.dark) .aurora-effect:after{background-image:repeating-linear-gradient(100deg,rgba(0,0,0,.3),rgba(0,0,0,.3) 7%,transparent 10%,transparent 12%,rgba(0,0,0,.3) 16%),v-bind(auroraGradientDark);opacity:.3}@keyframes aurora{0%{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
+</style>

package/dist/runtime/components/background/Aurora.vue.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Aurora - An animated aurora background component with gradient effects
+ */
+export type AuroraVariant = "calm" | "energetic" | "cosmic";
+export interface AuroraProps {
+    /**
+     * Pin the aurora to a specific corner or edge
+     * If undefined, aurora flows across the entire screen without mask
+     * @default 'top-right'
+     */
+    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Color variant
+     * @default 'primary'
+     */
+    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    /**
+     * Speed of the animation (0-100, where 100 is fastest)
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * Intensity of the aurora effect (0-100)
+     * Controls opacity and blur
+     * @default 50
+     */
+    intensity?: number;
+    /**
+     * Animation style variant
+     * Overrides speed and intensity when set
+     */
+    variant?: AuroraVariant;
+    /**
+     * Reverse the animation direction
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: any;
+}
+export interface AuroraSlots {
+    /**
+     * Default slot content rendered on top of the aurora
+     */
+    default(): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<AuroraProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
+    pin: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    speed: number;
+    intensity: number;
+    reverse: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/background/FlickeringGrid.d.vue.ts

@@ -0,0 +1,94 @@
+import type { ComponentConfig } from "../../types/tv.js";
+import backgroundFlickeringGridTheme from "../../themes/background-flickering-grid.js";
+type BackgroundFlickeringGrid = ComponentConfig<typeof backgroundFlickeringGridTheme>;
+/**
+ * FlickeringGrid - An animated canvas-based grid background component
+ */
+export interface FlickeringGridProps {
+    /**
+     * The square size of the grid (before scaling)
+     * @default 12
+     */
+    squareSize?: number;
+    /**
+     * The gap between grid squares
+     * @default 6
+     */
+    gridGap?: number;
+    /**
+     * The flicker animation speed (higher = faster)
+     * @default 0.3
+     */
+    flickerChance?: number;
+    /**
+     * Speed multiplier for flicker animation
+     * @default 1
+     */
+    flickerSpeed?: number;
+    /**
+     * Gradient direction for the grid
+     * @default 'left-right'
+     */
+    gradientDirection?: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
+    /**
+     * Maximum opacity of flickering squares
+     * @default 0.3
+     */
+    maxOpacity?: number;
+    /**
+     * Apply radial fade to edges
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Canvas width (defaults to container width)
+     */
+    width?: number;
+    /**
+     * Canvas height (defaults to container height)
+     */
+    height?: number;
+    /**
+     * Color variant
+     * @default 'neutral'
+     */
+    color?: BackgroundFlickeringGrid["variants"]["color"];
+    /**
+     * Style variant
+     * @default 'subtle'
+     */
+    variant?: BackgroundFlickeringGrid["variants"]["variant"];
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: any;
+    /**
+     * UI slot customization
+     */
+    ui?: BackgroundFlickeringGrid["slots"];
+}
+export interface FlickeringGridSlots {
+    /**
+     * Default slot content rendered on top of the grid
+     */
+    default(): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
+    color: BackgroundFlickeringGrid["variants"]["color"];
+    variant: BackgroundFlickeringGrid["variants"]["variant"];
+    class: any;
+    squareSize: number;
+    gridGap: number;
+    flickerChance: number;
+    flickerSpeed: number;
+    gradientDirection: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
+    maxOpacity: number;
+    fade: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, FlickeringGridSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/background/FlickeringGrid.vue

@@ -0,0 +1,226 @@
+<script>
+import backgroundFlickeringGridTheme from "../../themes/background-flickering-grid";
+</script>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { tv } from "../../utils/tv";
+import { calculateGradientIntensity } from "../../composables/useGradient";
+import theme from "../../themes/background-flickering-grid";
+import { getThemeColor, adjustLightness, oklchToRgb } from "../../composables/useThemeColors";
+const props = defineProps({
+  squareSize: { type: Number, required: false, default: 8 },
+  gridGap: { type: Number, required: false, default: 8 },
+  flickerChance: { type: Number, required: false, default: 0.3 },
+  flickerSpeed: { type: Number, required: false, default: 0.2 },
+  gradientDirection: { type: String, required: false, default: "left-right" },
+  maxOpacity: { type: Number, required: false, default: 0.3 },
+  fade: { type: Boolean, required: false, default: true },
+  width: { type: Number, required: false },
+  height: { type: Number, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "subtle" },
+  class: { type: null, required: false, default: "" },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const ui = computed(
+  () => tv(theme)({
+    color: props.color,
+    variant: props.variant
+  })
+);
+const maskStyle = computed(() => {
+  if (!props.fade) return {};
+  return {
+    maskImage: "radial-gradient(circle at center, black 20%, transparent 90%)",
+    WebkitMaskImage: "radial-gradient(circle at center, black 20%, transparent 90%)"
+  };
+});
+const containerRef = ref();
+const canvasRef = ref();
+const context = ref(null);
+const isInView = ref(false);
+const canvasSize = ref({ width: 0, height: 0 });
+const gridParams = ref(null);
+function parseColor(color) {
+  const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (match && match[1] && match[2] && match[3]) {
+    return [Number(match[1]), Number(match[2]), Number(match[3])];
+  }
+  return [255, 255, 255];
+}
+const gridColors = computed(() => {
+  const baseColor = getThemeColor(props.color, 500);
+  const lightnessMap = {
+    subtle: { start: 96, end: 98, flicker: 93 },
+    soft: { start: 92, end: 96, flicker: 88 },
+    solid: { start: 80, end: 92, flicker: 70 }
+  };
+  const lightness = lightnessMap[props.variant];
+  const startRgb = oklchToRgb(adjustLightness(baseColor, lightness.start));
+  const endRgb = oklchToRgb(adjustLightness(baseColor, lightness.end));
+  const flickerRgb = oklchToRgb(adjustLightness(baseColor, lightness.flicker));
+  return {
+    start: parseColor(startRgb),
+    end: parseColor(endRgb),
+    flicker: parseColor(flickerRgb)
+  };
+});
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function lerpColor(a, b, t) {
+  if (!a || a.length !== 3) a = [255, 255, 255];
+  if (!b || b.length !== 3) b = [255, 255, 255];
+  return [
+    Math.round(lerp(a[0], b[0], t)),
+    Math.round(lerp(a[1], b[1], t)),
+    Math.round(lerp(a[2], b[2], t))
+  ];
+}
+function rgbToString(rgb, alpha = 1) {
+  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha})`;
+}
+function getGradientT(i, j, cols, rows) {
+  const x = cols > 1 ? i / (cols - 1) : 0.5;
+  const y = rows > 1 ? j / (rows - 1) : 0.5;
+  return calculateGradientIntensity(x, y, props.gradientDirection);
+}
+function setupCanvas(canvas, width, height) {
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const cols = Math.floor(width / (props.squareSize + props.gridGap));
+  const rows = Math.floor(height / (props.squareSize + props.gridGap));
+  const squares = new Float32Array(cols * rows);
+  for (let i = 0; i < squares.length; i++) {
+    squares[i] = Math.random() * props.maxOpacity;
+  }
+  return { cols, rows, squares, dpr };
+}
+function updateSquares(squares, deltaTime) {
+  for (let i = 0; i < squares.length; i++) {
+    if (Math.random() < props.flickerChance * props.flickerSpeed * deltaTime) {
+      squares[i] = Math.random() * props.maxOpacity;
+    }
+  }
+}
+function drawGrid(ctx, width, height, cols, rows, squares, dpr) {
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = "transparent";
+  ctx.fillRect(0, 0, width, height);
+  const colors = gridColors.value;
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      const idx = i * rows + j;
+      const opacity = squares[idx] ?? 0;
+      const t = getGradientT(i, j, cols, rows);
+      const baseColor = lerpColor(colors.start, colors.end, t);
+      let cellColor = baseColor;
+      let cellAlpha = opacity;
+      if (opacity > 0.5 * props.maxOpacity) {
+        const blendT = (opacity - 0.5 * props.maxOpacity) / (0.5 * props.maxOpacity);
+        cellColor = lerpColor(baseColor, colors.flicker, blendT);
+        cellAlpha = Math.min(1, opacity + 0.2);
+      }
+      ctx.fillStyle = rgbToString(cellColor, cellAlpha);
+      ctx.fillRect(
+        i * (props.squareSize + props.gridGap) * dpr,
+        j * (props.squareSize + props.gridGap) * dpr,
+        props.squareSize * dpr,
+        props.squareSize * dpr
+      );
+    }
+  }
+}
+function updateCanvasSize() {
+  const newWidth = props.width || containerRef.value?.clientWidth || 0;
+  const newHeight = props.height || containerRef.value?.clientHeight || 0;
+  canvasSize.value = { width: newWidth, height: newHeight };
+  if (canvasRef.value) {
+    gridParams.value = setupCanvas(canvasRef.value, newWidth, newHeight);
+  }
+}
+let animationFrameId;
+let resizeObserver;
+let intersectionObserver;
+let lastTime = 0;
+function animate(time) {
+  if (!isInView.value || !gridParams.value || !context.value) return;
+  const deltaTime = (time - lastTime) / 1e3;
+  lastTime = time;
+  updateSquares(gridParams.value.squares, deltaTime);
+  drawGrid(
+    context.value,
+    canvasRef.value.width,
+    canvasRef.value.height,
+    gridParams.value.cols,
+    gridParams.value.rows,
+    gridParams.value.squares,
+    gridParams.value.dpr
+  );
+  animationFrameId = requestAnimationFrame(animate);
+}
+onMounted(() => {
+  if (!canvasRef.value || !containerRef.value) return;
+  context.value = canvasRef.value.getContext("2d");
+  if (!context.value) return;
+  updateCanvasSize();
+  resizeObserver = new ResizeObserver(() => {
+    updateCanvasSize();
+  });
+  intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      isInView.value = entry.isIntersecting;
+      if (isInView.value) {
+        lastTime = performance.now();
+        animationFrameId = requestAnimationFrame(animate);
+      }
+    },
+    { threshold: 0 }
+  );
+  resizeObserver.observe(containerRef.value);
+  intersectionObserver.observe(canvasRef.value);
+});
+onBeforeUnmount(() => {
+  if (animationFrameId) cancelAnimationFrame(animationFrameId);
+  resizeObserver?.disconnect();
+  intersectionObserver?.disconnect();
+});
+watch(
+  [
+    () => props.gradientDirection,
+    () => props.squareSize,
+    () => props.gridGap,
+    () => props.maxOpacity,
+    () => props.color,
+    () => props.variant
+  ],
+  () => {
+    updateCanvasSize();
+  }
+);
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    data-slot="base"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+  >
+    <canvas
+      ref="canvasRef"
+      data-slot="canvas"
+      :class="ui.canvas({ class: props.ui?.canvas })"
+      :style="maskStyle"
+      :width="canvasSize.width"
+      :height="canvasSize.height"
+    />
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/background/FlickeringGrid.vue.d.ts

@@ -0,0 +1,94 @@
+import type { ComponentConfig } from "../../types/tv.js";
+import backgroundFlickeringGridTheme from "../../themes/background-flickering-grid.js";
+type BackgroundFlickeringGrid = ComponentConfig<typeof backgroundFlickeringGridTheme>;
+/**
+ * FlickeringGrid - An animated canvas-based grid background component
+ */
+export interface FlickeringGridProps {
+    /**
+     * The square size of the grid (before scaling)
+     * @default 12
+     */
+    squareSize?: number;
+    /**
+     * The gap between grid squares
+     * @default 6
+     */
+    gridGap?: number;
+    /**
+     * The flicker animation speed (higher = faster)
+     * @default 0.3
+     */
+    flickerChance?: number;
+    /**
+     * Speed multiplier for flicker animation
+     * @default 1
+     */
+    flickerSpeed?: number;
+    /**
+     * Gradient direction for the grid
+     * @default 'left-right'
+     */
+    gradientDirection?: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
+    /**
+     * Maximum opacity of flickering squares
+     * @default 0.3
+     */
+    maxOpacity?: number;
+    /**
+     * Apply radial fade to edges
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Canvas width (defaults to container width)
+     */
+    width?: number;
+    /**
+     * Canvas height (defaults to container height)
+     */
+    height?: number;
+    /**
+     * Color variant
+     * @default 'neutral'
+     */
+    color?: BackgroundFlickeringGrid["variants"]["color"];
+    /**
+     * Style variant
+     * @default 'subtle'
+     */
+    variant?: BackgroundFlickeringGrid["variants"]["variant"];
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: any;
+    /**
+     * UI slot customization
+     */
+    ui?: BackgroundFlickeringGrid["slots"];
+}
+export interface FlickeringGridSlots {
+    /**
+     * Default slot content rendered on top of the grid
+     */
+    default(): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
+    color: BackgroundFlickeringGrid["variants"]["color"];
+    variant: BackgroundFlickeringGrid["variants"]["variant"];
+    class: any;
+    squareSize: number;
+    gridGap: number;
+    flickerChance: number;
+    flickerSpeed: number;
+    gradientDirection: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
+    maxOpacity: number;
+    fade: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, FlickeringGridSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useGradient.d.ts

@@ -0,0 +1,23 @@
+export type GradientDirection = "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
+/**
+ * Calculate gradient intensity for a position based on direction
+ * @param x - X coordinate (0-1)
+ * @param y - Y coordinate (0-1)
+ * @param direction - Gradient direction
+ * @returns Intensity value (0-1)
+ */
+export declare function calculateGradientIntensity(x: number, y: number, direction: GradientDirection): number;
+/**
+ * Generate CSS repeating linear gradient from colors
+ * @param colors - Array of RGB color strings
+ * @param angle - Gradient angle in degrees
+ * @returns CSS repeating-linear-gradient string
+ */
+export declare function createRepeatingGradient(colors: string[], angle?: number): string;
+/**
+ * Composable for gradient utilities
+ */
+export declare function useGradient(): {
+    calculateGradientIntensity: typeof calculateGradientIntensity;
+    createRepeatingGradient: typeof createRepeatingGradient;
+};

package/dist/runtime/composables/useGradient.js

@@ -0,0 +1,41 @@
+export function calculateGradientIntensity(x, y, direction) {
+  switch (direction) {
+    case "left-right":
+      return x;
+    case "right-left":
+      return 1 - x;
+    case "top-bottom":
+      return y;
+    case "bottom-top":
+      return 1 - y;
+    case "in-out": {
+      const dx = x - 0.5;
+      const dy = y - 0.5;
+      return Math.sqrt(dx * dx + dy * dy) * Math.sqrt(2);
+    }
+    case "out-in": {
+      const dx = x - 0.5;
+      const dy = y - 0.5;
+      return 1 - Math.sqrt(dx * dx + dy * dy) * Math.sqrt(2);
+    }
+    case "top-left-bottom-right":
+      return (x + y) / 2;
+    case "bottom-right-top-left":
+      return 1 - (x + y) / 2;
+    default:
+      return 0;
+  }
+}
+export function createRepeatingGradient(colors, angle = 100) {
+  const stops = colors.map((color, i) => {
+    const position = 10 + i * 5;
+    return `${color} ${position}%`;
+  }).join(",");
+  return `repeating-linear-gradient(${angle}deg,${stops})`;
+}
+export function useGradient() {
+  return {
+    calculateGradientIntensity,
+    createRepeatingGradient
+  };
+}

package/dist/runtime/composables/useThemeColors.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Parse OKLCH string to extract L, C, H components
+ * @deprecated Use culori.parse instead
+ */
+export declare function parseOklch(oklchStr: string): {
+    l: number;
+    c: number;
+    h: number;
+} | null;
+/**
+ * Create OKLCH string from L, C, H components
+ */
+export declare function createOklch(l: number, c: number, h: number): string;
+/**
+ * Adjust the lightness of a color while preserving chroma and hue
+ * Accepts any valid CSS color string
+ */
+export declare function adjustLightness(colorStr: string, targetLightness: number): string;
+/**
+ * Adjust the chroma (saturation) of a color while preserving lightness and hue
+ */
+export declare function adjustChroma(colorStr: string, targetChroma: number): string;
+/**
+ * Adjust the hue of a color while preserving lightness and chroma
+ */
+export declare function adjustHue(colorStr: string, targetHue: number): string;
+/**
+ * Adjust all components of a color
+ */
+export declare function adjustOklch(colorStr: string, adjustments: {
+    l?: number;
+    c?: number;
+    h?: number;
+}): string;
+/**
+ * Convert color to RGB string for canvas rendering
+ */
+export declare function oklchToRgb(colorString: string): string;
+/**
+ * Get the base color from Nuxt UI theme for a given color name and shade
+ * @param colorName - The semantic color name (e.g., 'primary', 'error', 'success')
+ * @param shade - The color shade (50-950), defaults to 500
+ */
+export declare function getThemeColor(colorName: string, shade?: number): string;
+/**
+ * Get multiple shades of a color by adjusting lightness
+ * Useful for creating gradients or multi-tone effects
+ */
+export declare function getColorShades(colorName: string, lightnessValues: number[]): string[];
+/**
+ * Get multiple shades and convert to RGB
+ */
+export declare function getColorShadesRgb(colorName: string, lightnessValues: number[]): string[];
+/**
+ * Create a color palette with custom adjustments
+ * Returns RGB strings ready for canvas use
+ */
+export declare function createColorPalette(colorName: string, adjustments: Array<{
+    l?: number;
+    c?: number;
+    h?: number;
+}>): string[];

package/dist/runtime/composables/useThemeColors.js

@@ -0,0 +1,87 @@
+import { converter, parse, formatCss } from "culori";
+const toOklch = converter("oklch");
+const toRgb = converter("rgb");
+export function parseOklch(oklchStr) {
+  const parsed = parse(oklchStr);
+  if (!parsed) return null;
+  const oklch = toOklch(parsed);
+  if (!oklch) return null;
+  return {
+    l: (oklch.l ?? 0) * 100,
+    // Convert 0-1 to 0-100%
+    c: oklch.c ?? 0,
+    h: oklch.h ?? 0
+  };
+}
+export function createOklch(l, c, h) {
+  return formatCss({ mode: "oklch", l: l / 100, c, h });
+}
+export function adjustLightness(colorStr, targetLightness) {
+  const parsed = parse(colorStr);
+  if (!parsed) return colorStr;
+  const oklch = toOklch(parsed);
+  if (!oklch) return colorStr;
+  oklch.l = targetLightness / 100;
+  return formatCss(oklch);
+}
+export function adjustChroma(colorStr, targetChroma) {
+  const parsed = parse(colorStr);
+  if (!parsed) return colorStr;
+  const oklch = toOklch(parsed);
+  if (!oklch) return colorStr;
+  oklch.c = targetChroma;
+  return formatCss(oklch);
+}
+export function adjustHue(colorStr, targetHue) {
+  const parsed = parse(colorStr);
+  if (!parsed) return colorStr;
+  const oklch = toOklch(parsed);
+  if (!oklch) return colorStr;
+  oklch.h = targetHue;
+  return formatCss(oklch);
+}
+export function adjustOklch(colorStr, adjustments) {
+  const parsed = parse(colorStr);
+  if (!parsed) return colorStr;
+  const oklch = toOklch(parsed);
+  if (!oklch) return colorStr;
+  if (adjustments.l !== void 0) oklch.l = adjustments.l / 100;
+  if (adjustments.c !== void 0) oklch.c = adjustments.c;
+  if (adjustments.h !== void 0) oklch.h = adjustments.h;
+  return formatCss(oklch);
+}
+export function oklchToRgb(colorString) {
+  const parsed = parse(colorString);
+  if (!parsed) return "rgb(255, 255, 255)";
+  const rgb = toRgb(parsed);
+  if (!rgb) return "rgb(255, 255, 255)";
+  const r = Math.max(0, Math.min(255, Math.round((rgb.r ?? 0) * 255)));
+  const g = Math.max(0, Math.min(255, Math.round((rgb.g ?? 0) * 255)));
+  const b = Math.max(0, Math.min(255, Math.round((rgb.b ?? 0) * 255)));
+  const a = rgb.alpha ?? 1;
+  return a < 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+}
+export function getThemeColor(colorName, shade = 500) {
+  if (typeof document === "undefined") return "oklch(50% 0 0)";
+  const styles = getComputedStyle(document.documentElement);
+  let colorValue = styles.getPropertyValue(`--ui-color-${colorName}-${shade}`).trim();
+  if (!colorValue) {
+    colorValue = styles.getPropertyValue(`--color-${colorName}-${shade}`).trim();
+  }
+  return colorValue || "oklch(50% 0 0)";
+}
+export function getColorShades(colorName, lightnessValues) {
+  const baseColor = getThemeColor(colorName, 500);
+  return lightnessValues.map((lightness) => adjustLightness(baseColor, lightness));
+}
+export function getColorShadesRgb(colorName, lightnessValues) {
+  const shades = getColorShades(colorName, lightnessValues);
+  return shades.map(oklchToRgb);
+}
+export function createColorPalette(colorName, adjustments) {
+  const baseColor = getThemeColor(colorName, 500);
+  return adjustments.map((adj) => {
+    const adjusted = adjustOklch(baseColor, adj);
+    return oklchToRgb(adjusted);
+  });
+}

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,4 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+  console.log("Plugin injected by my-module!");
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/themes/background-flickering-grid.d.ts

@@ -0,0 +1,64 @@
+declare const _default: {
+    slots: {
+        base: string;
+        canvas: string;
+    };
+    variants: {
+        color: {
+            primary: string;
+            secondary: string;
+            success: string;
+            info: string;
+            warning: string;
+            error: string;
+            neutral: string;
+        };
+        variant: {
+            subtle: string;
+            soft: string;
+            solid: string;
+        };
+    };
+    compoundVariants: ({
+        color: "primary" | "secondary" | "success" | "info" | "warning" | "error";
+        variant: "subtle";
+        class: {
+            canvas: string;
+        };
+    } | {
+        color: "primary" | "secondary" | "success" | "info" | "warning" | "error";
+        variant: "soft";
+        class: {
+            canvas: string;
+        };
+    } | {
+        color: "primary" | "secondary" | "success" | "info" | "warning" | "error";
+        variant: "solid";
+        class: {
+            canvas: string;
+        };
+    } | {
+        color: "neutral";
+        variant: "subtle";
+        class: {
+            canvas: string;
+        };
+    } | {
+        color: "neutral";
+        variant: "soft";
+        class: {
+            canvas: string;
+        };
+    } | {
+        color: "neutral";
+        variant: "solid";
+        class: {
+            canvas: string;
+        };
+    })[];
+    defaultVariants: {
+        color: "neutral";
+        variant: "subtle";
+    };
+};
+export default _default;

package/dist/runtime/themes/background-flickering-grid.js

@@ -0,0 +1,75 @@
+const colors = ["primary", "secondary", "success", "info", "warning", "error"];
+export default {
+  slots: {
+    base: "w-full h-full absolute inset-0 pointer-events-none",
+    canvas: "w-full h-full block"
+  },
+  variants: {
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      info: "",
+      warning: "",
+      error: "",
+      neutral: ""
+    },
+    variant: {
+      subtle: "",
+      soft: "",
+      solid: ""
+    }
+  },
+  compoundVariants: [
+    // Generate variants for each color + variant combination
+    ...colors.flatMap((color) => [
+      {
+        color,
+        variant: "subtle",
+        class: {
+          canvas: `[.bg-${color}-50_&]:_[--grid-end-color:theme(colors.${color}.50)] [.bg-${color}-100_&]:_[--grid-start-color:theme(colors.${color}.100)] [.bg-${color}-200_&]:_[--grid-flicker-color:theme(colors.${color}.200)]`
+        }
+      },
+      {
+        color,
+        variant: "soft",
+        class: {
+          canvas: `[.bg-${color}-100_&]:_[--grid-end-color:theme(colors.${color}.100)] [.bg-${color}-200_&]:_[--grid-start-color:theme(colors.${color}.200)] [.bg-${color}-300_&]:_[--grid-flicker-color:theme(colors.${color}.300)]`
+        }
+      },
+      {
+        color,
+        variant: "solid",
+        class: {
+          canvas: `[.bg-${color}-200_&]:_[--grid-end-color:theme(colors.${color}.200)] [.bg-${color}-400_&]:_[--grid-start-color:theme(colors.${color}.400)] [.bg-${color}-500_&]:_[--grid-flicker-color:theme(colors.${color}.500)]`
+        }
+      }
+    ]),
+    // Neutral variants (using gray)
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        canvas: "[.bg-gray-50_&]:_[--grid-end-color:theme(colors.gray.50)] [.bg-gray-100_&]:_[--grid-start-color:theme(colors.gray.100)] [.bg-gray-200_&]:_[--grid-flicker-color:theme(colors.gray.200)]"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        canvas: "[.bg-gray-100_&]:_[--grid-end-color:theme(colors.gray.100)] [.bg-gray-200_&]:_[--grid-start-color:theme(colors.gray.200)] [.bg-gray-300_&]:_[--grid-flicker-color:theme(colors.gray.300)]"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        canvas: "[.bg-gray-200_&]:_[--grid-end-color:theme(colors.gray.200)] [.bg-gray-400_&]:_[--grid-start-color:theme(colors.gray.400)] [.bg-gray-500_&]:_[--grid-flicker-color:theme(colors.gray.500)]"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    variant: "subtle"
+  }
+};

package/dist/runtime/types/tv.d.ts

@@ -0,0 +1,14 @@
+import type { TV } from "tailwind-variants";
+export type ComponentConfig<T extends Record<string, any>> = {
+    variants: T extends {
+        variants: infer V;
+    } ? {
+        [K in keyof V]: V[K] extends Record<string, any> ? keyof V[K] : never;
+    } : never;
+    slots: T extends {
+        slots: infer S;
+    } ? {
+        [K in keyof S]: any;
+    } : never;
+};
+export type { TV };

package/dist/runtime/utils/tv.d.ts

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").TV;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,2 @@
+import { createTV } from "tailwind-variants";
+export const tv = /* @__PURE__ */ createTV({});

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "nuxt-ui-elements",
+  "version": "0.1.1",
+  "description": "A collection of beautiful, animated UI components for Nuxt applications",
+  "license": "MIT",
+  "repository": "https://github.com/genu/nuxt-ui-elements.git",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.2.2",
+    "culori": "^4.0.2",
+    "motion-v": "^1.7.4",
+    "tailwind-variants": "^3.2.2"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/test-utils": "^3.21.0",
+    "@types/culori": "^4.0.1",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "nuxt": "^4.2.2",
+    "oxfmt": "^0.20.0",
+    "oxlint": "^1.35.0",
+    "oxlint-tsgolint": "^0.10.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.16",
+    "vue-tsc": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@nuxt/ui": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "pnpm dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "lint": "oxlint --type-aware",
+    "lint:fix": "oxlint --fix --type-aware",
+    "format": "oxfmt --write",
+    "format:check": "oxfmt --check",
+    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish && git push --follow-tags",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  }
+}