@samline/notify 0.1.0

package/dist/styles.css

@@ -0,0 +1,49 @@
+:root{
+  --sileo-bg: #0f1724;
+  --sileo-foreground: #ffffff;
+  --sileo-success: #16a34a;
+  --sileo-error: #ef4444;
+  --sileo-info: #2563eb;
+  --sileo-warning: #f59e0b;
+  --sileo-gap: 12px;
+}
+
+.sileo-toaster{
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sileo-gap);
+  pointer-events: none;
+}
+
+.sileo-toaster[data-position="top-right"]{ top: 16px; right: 16px; align-items:flex-end; }
+.sileo-toaster[data-position="top-left"]{ top: 16px; left: 16px; align-items:flex-start; }
+.sileo-toaster[data-position="bottom-right"]{ bottom: 16px; right: 16px; align-items:flex-end; }
+.sileo-toaster[data-position="bottom-left"]{ bottom: 16px; left: 16px; align-items:flex-start; }
+
+.sileo-toast{
+  pointer-events: auto;
+  min-width: 220px;
+  max-width: 360px;
+  background: var(--sileo-bg);
+  color: var(--sileo-foreground);
+  padding: 12px 14px;
+  border-radius: 10px;
+  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.sileo-toast[data-type="success"]{ border-left: 4px solid var(--sileo-success); }
+.sileo-toast[data-type="error"]{ border-left: 4px solid var(--sileo-error); }
+.sileo-toast[data-type="info"]{ border-left: 4px solid var(--sileo-info); }
+.sileo-toast[data-type="warning"]{ border-left: 4px solid var(--sileo-warning); }
+
+.sileo-toast-header{ font-weight: 600; font-size: 14px; }
+.sileo-toast-desc{ font-size: 13px; opacity: 0.85; margin-top: 4px; }
+.sileo-toast-btn{ margin-left: 8px; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,0.08); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+.sileo-toast-close{ position: absolute; right: 8px; top: 6px; background: transparent; border: none; color: inherit; font-size: 16px; cursor: pointer; }

package/dist/svelte/store.d.ts

@@ -0,0 +1,3 @@
+import { ToastItem } from '../core/index';
+export declare const toasts: import("svelte/store").Writable<ToastItem[]>;
+export declare function initSileoStore(): () => boolean;

package/dist/vanilla/index.d.ts

@@ -0,0 +1,13 @@
+import { notify as coreNotify, sileo as coreSileo } from '../core/index';
+import { initToasters, POSITIONS } from './toasterManager';
+export { initToasters, POSITIONS };
+export declare const notify: (opts: import("../core/index").ToastOptions) => string;
+type VanillaAPI = {
+    sileo: typeof coreSileo;
+    initToasters: typeof initToasters;
+    notify: typeof notify;
+    controller?: typeof coreNotify;
+    notifications?: any;
+};
+declare const defaultExport: VanillaAPI;
+export default defaultExport;

package/dist/vanilla/toasterManager.d.ts

@@ -0,0 +1,6 @@
+declare const POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+export type Position = typeof POSITIONS[number];
+export declare function initToasters(root?: HTMLElement, positions?: Position[]): {
+    destroy(): void;
+};
+export { POSITIONS };

package/dist/vue/index.d.ts

@@ -0,0 +1,20 @@
+import { App } from 'vue';
+export declare const Toaster: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    position: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/docs/browser.md

@@ -0,0 +1,44 @@
+# Browser (UMD / no-bundler)
+
+Quick start
+
+Include the UMD bundle and stylesheet in a static page:
+
+```html
+<link rel="stylesheet" href="/path/to/dist/styles.css">
+<script src="/path/to/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
+
+- 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):
+
+```html
+<link rel="stylesheet" href="/path/to/dist/styles.css">
+<script src="/path/to/dist/notify.umd.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const api = window.notify || window.notifications;
+    api.initToasters(document.body, ['top-right']);
+    api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
+  });
+</script>
+```
+
+### 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.

package/docs/react.md

@@ -0,0 +1,64 @@
+# React
+
+Installation
+
+```bash
+npm install @samline/notify react react-dom
+```
+
+Basic usage
+
+```tsx
+import React from 'react';
+import { notify, sileo } from '@samline/notify';
+import { Toaster } from '@samline/notify/react';
+
+function App(){
+  return (
+    <>
+      <Toaster />
+      <button onClick={() => notify.show({ title: 'Done', type: 'success' })}>Show</button>
+    </>
+  )
+}
+```
+
+Notes
+
+- 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:
+
+```bash
+npm install @samline/notify react react-dom
+```
+
+Import and render the React `Toaster` in your app:
+
+```tsx
+import React from 'react';
+import { Toaster } from '@samline/notify/react';
+import { notify, sileo } from '@samline/notify';
+
+export function App(){
+  return (
+    <div>
+      <Toaster />
+      <button onClick={() => notify.show({ title: 'Done', type: 'success' })}>Show</button>
+    </div>
+  );
+}
+```
+
+## API
+
+- `Toaster` component: mounts a toast container and subscribes to the core controller.
+- Primary API: use `notify` (e.g. `notify.show(...)`). A backward-compatible `sileo` alias is also available: `sileo.show(...)`.
+
+## Notes
+
+- The React adapter renders toasts in a React-friendly way and is SSR-safe when used with client-only mounting.
+- To customize styles, import `dist/styles.css` or override the CSS variables defined in the stylesheet.

package/docs/svelte.md

@@ -0,0 +1,50 @@
+# Svelte
+
+Quick start
+# Svelte
+
+Quick start
+
+```bash
+npm install @samline/notify svelte
+```
+
+Usage
+
+```svelte
+<script>
+  import Toaster, { initSileoStore } from '@samline/notify/svelte';
+  initSileoStore();
+</script>
+
+<Toaster />
+
+<button on:click={() => import('@samline/notify').then(m => m.notify.show({ title: 'Svelte' }))}>Show</button>
+```
+
+TypeScript
+
+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
+
+```svelte
+<script>
+  import Toaster, { initSileoStore } from '@samline/notify/svelte';
+  initSileoStore();
+  function show(){ import('@samline/notify').then(m => m.notify.show({ title: 'From Svelte' })); }
+</script>
+
+<Toaster />
+<button on:click={show}>Show</button>
+```
+
+## Notes
+
+- 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.

package/docs/vanilla.md

@@ -0,0 +1,79 @@
+# Vanilla
+
+## Quick Start
+
+Import and initialize the vanilla (DOM) renderer:
+
+```ts
+import { notify, sileo, initToasters } from '@samline/notify/vanilla';
+
+// Mount the containers (defaults to document.body)
+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' });
+```
+
+## API
+
+```ts
+// Core controller (primary: `notify`, compatibility alias: `sileo`)
+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()
+```
+
+### Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `options` | object | Toast creation options (see Options below) |
+
+### Returns
+
+`string | void` — `show` returns a toast id when created.
+
+## 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` | Container position |
+| `duration` | `number` | `4000` | Auto-dismiss timeout in ms (`null` = sticky) |
+| `button` | `{ title, onClick }` | — | Optional action button |
+
+## Examples
+
+### Basic
+
+```ts
+import { notify, initToasters } from '@samline/notify/vanilla';
+initToasters();
+notify.success({ title: 'Saved' });
+```
+
+### Promise flow
+
+```ts
+notify.promise(fetch('/api/save'), {
+	loading: { title: 'Saving...' },
+	success: { title: 'Done', type: 'success' },
+	error: { title: 'Failed', type: 'error' }
+});
+```
+
+## When to use
+
+Use the vanilla entry when you interact directly with DOM nodes or need a framework-agnostic API.
+
+## Accessibility
+
+Toaster containers use `role="status"` and `aria-live="polite"` by default. Respect `prefers-reduced-motion` in your UI.

