@samline/notify 0.1.9 → 0.1.15

package/README.md

@@ -1,4 +1,5 @@
 ## @samline/notify
+
 A Sileo-inspired notifications engine providing a framework-agnostic core and lightweight adapters for Vanilla JS, React, Vue and Svelte.
 
 Inspired by Sileo — see the original project: https://github.com/hiaaryan/sileo
@@ -47,36 +48,30 @@ CDN / Browser
 Use the browser build when your project loads scripts directly and cannot compile npm modules (Shopify, WordPress, plain HTML). Example CDN usage (replace version):
 
 ```html
-<script src="https://unpkg.com/@samline/notify@0.1.8/dist/notify.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.8/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.1.15/dist/notify.umd.js"></script>
+<link
+  rel="stylesheet" 
+  href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css"
+/>
+
+<script>
+  const api = window.notify || window.notifications
+  api.initToasters(document.body, ['top-right'])
+  api.notify({ title: 'Saved', description: 'Changes saved', type: 'success' })
+</script>
 ```
 
 Entry Points
 
 Choose the entrypoint matching your stack so you only import what you need.
 
-| Use case | Import | Guide |
-| --- | --- | --- |
-| Vanilla JS | `import { default as notifications } from '@samline/notify'` | [docs/vanilla.md](docs/vanilla.md) |
-| Vanilla explicit subpath | `import { sileo } from '@samline/notify/vanilla'` | [docs/vanilla.md](docs/vanilla.md) |
-| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.1.8/dist/notify.umd.js"></script>` | [docs/browser.md](docs/browser.md) |
-| React | `import { Toaster } from '@samline/notify/react'` | [docs/react.md](docs/react.md) |
-| Vue | `import Notifications from '@samline/notify/vue'` | [docs/vue.md](docs/vue.md) |
-| Svelte | `import Toaster from '@samline/notify/svelte'` | [docs/svelte.md](docs/svelte.md) |
-
-Quick Start
-
-Vanilla example (UMD / modules):
-
-```html
-<script src="https://unpkg.com/@samline/notify@0.1.8/dist/notify.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.8/dist/styles.css">
-<script>
-  const api = window.notify || window.notifications;
-  api.initToasters(document.body, ['top-right']);
-  api.notify({ title: 'Saved', description: 'Changes saved', type: 'success' });
-</script>
-```
+| Use case      | Import                                                                                                                                        | Guide                              |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| Vanilla JS    | `import { notify, initToasters } from '@samline/notify/vanilla'`                                                                              | [docs/vanilla.md](docs/vanilla.md) |
+| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.1.13/dist/notify.umd.js"></script>`<br/>`const api = window.notify; api.initToasters(...);` | [docs/browser.md](docs/browser.md) |
+| React         | `import { Toaster, notify } from '@samline/notify/react'`                                                                                      | [docs/react.md](docs/react.md)     |
+| Vue           | `import { Toaster, notify } from '@samline/notify/vue'`                                                                                        | [docs/vue.md](docs/vue.md)         |
+| Svelte        | `import Toaster, { notify } from '@samline/notify/svelte'`                                                                                     | [docs/svelte.md](docs/svelte.md)   |
 
 Documentation Guides
 
@@ -109,14 +104,14 @@ Shared Options
 
 Common `options` across entrypoints:
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | string | — | Toast title |
-| `description` | string | — | Optional body text |
-| `type` | `info\|success\|error\|warning` | `info` | Visual intent |
-| `position` | string | `top-right` | One of toast positions |
-| `duration` | number | `4000` | Auto-dismiss timeout in ms (0 = persistent) |
-| `button` | { title: string, onClick: () => void } | — | Optional action button |
+| Property      | Type                                   | Default     | Description                                 |
+| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
+| `title`       | string                                 | —           | Toast title                                 |
+| `description` | string                                 | —           | Optional body text                          |
+| `type`        | `info\|success\|error\|warning`        | `info`      | Visual intent                               |
+| `position`    | string                                 | `top-right` | One of toast positions                      |
+| `duration`    | number                                 | `4000`      | Auto-dismiss timeout in ms (0 = persistent) |
+| `button`      | { title: string, onClick: () => void } | —           | Optional action button                      |
 
 Notes
 
@@ -127,4 +122,3 @@ Notes
 License
 
 MIT
-

package/dist/notify.umd.js

@@ -415,15 +415,6 @@
         }
     }
 
