nuxt-toastflow 1.0.1-beta.0 → 1.0.2-beta.0

package/README.md

@@ -1,22 +1,35 @@
-![Toastflow showcase](../../images/banner.png)
+<p align="center">
+  <img src="../../assets/banner.png" alt="Toastflow" width="100%" />
+</p>
 
-# nuxt-toastflow
+<h1 align="center">💚 nuxt-toastflow</h1>
 
-Nuxt module wrapper for `vue-toastflow` so Toastflow works out of the box in Nuxt
+<p align="center">
+  <strong>Nuxt module for Toastflow</strong> — auto-imports, SSR support, and zero-config setup.
+</p>
 
-## 📚 Documentation
+<p align="center">
+  <a href="https://www.npmjs.com/package/nuxt-toastflow"><img src="https://img.shields.io/npm/v/nuxt-toastflow?color=00dc82&style=flat-square" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/nuxt-toastflow"><img src="https://img.shields.io/npm/dm/nuxt-toastflow?style=flat-square" alt="npm downloads" /></a>
+  <a href="../../LICENSE"><img src="https://img.shields.io/github/license/adrianjanocko/toastflow?style=flat-square" alt="License" /></a>
+</p>
 
-- Docs: https://docs.toastflow.top/
-- Comparisons (Vue ecosystem toasts): https://docs.toastflow.top/comparisons/overview
-- Playground: https://toastflow.top/
-- npm: https://www.npmjs.com/package/nuxt-toastflow
+<p align="center">
+  <a href="https://www.toastflow.top/docs">📖 Docs</a> · <a href="https://www.toastflow.top/">🎮 Playground</a> · <a href="https://www.toastflow.top/docs/more/comparisons">⚔️ Comparisons</a>
+</p>
+
+---
 
 ## 🚀 Quick Start
 
+**1. Install**
+
 ```bash
 pnpm add nuxt-toastflow
 ```
 
+**2. Add the module**
+
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
@@ -30,16 +43,15 @@ export default defineNuxtConfig({
 });
 ```
 
+**3. Toast away 🎉**
+
 ```vue
 <!-- app.vue -->
 <script setup lang="ts">
-  // Optional:
-  // const toast = useToast();
-
-  toast.success({
-    title: "Saved",
-    description: "Your changes are live.",
-  });
+toast.success({
+  title: "Saved",
+  description: "Your changes are live.",
+});
 </script>
 
 <template>