package/docs/vue.md

@@ -0,0 +1,41 @@
+# Vue 3
+
+Quick start
+
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+import Notifications from '@samline/notify/vue';
+
+const app = createApp(App);
+app.use(Notifications);
+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:
+
+```vue
+<template>
+  <Toaster />
+  <button @click="show">Show</button>
+</template>
+
+<script setup>
+import { notify, sileo } from '@samline/notify';
+function show(){ notify.show({ title: 'Hello from Vue' }); }
+</script>
+ 
+## API
+
+- `Notifications` plugin: registers a global component `SileoToaster` and exposes `app.config.globalProperties.$sileo`.
+- `useSileo()` (composable): returns the `sileo` controller instance for programmatic use.
+
+## Notes
+
+- 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.
+```

package/examples/no-bundler/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Samline Notifications - No Bundler Example</title>
+    <link rel="stylesheet" href="../../dist/styles.css">
+  </head>
+  <body>
+    <h1>Samline Notifications - No Bundler</h1>
+    <button id="ok">Show toast</button>
+
+    <script src="../../dist/notify.umd.js"></script>
+    <script>
+      // UMD global: window.notify (preferred). For backward compatibility the API
+      // object also exposes a `notifications` key when necessary.
+      const api = window.notify || window.notifications;
+      const manager = api.initToasters(document.body, ['top-right','bottom-left']);
+
+      document.getElementById('ok').addEventListener('click', () => {
+        api.notify({ title: 'Hola', description: 'Toast desde UMD', duration: 4000 });
+      });
+    </script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@samline/notify",
+  "version": "0.1.0",
+  "description": "Notifications engine inspired by Sileo, with adapters for vanilla, React, Vue and Svelte.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/notify.umd.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "notifications",
+    "toasts",
+    "sileo",
+    "samline"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vue": "^3.5.31",
+    "svelte": "^5.55.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^3.0.0",
+    "tslib": "^2.8.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "svelte-check": "^3.3.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  }
+  ,
+  "devDependenciesMeta": {
+    "@types/react": { "optional": true },
+    "@types/react-dom": { "optional": true }
+  }
+  ,
+  "dependencies": {
+    "motion": "^10.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,39 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import copy from 'rollup-plugin-copy';
+
+export default [
+  // ESM + CJS
+  {
+    input: 'src/vanilla/index.ts',
+    output: [
+      { file: 'dist/index.esm.js', format: 'es', exports: 'named' },
+      { file: 'dist/index.cjs.js', format: 'cjs', exports: 'named' }
+    ],
+    plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' }),
+      copy({
+        targets: [
+          { src: 'src/styles/sileo.css', dest: 'dist', rename: 'styles.css' }
+        ],
+        verbose: true
+      })]
+  },
+  // UMD build for browser (vanilla DOM use)
+  {
+    input: 'src/vanilla/index.ts',
+    output: {
+      file: 'dist/notify.umd.js',
+      format: 'umd',
+      exports: 'named',
+      name: 'notify'
+    },
+    plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' }),
+      copy({
+        targets: [
+          { src: 'src/styles/sileo.css', dest: 'dist', rename: 'styles.css' }
+        ],
+        verbose: true
+      })]
+  }
+];