-    var invariant = function () { };
-    if (process.env.NODE_ENV !== 'production') {
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
-
     /**
      * The MotionValue tracks the state of a single animatable
      * value. Currently, updatedAt and current are unused. The
@@ -966,8 +957,6 @@
         return function animate(elements, keyframes, options = {}) {
             elements = resolveElements(elements);
             const numElements = elements.length;
-            invariant(Boolean(numElements), "No valid element provided.");
-            invariant(Boolean(keyframes), "No keyframes defined.");
             /**
              * Create and start new animations
              */

package/docs/browser.md

@@ -1,44 +1,31 @@
-# Browser (UMD / no-bundler)
 
-Quick start
+# Browser / CDN usage
 
-Include the UMD bundle and stylesheet in a static page:
+Use this package directly in the browser when you cannot use npm modules or a bundler (e.g. Shopify, WordPress, static HTML).
 
-```html
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.8/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.1.8/dist/notify.umd.js"></script>
-<script>
-  const api = window.notify || window.notifications;
-  api.initToasters(document.body, ['top-right']);
-  // convenience: api.notify
-  api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
-</script>
-```
-
-Notes
+## Quick start
 
-- The UMD bundle exposes `window.notify` (preferred). For compatibility it also exposes `window.notifications` with the previous API shape.
-- Make sure to load `dist/styles.css` for styles and animations.
-
-## CDN / Browser
-
-Use the browser build when your project loads scripts directly in the page and cannot compile npm modules (Shopify, WordPress, plain HTML templates).
-
-Example using the UMD build (replace path/version as needed):
+Add the stylesheet and UMD bundle to your HTML:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.8/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.1.8/dist/notify.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.1.15/dist/notify.umd.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-    const api = window.notify || window.notifications;
+    const api = window.notify; // or window.notifications for legacy
     api.initToasters(document.body, ['top-right']);
     api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
   });
 </script>
 ```
 
-### Notes
+## API
+
+- The UMD bundle exposes `window.notify` (recommended) and `window.notifications` (legacy/compatibility).
+- Always include `dist/styles.css` for correct appearance and animations.
+- Use `api.initToasters(container, positions)` to mount containers (usually `document.body`).
+- Use `api.notify({...})` to show a notification.
+
+## Notes
 
-The browser bundle exposes `window.notify` (preferred) and for compatibility also exposes `window.notifications`; if these globals conflict with other scripts use the module builds instead.
-Include `dist/styles.css` for styles and animations when using the UMD/browser bundle.
+- If you need more control or want to avoid global variables, use the ESM/CJS builds with a bundler.

package/docs/react.md

@@ -1,57 +1,69 @@
+
 # React
 
-Installation
+## Quick start
+
+Install the package and peer dependencies:
 
 ```bash
 npm install @samline/notify react react-dom
 ```
 
-Basic usage
+Import and render the `Toaster` component in your app root:
 
 ```tsx
 import React from 'react';
-import { notify, sileo } from '@samline/notify';
-import { Toaster } from '@samline/notify/react';
 
-function App(){
+import { Toaster, notify } from '@samline/notify/react';
+
+export function App() {
   return (
     <>
       <Toaster />
       <button onClick={() => notify.show({ title: 'Done', type: 'success' })}>Show</button>
     </>
-  )
+  );
 }
 ```
 
-Notes
+> **Note:**
+> Import `@samline/notify/dist/styles.css` in your main entrypoint or include it in your HTML for correct appearance.
+> CDN: `<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css">`
 
-- The `Toaster` component subscribes to the core controller and renders toasts.
-- You can customize positions and styles by importing `dist/styles.css`.
 
-## Quick start
-
-Install:
+## API
 
-```bash
-npm install @samline/notify react react-dom
+- `<Toaster />` subscribes to the notification controller and renders toasts.
+- Use `notify.show({...})` or shortcut methods (`notify.success`, `notify.error`, `notify.info`, `notify.warning`, `notify.action`, `notify.promise`, `notify.dismiss`, `notify.clear`) to trigger notifications. Import from `@samline/notify/react`.
+
+### Methods
+
+```ts
+notify.show(options)
+notify.success(options)
+notify.error(options)
+notify.info(options)
+notify.warning(options)
+notify.action(options)
+notify.promise(promise, { loading, success, error })
+notify.dismiss(id)
+notify.clear()
 ```
 
-Import and render the React `Toaster` in your app:
+### Options
 
-```tsx
-import React from 'react';
-import { Toaster } from '@samline/notify/react';
-import { notify, sileo } from '@samline/notify';
+| Property      | Type                                   | Default     | Description                                 |
+| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
+| `title`       | string                                 | —           | Toast title                                 |
+| `description` | string                                 | —           | Optional body text                          |
+| `type`        | `info\|success\|error\|warning`        | `info`      | Visual intent                               |
+| `position`    | string                                 | `top-right` | One of toast positions                      |
+| `duration`    | number                                 | `4000`      | Auto-dismiss timeout in ms (0 = persistent) |
+| `button`      | { title: string, onClick: () => void } | —           | Optional action button                      |
 