@@ -48,25 +60,41 @@ export default defineNuxtConfig({
 </template>
 ```
 
-## Options
+> 💡 Both `toast` and `useToast()` are auto-imported — no manual imports needed!
+
+If you need the lower-level Vue runtime pieces directly, import them from `nuxt-toastflow/runtime`:
 
 ```ts
-type NuxtToastflowOptions = {
-  config: Partial<ToastConfig>;
-  css: boolean;
-  componentName: string | false;
-};
+import {
+  Toast,
+  ToastProgress,
+  ToastContainer,
+  toast,
+} from "nuxt-toastflow/runtime";
 ```
 
-Defaults:
+## ⚙️ Module Options
+
+| Option             | Type                   |      Default       | Description                                |
+| :----------------- | :--------------------- | :----------------: | :----------------------------------------- |
+| 🛠️ `config`        | `Partial<ToastConfig>` |        `{}`        | Toast configuration passed to the plugin   |
+| 🎨 `css`           | `boolean`              |       `true`       | Include default styles                     |
+| 🧱 `componentName` | `string \| false`      | `"ToastContainer"` | Auto-registered client-only component name |
+
+<details>
+<summary>💡 <strong>How does it work under the hood?</strong></summary>
+
+<br />
 
-- `config: {}`
-- `css: true`
-- `componentName: "ToastContainer"`
+- `ToastContainer` is auto-registered as a **client-only** component
+- `toast` and `useToast()` are **auto-imported** — use either one
+- `vue-toastflow` is added to the transpile list so internal components resolve correctly
+- Styles are injected automatically unless `css: false`
+- The module forwards `css` to `createToastflow(..., { css })`, so it uses the same CSS toggle as `vue-toastflow`
+- When you disable CSS and still want the shipped stylesheet manually, import `nuxt-toastflow/styles.css`
 
-`ToastContainer` is auto-registered as a client-only component by the module.
-You can use either auto-imported `toast` (Vue-like API) or `useToast()`.
+</details>
 
-## License
+## 📄 License
 
-MIT
+[MIT](../../LICENSE) — made with ❤️ by [@adrianjanocko](https://github.com/adrianjanocko)

package/dist/module.d.mts

@@ -1,7 +1,5 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { ToastConfig } from 'vue-toastflow';
-
-interface NuxtToastflowOptions {
+import type { ToastConfig } from "./runtime";
+export interface NuxtToastflowOptions {
     /**
      * Global Toastflow config passed to createToastflow.
      */
@@ -15,6 +13,5 @@ interface NuxtToastflowOptions {
      */
     componentName: string | false;
 }
-declare const _default: _nuxt_schema.NuxtModule<NuxtToastflowOptions, NuxtToastflowOptions, false>;
-
-export { type NuxtToastflowOptions, _default as default };
+declare const _default: import("@nuxt/schema").NuxtModule<NuxtToastflowOptions, NuxtToastflowOptions, false>;
+export default _default;

package/dist/module.d.ts

@@ -1,7 +1,5 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { ToastConfig } from 'vue-toastflow';
-
-interface NuxtToastflowOptions {
+import type { ToastConfig } from "./runtime";
+export interface NuxtToastflowOptions {
     /**
      * Global Toastflow config passed to createToastflow.
      */
@@ -15,6 +13,5 @@ interface NuxtToastflowOptions {
      */
     componentName: string | false;
 }
-declare const _default: _nuxt_schema.NuxtModule<NuxtToastflowOptions, NuxtToastflowOptions, false>;
-
-export { type NuxtToastflowOptions, _default as default };
+declare const _default: import("@nuxt/schema").NuxtModule<NuxtToastflowOptions, NuxtToastflowOptions, false>;
+export default _default;

package/dist/module.js

@@ -58,7 +58,10 @@ var module_default = (0, import_kit.defineNuxtModule)({
     css: true,
     componentName: "ToastContainer"
   },
-  setup(options, nuxt) {
+  setup(options) {
+    const nuxt = (0, import_kit.useNuxt)();
+    const runtimeEntry = "nuxt-toastflow/runtime";
+    nuxt.options.build.transpile.push("vue-toastflow");
     if (containsFunction(options.config)) {
       console.warn(
         "[nuxt-toastflow] Functions in `toastflow.config` are not serializable in nuxt.config and will be omitted."
@@ -77,10 +80,10 @@ var module_default = (0, import_kit.defineNuxtModule)({
       mode: "client",
       getContents: function() {
         return [
-          'import { createToastflow, toast } from "vue-toastflow";',
+          `import { createToastflow, toast } from "${runtimeEntry}";`,
           "",
           "export default defineNuxtPlugin((nuxtApp) => {",
-          `  nuxtApp.vueApp.use(createToastflow(${serializedConfig}));`,
+          `  nuxtApp.vueApp.use(createToastflow(${serializedConfig}, { css: ${options.css ? "true" : "false"} }));`,
           "",
           "  return {",
           "    provide: {",
@@ -98,7 +101,7 @@ var module_default = (0, import_kit.defineNuxtModule)({
         return [
           'import { useNuxtApp } from "#app";',
           "",
-          'type ToastApi = typeof import("vue-toastflow")["toast"];',
+          `type ToastApi = typeof import("${runtimeEntry}")["toast"];`,
           "",
           "export function useToast(): ToastApi {",
           "  return useNuxtApp().$toast;",
@@ -130,7 +133,7 @@ var module_default = (0, import_kit.defineNuxtModule)({
       filename: "types/nuxt-toastflow.d.ts",
       getContents: function() {
         return [
-          'type ToastApi = typeof import("vue-toastflow")["toast"];',
+          `type ToastApi = typeof import("${runtimeEntry}")["toast"];`,
           "",
           'declare module "#app" {',
           "  interface NuxtApp {",
@@ -153,24 +156,9 @@ var module_default = (0, import_kit.defineNuxtModule)({
       (0, import_kit.addComponent)({
         name: options.componentName,
         export: "ToastContainer",
-        filePath: "vue-toastflow",
+        filePath: runtimeEntry,
         mode: "client"
       });
     }
-    if (options.css) {
-      const cssEntry = "vue-toastflow/styles.css";
-      const hasCssEntry = nuxt.options.css.some(function(entry) {
-        if (typeof entry === "string") {
-          return entry === cssEntry;
-        }
-        if (Array.isArray(entry) && typeof entry[0] === "string") {
-          return entry[0] === cssEntry;
-        }
-        return false;
-      });
-      if (!hasCssEntry) {
-        nuxt.options.css.push(cssEntry);
-      }
-    }
   }
 });

package/dist/module.mjs

@@ -5,7 +5,8 @@ import {
   addPluginTemplate,
   addTemplate,
   addTypeTemplate,
-  defineNuxtModule
+  defineNuxtModule,
+  useNuxt
 } from "@nuxt/kit";
 function containsFunction(value, visited = /* @__PURE__ */ new Set()) {
   if (typeof value === "function") {
@@ -41,7 +42,10 @@ var module_default = defineNuxtModule({
     css: true,
     componentName: "ToastContainer"
   },
-  setup(options, nuxt) {
+  setup(options) {
+    const nuxt = useNuxt();
+    const runtimeEntry = "nuxt-toastflow/runtime";
+    nuxt.options.build.transpile.push("vue-toastflow");
     if (containsFunction(options.config)) {
       console.warn(
         "[nuxt-toastflow] Functions in `toastflow.config` are not serializable in nuxt.config and will be omitted."
@@ -60,10 +64,10 @@ var module_default = defineNuxtModule({
       mode: "client",
       getContents: function() {
         return [
-          'import { createToastflow, toast } from "vue-toastflow";',
+          `import { createToastflow, toast } from "${runtimeEntry}";`,
           "",
           "export default defineNuxtPlugin((nuxtApp) => {",
-          `  nuxtApp.vueApp.use(createToastflow(${serializedConfig}));`,
+          `  nuxtApp.vueApp.use(createToastflow(${serializedConfig}, { css: ${options.css ? "true" : "false"} }));`,
           "",
           "  return {",
           "    provide: {",
@@ -81,7 +85,7 @@ var module_default = defineNuxtModule({
         return [
           'import { useNuxtApp } from "#app";',
           "",
-          'type ToastApi = typeof import("vue-toastflow")["toast"];',
+          `type ToastApi = typeof import("${runtimeEntry}")["toast"];`,
           "",
           "export function useToast(): ToastApi {",
           "  return useNuxtApp().$toast;",
@@ -113,7 +117,7 @@ var module_default = defineNuxtModule({
       filename: "types/nuxt-toastflow.d.ts",
       getContents: function() {
         return [
-          'type ToastApi = typeof import("vue-toastflow")["toast"];',
+          `type ToastApi = typeof import("${runtimeEntry}")["toast"];`,
           "",
           'declare module "#app" {',
           "  interface NuxtApp {",
@@ -136,25 +140,10 @@ var module_default = defineNuxtModule({
       addComponent({
         name: options.componentName,
         export: "ToastContainer",
-        filePath: "vue-toastflow",
+        filePath: runtimeEntry,
         mode: "client"
       });
     }
-    if (options.css) {
-      const cssEntry = "vue-toastflow/styles.css";
-      const hasCssEntry = nuxt.options.css.some(function(entry) {
-        if (typeof entry === "string") {
-          return entry === cssEntry;
-        }
-        if (Array.isArray(entry) && typeof entry[0] === "string") {
-          return entry[0] === cssEntry;
-        }
-        return false;
-      });
-      if (!hasCssEntry) {
-        nuxt.options.css.push(cssEntry);
-      }
-    }
   }
 });
 export {

package/dist/runtime/index.d.mts

@@ -0,0 +1 @@
+export * from "vue-toastflow";

package/dist/runtime/index.d.ts

@@ -0,0 +1 @@
+export * from "vue-toastflow";

package/dist/runtime/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/runtime/index.ts
+var runtime_exports = {};
+module.exports = __toCommonJS(runtime_exports);
+__reExport(runtime_exports, require("vue-toastflow"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("vue-toastflow")
+});

package/dist/runtime/index.mjs

@@ -0,0 +1,2 @@
+// src/runtime/index.ts
+export * from "vue-toastflow";

package/dist/styles.css

@@ -0,0 +1,900 @@
+@layer tf-defaults {
+  :root {
+    /* base look */
+    --tf-toast-font-family:
+      inherit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+    --tf-toast-border-radius: 12px;
+    --tf-toast-border-width: 1px;
+    --tf-toast-padding: 16px;
+
+    /* layout inside toast */
+    --tf-toast-gap: 10px;
+    --tf-toast-buttons-gap: calc(var(--tf-toast-gap) / 2);
+    --tf-toast-buttons-content-gap: calc(var(--tf-toast-gap) / 2);
+
+    /* stack padding (used for scrollable stack) */
+    --tf-toast-stack-padding-top: 8px;
+    --tf-toast-stack-padding-right: 8px;
+    --tf-toast-stack-padding-bottom: 18px;
+    --tf-toast-stack-padding-left: 0;
+
+    /* title */
+    --tf-toast-title-font-size: 14px;
+    --tf-toast-title-font-weight: 600;
+    --tf-toast-title-line-height: 1.25;
+
+    /* description */
+    --tf-toast-description-font-size: 13px;
+    --tf-toast-description-line-height: 1.4;
+
+    /* created at and close floating bar */
+    --tf-toast-float-x: 0.4;
+    --tf-toast-float-y: -0.4;
+
+    /* created at badge */
+    --tf-toast-created-at-font-size: 11px;
+    --tf-toast-created-at-offset: 0;
+    --tf-toast-created-at-padding-x: 8px;
+    --tf-toast-created-at-border-radius: 999px;
+
+    /* close button */
+    --tf-toast-close-size: 18px;
+    --tf-toast-close-icon-size: 12px;
+    --tf-toast-close-border-width: var(--tf-toast-border-width);
+    --tf-toast-close-border-radius: var(--tf-toast-border-radius);
+    --tf-toast-close-font-size: 11px;
+
+    /* buttons */
+    --tf-toast-button-font-size: 12px;
+    --tf-toast-button-line-height: 1;
+    --tf-toast-button-padding-y: 7px;
+    --tf-toast-button-padding-x: 9px;
+    --tf-toast-button-border-radius: 10px;
+    --tf-toast-button-border-width: var(--tf-toast-border-width);
+
+    /* icon */
+    --tf-toast-icon-size: 24px;
+    --tf-toast-icon-loading: var(--tf-toast-loading-text-default);
+    --tf-toast-icon-default: var(--tf-toast-normal-text-default);
+    --tf-toast-icon-success: var(--tf-toast-success-text-default);
+    --tf-toast-icon-error: var(--tf-toast-error-text-default);
+    --tf-toast-icon-warning: var(--tf-toast-warning-text-default);
+    --tf-toast-icon-info: var(--tf-toast-info-text-default);
+    --tf-toast-icon-custom: var(--tf-toast-normal-text-default);
+
+    /* progress bar */
+    --tf-toast-progress-height: 4px;
+    --tf-toast-progress-border-radius: var(--tf-toast-border-radius);
+    --tf-toast-progress-duration: 5000ms;
+
+    /* accent presets */
+    --tf-toast-normal-bg-default: #fff;
+    --tf-toast-normal-border-default: #e6e8eb;
+    --tf-toast-normal-text-default: #11181c;
+    --tf-toast-normal-progress-bar-bg-default: var(
+      --tf-toast-normal-text-default
+    );
+    --tf-toast-normal-progress-bg-default: color-mix(
+      in srgb,
+      var(--tf-toast-normal-text-default) 20%,
+      transparent
+    );
+    --tf-toast-normal-color-default: var(--tf-toast-normal-text-default);
+    --tf-toast-normal-title-color-default: var(--tf-toast-normal-text-default);
+    --tf-toast-normal-description-color-default: var(
+      --tf-toast-normal-text-default
+    );
+
+    --tf-toast-loading-bg-default: hsl(48, 100%, 96%);
+    --tf-toast-loading-border-default: hsl(46, 100%, 88%);
+    --tf-toast-loading-text-default: hsl(40, 100%, 32%);
+    --tf-toast-loading-progress-bar-bg-default: var(
+      --tf-toast-loading-text-default
+    );
+    --tf-toast-loading-progress-bg-default: color-mix(
+      in srgb,
+      var(--tf-toast-loading-text-default) 20%,
+      transparent
+    );
+    --tf-toast-loading-color-default: var(--tf-toast-loading-text-default);
+    --tf-toast-loading-title-color-default: var(
+      --tf-toast-loading-text-default
+    );
+    --tf-toast-loading-description-color-default: var(
+      --tf-toast-loading-text-default
+    );
+
+    --tf-toast-success-bg-default: hsl(143, 85%, 96%);
+    --tf-toast-success-border-default: hsl(145, 92%, 87%);
+    --tf-toast-success-text-default: hsl(140, 100%, 27%);
+    --tf-toast-success-progress-bar-bg-default: var(
+      --tf-toast-success-text-default
+    );
+    --tf-toast-success-progress-bg-default: color-mix(
+      in srgb,
+      var(--tf-toast-success-text-default) 20%,
+      transparent
+    );
+    --tf-toast-success-color-default: var(--tf-toast-success-text-default);
+    --tf-toast-success-title-color-default: var(
+      --tf-toast-success-text-default
+    );
+    --tf-toast-success-description-color-default: var(
+      --tf-toast-success-text-default
+    );
+
+    --tf-toast-info-bg-default: hsl(208, 100%, 97%);
+    --tf-toast-info-border-default: hsl(221, 91%, 93%);
+    --tf-toast-info-text-default: hsl(210, 92%, 45%);
+    --tf-toast-info-progress-bar-bg-default: var(--tf-toast-info-text-default);
+    --tf-toast-info-progress-bg-default: color-mix(
+      in srgb,
+      var(--tf-toast-info-text-default) 20%,
+      transparent
+    );
+    --tf-toast-info-color-default: var(--tf-toast-info-text-default);
+    --tf-toast-info-title-color-default: var(--tf-toast-info-text-default);
+    --tf-toast-info-description-color-default: var(
+      --tf-toast-info-text-default
+    );
+
+    --tf-toast-warning-bg-default: hsl(49, 100%, 97%);
+    --tf-toast-warning-border-default: hsl(49, 91%, 84%);
+    --tf-toast-warning-text-default: hsl(31, 92%, 45%);
+    --tf-toast-warning-progress-bar-bg-default: var(
+      --tf-toast-warning-text-default
+    );
+    --tf-toast-warning-progress-bg-default: color-mix(
+      in srgb,
+      var(--tf-toast-warning-text-default) 20%,
+      transparent
+    );
+    --tf-toast-warning-color-default: var(--tf-toast-warning-text-default);
+    --tf-toast-warning-title-color-default: var(
+      --tf-toast-warning-text-default
+    );
+    --tf-toast-warning-description-color-default: var(
+      --tf-toast-warning-text-default
+    );
+
+    --tf-toast-error-bg-default: hsl(359, 100%, 97%);
+    --tf-toast-error-border-default: hsl(359, 100%, 94%);
+    --tf-toast-error-text-default: hsl(360, 100%, 45%);
+    --tf-toast-error-progress-bar-bg-default: var(
+      --tf-toast-error-text-default
+    );
+    --tf-toast-error-progress-bg-default: color-mix(
+      in srgb,
+      var(--tf-toast-error-text-default) 20%,
+      transparent
+    );
+    --tf-toast-error-color-default: var(--tf-toast-error-text-default);
+    --tf-toast-error-title-color-default: var(--tf-toast-error-text-default);
+    --tf-toast-error-description-color-default: var(
+      --tf-toast-error-text-default
+    );
+
+    /* animations */
+    --tf-toast-motion-offset: 10px;
+    --tf-toast-animation-in-duration: 260ms;
+    --tf-toast-animation-out-duration: 220ms;
+  }
+}
+
+.tf-toast--paused .tf-toast-progress-bar {
+  animation-play-state: paused;
+}
+
+.tf-toast-progress-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+
+.tf-toast-progress {
+  height: var(--tf-toast-progress-height);
+  width: 100%;
+  border-radius: 0 0 var(--tf-toast-progress-border-radius)
+    var(--tf-toast-progress-border-radius);
+  background: var(--_tf-resolved-progress-bg);
+}
+
+.tf-toast-progress-bar {
+  height: 100%;
+  width: 100%;
+  background: var(--_tf-resolved-progress-bar-bg);
+  transform-origin: left;
+  animation-name: tf-toast-progress-rtl;
+  animation-duration: var(--tf-toast-progress-duration, 5000ms);
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  will-change: transform;
+}
+
+.tf-toast-progress[data-align="left-to-right"] .tf-toast-progress-bar {
+  transform-origin: right;
+  animation-name: tf-toast-progress-ltr;
+}
+
+@keyframes tf-toast-progress-rtl {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes tf-toast-progress-ltr {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.tf-toast-item[data-position^="top-"] {
+  --tf-toast-motion-offset: -10px;
+}
+
+.tf-toast-item[data-position^="bottom-"] {
+  --tf-toast-motion-offset: 10px;
+}
+
+.tf-toast-motion {
+  width: 100%;
+  transform-origin: center;
+}
+
+/* MOVE */
+.Toastflow__animation-move {
+  transition: transform var(--tf-toast-animation-in-duration)
+    cubic-bezier(0.5, 1, 0.25, 1);
+  will-change: transform;
+}
+
+/* ENTER */
+.Toastflow__animation-enter-from > .tf-toast-motion,
+.Toastflow__animation-appear-from > .tf-toast-motion {
+  opacity: 0;
+  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
+}
+
+.Toastflow__animation-enter-active > .tf-toast-motion,
+.Toastflow__animation-appear-active > .tf-toast-motion {
+  transition:
+    opacity var(--tf-toast-animation-in-duration) cubic-bezier(0.5, 1, 0.25, 1),
+    transform var(--tf-toast-animation-in-duration)
+      cubic-bezier(0.5, 1, 0.25, 1);
+}
+
+.Toastflow__animation-enter-to > .tf-toast-motion,
+.Toastflow__animation-appear-to > .tf-toast-motion {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+/* LEAVE */
+.Toastflow__animation-leave-from > .tf-toast-motion {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.Toastflow__animation-leave-active > .tf-toast-motion {
+  transition:
+    opacity var(--tf-toast-animation-out-duration) ease,
+    transform var(--tf-toast-animation-out-duration) ease;
+}
+
+.Toastflow__animation-leave-to > .tf-toast-motion {
+  opacity: 0;
+  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
+}
+
+/* CLEAR ALL */
+.Toastflow__animation-clearAll .tf-toast-motion {
+  animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)
+    cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* BUMP & UPDATE */
+.Toastflow__animation-bump {
+  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration) ease-out;
+}
+
+.Toastflow__animation-update {
+  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration)
+    cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+@keyframes Toastflow__clearAll-kf {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes Toastflow__bump-kf {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.01);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Toastflow__animation-move {
+    transition: none;
+  }
+
+  .Toastflow__animation-enter-active .tf-toast-motion,
+  .Toastflow__animation-leave-active .tf-toast-motion {
+    transition: none;
+  }
+
+  .Toastflow__animation-clearAll .tf-toast-motion {
+    animation: none;
+  }
+}
+
+/* Toast container */
+.tf-toast-root {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+.tf-toast-stack {
+  position: absolute;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+
+.tf-toast-stack-inner {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tf-toast-stack-inner--scroll {
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  padding-top: var(--tf-toast-stack-padding-top);
+  padding-right: var(--tf-toast-stack-padding-right);
+  padding-bottom: var(--tf-toast-stack-padding-bottom);
+  padding-left: var(--tf-toast-stack-padding-left);
+  scroll-padding: var(--tf-toast-stack-padding-top)
+    var(--tf-toast-stack-padding-right) var(--tf-toast-stack-padding-bottom)
+    var(--tf-toast-stack-padding-left);
+}
+
+.tf-toast-stack-inner--bottom {
+  min-height: 100%;
+  justify-content: flex-end;
+}
+
+.tf-toast-stack--left {
+  justify-content: flex-start;
+}
+
+.tf-toast-stack--center {
+  justify-content: center;
+}
+
+.tf-toast-stack--right {
+  justify-content: flex-end;
+}
+
+.tf-toast-item {
+  pointer-events: auto;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* Toast component */
+.tf-toast-wrapper {
+  pointer-events: auto;
+  width: 100%;
+}
+
+.tf-toast {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  --_tf-resolved-bg: var(
+    --tf-toast-bg,
+    var(--_tf-bg, var(--tf-toast-normal-bg-default))
+  );
+  --_tf-resolved-color: var(
+    --tf-toast-color,
+    var(
+      --tf-toast-accent-color,
+      var(--_tf-color, var(--tf-toast-normal-text-default))
+    )
+  );
+  --_tf-resolved-border: var(
+    --tf-toast-border-color,
+    var(--_tf-border-color, var(--tf-toast-normal-border-default))
+  );
+  --_tf-resolved-title-color: var(
+    --tf-toast-title-color,
+    var(
+      --tf-toast-color,
+      var(
+        --tf-toast-accent-color,
+        var(--_tf-title-color, var(--_tf-resolved-color))
+      )
+    )
+  );
+  --_tf-resolved-desc-color: var(
+    --tf-toast-description-color,
+    var(
+      --tf-toast-color,
+      var(
+        --tf-toast-accent-color,
+        var(--_tf-desc-color, var(--_tf-resolved-color))
+      )
+    )
+  );
+  --_tf-resolved-progress-bg: var(
+    --tf-toast-progress-bg,
+    var(
+      --_tf-progress-bg,
+      color-mix(in srgb, var(--_tf-resolved-color) 20%, transparent)
+    )
+  );
+  --_tf-resolved-progress-bar-bg: var(
+    --tf-toast-progress-bar-bg,
+    var(
+      --tf-toast-accent-color,
+      var(--_tf-progress-bar-bg, var(--_tf-resolved-color))
+    )
+  );
+  --tf-toast-button-color: var(--_tf-resolved-color);
+  --tf-toast-button-border-color: var(--_tf-resolved-border);
+  --tf-toast-button-border-width: var(--tf-toast-border-width);
+  --tf-toast-button-bg: var(--_tf-resolved-bg);
+  --tf-toast-close-color: var(--_tf-resolved-color);
+  --tf-toast-close-border-color: var(--_tf-resolved-border);
+  --tf-toast-close-bg: var(--_tf-resolved-bg);
+  --tf-toast-close-ring-color: var(--tf-toast-close-border-color);
+  --tf-toast-created-at-color: var(--_tf-resolved-desc-color);
+  --tf-toast-created-at-border-color: var(--_tf-resolved-border);
+  --tf-toast-created-at-bg: var(--_tf-resolved-bg);
+}
+
+.tf-toast--swipe-enabled {
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: grab;
+}
+
+.tf-toast--swipe-enabled:active {
+  cursor: grabbing;
+}
+
+.tf-toast[data-align="right"] .tf-toast-main-content {
+  flex-direction: row-reverse;
+}
+
+.tf-toast[data-align="right"] .tf-toast-text {
+  text-align: right;
+}
+
+.tf-toast-accent--default {
+  --_tf-bg: var(--tf-toast-normal-bg-default);
+  --_tf-color: var(--tf-toast-normal-color-default);
+  --_tf-border-color: var(--tf-toast-normal-border-default);
+  --_tf-title-color: var(--tf-toast-normal-title-color-default);
+  --_tf-desc-color: var(--tf-toast-normal-description-color-default);
+  --_tf-progress-bg: var(--tf-toast-normal-progress-bg-default);
+  --_tf-progress-bar-bg: var(--tf-toast-normal-progress-bar-bg-default);
+}
+
+.tf-toast-accent--loading {
+  --_tf-bg: var(--tf-toast-loading-bg-default);
+  --_tf-color: var(--tf-toast-loading-color-default);
+  --_tf-border-color: var(--tf-toast-loading-border-default);
+  --_tf-title-color: var(--tf-toast-loading-title-color-default);
+  --_tf-desc-color: var(--tf-toast-loading-description-color-default);
+  --_tf-progress-bg: var(--tf-toast-loading-progress-bg-default);
+  --_tf-progress-bar-bg: var(--tf-toast-loading-progress-bar-bg-default);
+}
+
+.tf-toast-accent--success {
+  --_tf-bg: var(--tf-toast-success-bg-default);
+  --_tf-color: var(--tf-toast-success-color-default);
+  --_tf-border-color: var(--tf-toast-success-border-default);
+  --_tf-title-color: var(--tf-toast-success-title-color-default);
+  --_tf-desc-color: var(--tf-toast-success-description-color-default);
+  --_tf-progress-bg: var(--tf-toast-success-progress-bg-default);
+  --_tf-progress-bar-bg: var(--tf-toast-success-progress-bar-bg-default);
+}
+
+.tf-toast-accent--error {
+  --_tf-bg: var(--tf-toast-error-bg-default);
+  --_tf-color: var(--tf-toast-error-color-default);
+  --_tf-border-color: var(--tf-toast-error-border-default);
+  --_tf-title-color: var(--tf-toast-error-title-color-default);
+  --_tf-desc-color: var(--tf-toast-error-description-color-default);
+  --_tf-progress-bg: var(--tf-toast-error-progress-bg-default);
+  --_tf-progress-bar-bg: var(--tf-toast-error-progress-bar-bg-default);
+}
+
+.tf-toast-accent--warning {
+  --_tf-bg: var(--tf-toast-warning-bg-default);
+  --_tf-color: var(--tf-toast-warning-color-default);
+  --_tf-border-color: var(--tf-toast-warning-border-default);
+  --_tf-title-color: var(--tf-toast-warning-title-color-default);
+  --_tf-desc-color: var(--tf-toast-warning-description-color-default);
+  --_tf-progress-bg: var(--tf-toast-warning-progress-bg-default);
+  --_tf-progress-bar-bg: var(--tf-toast-warning-progress-bar-bg-default);
+}
+
+.tf-toast-accent--info {
+  --_tf-bg: var(--tf-toast-info-bg-default);
+  --_tf-color: var(--tf-toast-info-color-default);
+  --_tf-border-color: var(--tf-toast-info-border-default);
+  --_tf-title-color: var(--tf-toast-info-title-color-default);
+  --_tf-desc-color: var(--tf-toast-info-description-color-default);
+  --_tf-progress-bg: var(--tf-toast-info-progress-bg-default);
+  --_tf-progress-bar-bg: var(--tf-toast-info-progress-bar-bg-default);
+}
+
+.tf-toast-accent--custom {
+  --_tf-bg: var(
+    --tf-toast-custom-bg-default,
+    var(--tf-toast-normal-bg-default)
+  );
+  --_tf-color: var(
+    --tf-toast-custom-color-default,
+    var(--tf-toast-normal-color-default)
+  );
+  --_tf-border-color: var(
+    --tf-toast-custom-border-default,
+    var(--tf-toast-normal-border-default)
+  );
+  --_tf-title-color: var(
+    --tf-toast-custom-title-color-default,
+    var(--tf-toast-normal-title-color-default)
+  );
+  --_tf-desc-color: var(
+    --tf-toast-custom-description-color-default,
+    var(--tf-toast-normal-description-color-default)
+  );
+  --_tf-progress-bg: var(
+    --tf-toast-custom-progress-bg-default,
+    var(--tf-toast-normal-progress-bg-default)
+  );
+  --_tf-progress-bar-bg: var(
+    --tf-toast-custom-progress-bar-bg-default,
+    var(--tf-toast-normal-progress-bar-bg-default)
+  );
+}
+
+.tf-toast-surface {
+  position: relative;
+  display: block;
+  min-width: 0;
+  padding: var(--tf-toast-padding);
+  border-radius: var(--tf-toast-border-radius);
+  background-color: var(--_tf-resolved-bg);
+  color: var(--_tf-resolved-color);
+  border: var(--tf-toast-border-width) solid var(--_tf-resolved-border);
+  font-family: var(--tf-toast-font-family), sans-serif;
+  overflow: hidden;
+}
+
+.tf-toast-main {
+  display: flex;
+  align-items: stretch;
+  gap: var(--tf-toast-buttons-content-gap);
+  width: 100%;
+}
+
+.tf-toast-main--full > .tf-toast-main-content {
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+}
+
+.tf-toast-main--content-end > .tf-toast-main-content {
+  margin-left: auto;
+  max-width: 100%;
+  flex: 0 1 auto;
+}
+
+.tf-toast-main--content-end > .tf-toast-main-content > .tf-toast-body {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.tf-toast-main-content {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-toast-gap);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.tf-toast-meta {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--tf-toast-gap) / 2);
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.tf-toast-meta--left {
+  align-items: flex-start;
+}
+
+.tf-toast-meta--right {
+  align-items: flex-end;
+}
+
+.tf-toast-meta-row {
+  display: flex;
+  min-width: 0;
+}
+
+.tf-toast-meta-row--top {
+  margin-bottom: var(--tf-toast-buttons-content-gap);
+}
+
+.tf-toast-meta-row--bottom {
+  margin-top: var(--tf-toast-buttons-content-gap);
+}
+
+.tf-toast-meta-row .tf-toast-actions--start {
+  margin-right: auto;
+}
+
+.tf-toast-meta-row .tf-toast-actions--end {
+  margin-left: auto;
+}
+
+.tf-toast-actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--tf-toast-buttons-gap);
+}
+
+.tf-toast-buttons--center {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.tf-toast-buttons--bottom {
+  margin-top: auto;
+}
+
+.tf-toast-actions--start {
+  justify-content: flex-start;
+}
+
+.tf-toast-actions--end {
+  justify-content: flex-end;
+}
+
+.tf-toast-button {
+  appearance: none;
+  border: var(--tf-toast-button-border-width) solid
+    var(--tf-toast-button-border-color);
+  background: var(--tf-toast-button-bg);
+  color: var(--tf-toast-button-color);
+  border-radius: var(--tf-toast-button-border-radius);
+  font-size: var(--tf-toast-button-font-size);
+  line-height: var(--tf-toast-button-line-height);
+  padding: var(--tf-toast-button-padding-y) var(--tf-toast-button-padding-x);
+  cursor: pointer;
+  user-select: none;
+  font-family: inherit;
+}
+
+.tf-toast-icon-spin {
+  display: inline-block;
+  animation: tf-toast-spin 0.8s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes tf-toast-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tf-toast-icon-svg {
+  width: var(--tf-toast-icon-size);
+  height: var(--tf-toast-icon-size);
+}
+
+.tf-toast-icon--loading .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-color, var(--tf-toast-icon-loading));
+}
+
+.tf-toast-icon--default .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-color, var(--tf-toast-icon-default));
+}
+
+.tf-toast-icon--success .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-color, var(--tf-toast-icon-success));
+}
+
+.tf-toast-icon--error .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-color, var(--tf-toast-icon-error));
+}
+
+.tf-toast-icon--warning .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-color, var(--tf-toast-icon-warning));
+}
+
+.tf-toast-icon--info .tf-toast-icon-svg {
+  color: var(--tf-toast-icon-color, var(--tf-toast-icon-info));
+}
+
+.tf-toast-icon--custom .tf-toast-icon-svg {
+  color: var(
+    --tf-toast-icon-color,
+    var(--tf-toast-icon-custom, var(--tf-toast-icon-default))
+  );
+}
+
+.tf-toast-body {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.tf-toast-body--has-created-at {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: calc(var(--tf-toast-gap) / 2);
+  grid-auto-flow: row;
+}
+
+.tf-toast-body--has-created-at > :not(.tf-toast-created-at) {
+  grid-column: 1;
+}
+
+.tf-toast-text {
+  min-width: 0;
+}
+
+.tf-toast-created-at {
+  color: var(--tf-toast-created-at-color);
+  font-size: var(--tf-toast-created-at-font-size);
+  font-style: italic;
+  white-space: nowrap;
+  align-self: end;
+  justify-self: end;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.tf-toast[data-align="right"] .tf-toast-created-at {
+  text-align: right;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tf-toast[data-align="right"] .tf-toast-body--has-created-at {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.tf-toast[data-align="right"]
+  .tf-toast-body--has-created-at
+  > .tf-toast-created-at {
+  grid-column: 1;
+  justify-self: start;
+}
+
+.tf-toast[data-align="right"]
+  .tf-toast-body--has-created-at
+  > :not(.tf-toast-created-at) {
+  grid-column: 2;
+}
+
+.tf-toast-floating-bar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(
+    calc(var(--tf-toast-close-size) * var(--tf-toast-float-x)),
+    calc(var(--tf-toast-close-size) * var(--tf-toast-float-y))
+  );
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tf-toast-created-at-offset);
+  height: var(--tf-toast-close-size);
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.tf-toast-created-at-float {
+  display: inline-flex;
+  align-items: center;
+  height: var(--tf-toast-close-size);
+  padding: 0 var(--tf-toast-created-at-padding-x);
+  border-radius: var(--tf-toast-created-at-border-radius);
+  border: var(--tf-toast-close-border-width) solid
+    var(--tf-toast-created-at-border-color);
+  background: var(--tf-toast-created-at-bg);
+  color: var(--tf-toast-created-at-color);
+  font-size: var(--tf-toast-created-at-font-size);
+  font-style: italic;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.tf-toast-title {
+  margin: 0;
+  font-size: var(--tf-toast-title-font-size);
+  font-weight: var(--tf-toast-title-font-weight);
+  line-height: var(--tf-toast-title-line-height);
+  color: var(--_tf-resolved-title-color);
+  word-wrap: break-word;
+}
+
+.tf-toast-description {
+  margin: 0;
+  font-size: var(--tf-toast-description-font-size);
+  line-height: var(--tf-toast-description-line-height);
+  color: var(--_tf-resolved-desc-color);
+  word-wrap: break-word;
+}
+
+.tf-toast-close {
+  position: relative;
+  height: var(--tf-toast-close-size);
+  width: var(--tf-toast-close-size);
+  border-radius: var(--tf-toast-close-border-radius);
+  border: var(--tf-toast-close-border-width) solid
+    var(--tf-toast-close-border-color);
+  background: var(--tf-toast-close-bg);
+  color: var(--tf-toast-close-color);
+  font-size: var(--tf-toast-close-font-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.tf-toast-close-icon {
+  width: var(--tf-toast-close-icon-size);
+  height: var(--tf-toast-close-icon-size);
+}
+
+.tf-toast-close:focus-visible {
+  outline: 2px solid var(--tf-toast-close-ring-color);
+  outline-offset: 2px;
+}

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "nuxt-toastflow",
   "author": "adrianjanocko",
-  "description": "Nuxt wrapper module for vue-toastflow.",
+  "description": "Nuxt module for Toastflow — accessible, customizable toast notifications with auto-imports, SSR support, and CSS-first theming.",
   "keywords": [
     "nuxt",
+    "nuxt-module",
     "toast",
     "toastflow",
+    "notifications",
     "notification",
-    "vue"
+    "toast-notifications",
+    "toaster",
+    "vue",
+    "typescript"
   ],
   "license": "MIT",
   "homepage": "https://toastflow.top/",
@@ -16,7 +21,7 @@
     "url": "https://github.com/adrianjanocko/toastflow.git",
     "directory": "packages/nuxt"
   },
-  "version": "1.0.1-beta.0",
+  "version": "1.0.2-beta.0",
   "main": "./dist/module.js",
   "module": "./dist/module.mjs",
   "types": "./dist/module.d.ts",
@@ -30,7 +35,18 @@
         "types": "./dist/module.d.ts",
         "default": "./dist/module.js"
       }
-    }
+    },
+    "./runtime": {
+      "import": {
+        "types": "./dist/runtime/index.d.mts",
+        "default": "./dist/runtime/index.mjs"
+      },
+      "require": {
+        "types": "./dist/runtime/index.d.ts",
+        "default": "./dist/runtime/index.js"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",
@@ -40,14 +56,14 @@
     "nuxt": "^3.0.0 || ^4.0.0"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.17.5",
-    "vue-toastflow": "^1.1.9-beta.0"
+    "@nuxt/kit": "^4.4.2",
+    "vue-toastflow": "^1.2.0-beta.3"
   },
   "devDependencies": {
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   },
   "scripts": {
-    "build": "tsup src/module.ts --format cjs,esm --dts"
+    "build": "tsup src/module.ts src/runtime/index.ts --clean --format cjs,esm && tsc --emitDeclarationOnly && node ./scripts/post-build.cjs"
   }
 }

package/dist/module.json

@@ -1,12 +0,0 @@
-{
-  "name": "nuxt-toastflow",
-  "configKey": "toastflow",
-  "compatibility": {
-    "nuxt": "^3.0.0 || ^4.0.0"
-  },
-  "version": "1.0.0",
-  "builder": {
-    "@nuxt/module-builder": "1.0.2",
-    "unbuild": "unknown"
-  }
-}

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

@@ -1,4 +0,0 @@
-type ToastApi = typeof import("vue-toastflow")["toast"];
-export declare function useToast(): ToastApi;
-export declare const toast: ToastApi;
-export {};

package/dist/runtime/composables/toast.js

@@ -1,14 +0,0 @@
-import { useNuxtApp } from "#app";
-export function useToast() {
-  return useNuxtApp().$toast;
-}
-export const toast = new Proxy({}, {
-  get(_target, key) {
-    const currentToast = useNuxtApp().$toast;
-    const value = currentToast[key];
-    if (typeof value === "function") {
-      return value.bind(currentToast);
-    }
-    return value;
-  }
-});

package/dist/runtime/plugin.d.ts

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

package/dist/runtime/plugin.js

@@ -1,11 +0,0 @@
-import { createToastflow, toast } from "vue-toastflow";
-export default defineNuxtPlugin((nuxtApp) => {
-  const runtimeConfig = useRuntimeConfig();
-  const toastflowConfig = runtimeConfig.public.__nuxtToastflow ?? {};
-  nuxtApp.vueApp.use(createToastflow(toastflowConfig));
-  return {
-    provide: {
-      toast
-    }
-  };
-});

package/dist/types.d.mts

@@ -1,9 +0,0 @@
-import type { ModulePublicRuntimeConfig } from './module.mjs'
-
-declare module '@nuxt/schema' {
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
-}
-
-export { default } from './module.mjs'
-
-export { type ModuleOptions, type ModulePublicRuntimeConfig, type NuxtToastflowOptions } from './module.mjs'