package/src/core/index.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { sileo } from './index';
+
+describe('sileo core', () => {
+  it('shows and dismisses a toast', () => {
+    const id = sileo.success({ title: 't1' });
+    const items = sileo.getToasts();
+    expect(items.find((i) => i.id === id)).toBeDefined();
+    sileo.dismiss(id);
+    const after = sileo.getToasts();
+    expect(after.find((i) => i.id === id)).toBeUndefined();
+  });
+
+  it('promise flow shows loading then result', async () => {
+    const p = new Promise((resolve) => setTimeout(() => resolve('ok'), 50));
+    const promise = sileo.promise(p as any, {
+      loading: { title: 'loading' },
+      success: { title: 'done' },
+      error: { title: 'err' }
+    });
+    await promise;
+    const items = sileo.getToasts();
+    // success toast should be present
+    expect(items.some((t) => t.options.title === 'done')).toBe(true);
+  });
+});

package/src/core/index.ts

@@ -0,0 +1,122 @@
+export type Position =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning' | 'loading' | 'action';
+
+export interface ToastButton {
+  title: string;
+  onClick: () => void;
+}
+
+export interface ToastOptions {
+  title?: string;
+  description?: string;
+  position?: Position;
+  duration?: number | null; // ms, null = sticky
+  type?: ToastType;
+  button?: ToastButton;
+  [key: string]: any;
+}
+
+export interface ToastItem {
+  id: string;
+  options: ToastOptions;
+  createdAt: number;
+}
+
+type Listener = (items: ToastItem[]) => void;
+
+class NotifyController {
+  private toasts: ToastItem[] = [];
+  private listeners = new Set<Listener>();
+  private idCounter = 1;
+
+  private nextId() {
+    return `notify_${Date.now()}_${this.idCounter++}`;
+  }
+
+  subscribe(fn: Listener) {
+    this.listeners.add(fn);
+    fn(this.toasts.slice());
+    return () => this.listeners.delete(fn);
+  }
+
+  private notify() {
+    const snapshot = this.toasts.slice();
+    this.listeners.forEach((l) => l(snapshot));
+  }
+
+  getToasts() {
+    return this.toasts.slice();
+  }
+
+  show(opts: ToastOptions): string {
+    const id = this.nextId();
+    const item: ToastItem = { id, options: { ...opts }, createdAt: Date.now() };
+    this.toasts.push(item);
+    this.notify();
+    return id;
+  }
+
+  success(opts: ToastOptions) {
+    return this.show({ ...opts, type: 'success' });
+  }
+
+  error(opts: ToastOptions) {
+    return this.show({ ...opts, type: 'error' });
+  }
+
+  info(opts: ToastOptions) {
+    return this.show({ ...opts, type: 'info' });
+  }
+
+  warning(opts: ToastOptions) {
+    return this.show({ ...opts, type: 'warning' });
+  }
+
+  action(opts: ToastOptions) {
+    return this.show({ ...opts, type: 'action' });
+  }
+
+  dismiss(id: string) {
+    const idx = this.toasts.findIndex((t) => t.id === id);
+    if (idx >= 0) {
+      this.toasts.splice(idx, 1);
+      this.notify();
+    }
+  }
+
+  clear(position?: Position) {
+    if (position) {
+      this.toasts = this.toasts.filter((t) => t.options.position !== position);
+    } else {
+      this.toasts = [];
+    }
+    this.notify();
+  }
+
+  promise<T = any>(p: Promise<T>, opts: { loading: ToastOptions; success?: ToastOptions | ((r: T) => ToastOptions); error?: ToastOptions | ((e: any) => ToastOptions); position?: Position; }) {
+    const loadingId = this.show({ ...(opts.loading || {}), type: 'loading', position: opts.position });
+    p.then((res) => {
+      this.dismiss(loadingId);
+      const successOpt = typeof opts.success === 'function' ? (opts.success as any)(res) : opts.success;
+      if (successOpt) this.show({ ...(successOpt || {}), type: 'success', position: opts.position });
+    }).catch((err) => {
+      this.dismiss(loadingId);
+      const errorOpt = typeof opts.error === 'function' ? (opts.error as any)(err) : opts.error;
+      if (errorOpt) this.show({ ...(errorOpt || {}), type: 'error', position: opts.position });
+    });
+    return p;
+  }
+}
+
+export const notify = new NotifyController();
+// backward compatibility alias
+export const sileo = notify as unknown as NotifyController;
+
+export default notify;