-export function App(){
-  return (
-    <div>
-      <Toaster />
-      <button onClick={() => notify.show({ title: 'Done', type: 'success' })}>Show</button>
-    </div>
-  );
-}
-```
+## Tips
+
+- You can customize positions and styles by overriding CSS variables or importing the stylesheet in your preferred way.
 
 ## API
 

package/docs/svelte.md

@@ -1,50 +1,68 @@
-# Svelte
 
-Quick start
 # Svelte
 
-Quick start
+## Quick start
+
+Install the package:
 
 ```bash
 npm install @samline/notify svelte
 ```
 
-Usage
+Import and initialize in your root component:
 
 ```svelte
 <script>
   import Toaster, { initSileoStore } from '@samline/notify/svelte';
-  initSileoStore();
+  initSileoStore(); // Call once in your app root
+
+  import { notify } from '@samline/notify/svelte';
+  function show() {
+    notify.show({ title: 'From Svelte' });
+  }
 </script>
 
 <Toaster />
-
-<button on:click={() => import('@samline/notify').then(m => m.notify.show({ title: 'Svelte' }))}>Show</button>
+<button on:click={show}>Show</button>
 ```
 
-TypeScript
+> **Note:**
+> Import `@samline/notify/dist/styles.css` in your main entrypoint or HTML for correct appearance.
+> CDN: `<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css">`
 
-If you use TypeScript, run `npm run typecheck` and `npx svelte-check` during development.
 
 ## API
 
-- `Toaster.svelte` — component that renders toasts and subscribes to the core controller.
-- `initSileoStore()` — helper to wire the core `notify`/`sileo` controller to a Svelte store.
-
-## Examples
+- `Toaster.svelte`: Renders notifications and subscribes to the core controller.
+- `initSileoStore()`: Wires the notification controller to a Svelte store (call once in your app root).
+- Use `notify.show({...})` or shortcut methods to trigger notifications. Import from `@samline/notify/svelte` (now available directly).
+
+### Methods
+
+```ts
+notify.show(options)
+notify.success(options)
+notify.error(options)
+notify.info(options)
+notify.warning(options)
+notify.action(options)
+notify.promise(promise, { loading, success, error })
+notify.dismiss(id)
+notify.clear()
+```
 
-```svelte
-<script>
-  import Toaster, { initSileoStore } from '@samline/notify/svelte';
-  initSileoStore();
-  function show(){ import('@samline/notify').then(m => m.notify.show({ title: 'From Svelte' })); }
-</script>
+### Options
 
-<Toaster />
-<button on:click={show}>Show</button>
-```
+| Property      | Type                                   | Default     | Description                                 |
+| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
+| `title`       | string                                 | —           | Toast title                                 |
+| `description` | string                                 | —           | Optional body text                          |
+| `type`        | `info\|success\|error\|warning`        | `info`      | Visual intent                               |
+| `position`    | string                                 | `top-right` | One of toast positions                      |
+| `duration`    | number                                 | `4000`      | Auto-dismiss timeout in ms (0 = persistent) |
+| `button`      | { title: string, onClick: () => void } | —           | Optional action button                      |
 
-## Notes
+## Tips
 
-- Use `npx svelte-check` and `npm run typecheck` when developing with TypeScript.
-- The Svelte adapter is lightweight and subscribes to the shared core controller; use `initSileoStore()` in your app root to wire the store.
+- For TypeScript, use `npx svelte-check` and `npm run typecheck` during development.
+- You can customize styles by overriding CSS variables or importing the stylesheet as needed.

package/docs/vanilla.md

@@ -1,19 +1,29 @@
-# Vanilla
+# Vanilla JS
 
-## Quick Start
+Use the vanilla adapter for plain JavaScript projects, either with modules or directly via CDN.
 
-Import and initialize the vanilla (DOM) renderer:
+## Quick start (ESM / npm)
 
 ```ts
-import { notify, sileo, initToasters } from '@samline/notify/vanilla';
-
-// Mount the containers (defaults to document.body)
+import { notify, initToasters } from '@samline/notify/vanilla';
 initToasters(document.body, ['top-right']);
-
-// Show a notification (use `notify(...)` as the recommended API)
 notify({ title: 'Saved', description: 'Your changes have been saved', type: 'success' });
 ```
 
+## Quick start (CDN / UMD)
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.1.15/dist/notify.umd.js"></script>
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const api = window.notify;
+		api.initToasters(document.body, ['top-right']);
+		api.notify({ title: 'Saved', description: 'Your changes have been saved', type: 'success' });
+	});
+</script>
+```
+
 ## API
 
 ```ts
@@ -50,14 +60,10 @@ notify.clear()
 | `duration` | `number` | `4000` | Auto-dismiss timeout in ms (`null` = sticky) |
 | `button` | `{ title, onClick }` | — | Optional action button |
 
-## Examples
-
-### Basic
+## Tips
 
-```ts
-import { notify, initToasters } from '@samline/notify/vanilla';
-initToasters();
-notify.success({ title: 'Saved' });
+- Always include the stylesheet for correct appearance.
+- Use the ESM build for modern projects, or the UMD build for legacy/static sites.
 ```
 
 ### Promise flow
@@ -67,7 +73,7 @@ notify.promise(fetch('/api/save'), {
 	loading: { title: 'Saving...' },
 	success: { title: 'Done', type: 'success' },
 	error: { title: 'Failed', type: 'error' }
-});
+import { notify, initToasters } from '@samline/notify/vanilla'; // Import from '@samline/notify/vanilla'
 ```
 
 ## When to use

package/docs/vue.md

@@ -1,41 +1,93 @@
 # Vue 3
 
-Quick start
+## Quick start
+
+Install the package:
+
+```bash
+npm install @samline/notify vue
+```
+
+Register the `Toaster` component in your app:
 
 ```js
 import { createApp } from 'vue';
 import App from './App.vue';
-import Notifications from '@samline/notify/vue';
+import { Toaster } from '@samline/notify/vue';
 
 const app = createApp(App);
-app.use(Notifications);
+app.component('Toaster', Toaster);
 app.mount('#app');
 ```
 
-Usage
 
-- The plugin registers a `Toaster` component and provides a `useSileo()` composable to access the controller.
 
-Example in a single-file component:
+Use the `notify` controller to show notifications:
+
+```js
+import { notify } from '@samline/notify/vue';
+notify.show({ title: 'Hello from Vue' });
+```
+
+Or access it globally in any component via `this.$notify` (if you use the plugin install):
+
+```js
+this.$notify.show({ title: 'From global' });
+```
+
+In your template:
 
 ```vue
 <template>
-  <Toaster />
-  <button @click="show">Show</button>
+	<Toaster />
+	<button @click="show">Show</button>
 </template>
 
 <script setup>
-import { notify, sileo } from '@samline/notify';
+import { notify } from '@samline/notify/vue';
 function show(){ notify.show({ title: 'Hello from Vue' }); }
 </script>
- 
+```
+
+> **Note:**
+> Import `@samline/notify/dist/styles.css` in your main entrypoint or HTML for correct appearance.
+> CDN: `<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css">`
+
+
 ## API
 
-- `Notifications` plugin: registers a global component `SileoToaster` and exposes `app.config.globalProperties.$sileo`.
-- `useSileo()` (composable): returns the `sileo` controller instance for programmatic use.
+- `Toaster`: Main visual component (same as in React and Svelte).
+- `notify`: Programmatic controller for showing notifications. Import from `@samline/notify/vue` or use `this.$notify` if using the plugin.
+- Advanced: The `Notifications` plugin is available for global/legacy registration, but direct use of `Toaster` is recommended for most apps.
+- `useSileo()`: Composable that returns the `sileo` controller if you prefer.
+
+### Methods
+
+```ts
+notify.show(options)
+notify.success(options)
+notify.error(options)
+notify.info(options)
+notify.warning(options)
+notify.action(options)
+notify.promise(promise, { loading, success, error })
+notify.dismiss(id)
+notify.clear()
+```
+
+### Options
+
+| Property      | Type                                   | Default     | Description                                 |
+| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
+| `title`       | string                                 | —           | Toast title                                 |
+| `description` | string                                 | —           | Optional body text                          |
+| `type`        | `info\|success\|error\|warning`        | `info`      | Visual intent                               |
+| `position`    | string                                 | `top-right` | One of toast positions                      |
+| `duration`    | number                                 | `4000`      | Auto-dismiss timeout in ms (0 = persistent) |
+| `button`      | { title: string, onClick: () => void } | —           | Optional action button                      |
 
-## Notes
+## Tips
 
 - The Vue adapter integrates with the Vue lifecycle and works with Vue 3's Composition API.
-- To customize appearance, import `dist/styles.css` or override the CSS variables.
+- You can customize appearance by importing the stylesheet or overriding CSS variables.
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samline/notify",
-  "version": "0.1.9",
+  "version": "0.1.15",
   "description": "Notifications engine inspired by Sileo, with adapters for vanilla, React, Vue and Svelte.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/rollup.config.mjs

@@ -37,12 +37,20 @@ export default [
       exports: 'named',
       name: 'notify'
     },
-    plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' }),
+    plugins: [
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        preventAssignment: true
+      }),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
       copy({
         targets: [
           { src: 'src/styles/sileo.css', dest: 'dist', rename: 'styles.css' }
         ],
         verbose: true
-      })]
+      })
+    ]
   }
 ];