@samline/notify 0.1.0 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samline/notify",
-  "version": "0.1.0",
+  "version": "0.1.6",
   "description": "Notifications engine inspired by Sileo, with adapters for vanilla, React, Vue and Svelte.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -42,13 +42,15 @@
     "@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 }
-  }
-  ,
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "motion": "^10.0.0"
   }

package/CHANGELOG.md

@@ -1,9 +0,0 @@
-# Changelog
-
-## 0.1.0 - Initial rename and multi-adapter release
-
-- Renamed internal controller `sileo` -> `notify` (kept `sileo` alias for compatibility).
-- Package renamed to `@samline/notify`.
-- UMD build changed to `dist/notify.umd.js` and exposes `window.notify` (compat `window.notifications`).
-- Updated docs, examples and tests to reflect the rename.
-- Copied styles to `dist/styles.css` as part of build.

package/dist/core/index.d.ts

@@ -1,47 +0,0 @@
-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;
-    type?: ToastType;
-    button?: ToastButton;
-    [key: string]: any;
-}
-export interface ToastItem {
-    id: string;
-    options: ToastOptions;
-    createdAt: number;
-}
-type Listener = (items: ToastItem[]) => void;
-declare class NotifyController {
-    private toasts;
-    private listeners;
-    private idCounter;
-    private nextId;
-    subscribe(fn: Listener): () => boolean;
-    private notify;
-    getToasts(): ToastItem[];
-    show(opts: ToastOptions): string;
-    success(opts: ToastOptions): string;
-    error(opts: ToastOptions): string;
-    info(opts: ToastOptions): string;
-    warning(opts: ToastOptions): string;
-    action(opts: ToastOptions): string;
-    dismiss(id: string): void;
-    clear(position?: Position): void;
-    promise<T = any>(p: Promise<T>, opts: {
-        loading: ToastOptions;
-        success?: ToastOptions | ((r: T) => ToastOptions);
-        error?: ToastOptions | ((e: any) => ToastOptions);
-        position?: Position;
-    }): Promise<T>;
-}
-export declare const notify: NotifyController;
-export declare const sileo: NotifyController;
-export default notify;

package/dist/core/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/react/Toaster.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface ReactToasterProps {
-    position?: string;
-}
-export declare const Toaster: React.FC<ReactToasterProps>;
-export default Toaster;

package/dist/react/index.d.ts

@@ -1,10 +0,0 @@
-export { notify, sileo } from '../core/index';
-export { Toaster } from './Toaster';
-import { notify as coreNotify, sileo as coreSileo } from '../core/index';
-type ReactAPI = {
-    notify: typeof coreNotify;
-    sileo: typeof coreSileo;
-    Toaster?: any;
-};
-declare const defaultExport: ReactAPI;
-export default defaultExport;

package/dist/svelte/store.d.ts

@@ -1,3 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/examples/no-bundler/index.html

@@ -1,25 +0,0 @@
-<!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/src/core/index.test.ts

@@ -1,26 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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;

package/src/react/Toaster.tsx

@@ -1,67 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import type { ToastItem } from '../core/index';
-import { sileo } from '../core/index';
-import { animate } from 'motion';
-
-export interface ReactToasterProps {
-  position?: string;
-}
-
-export const Toaster: React.FC<ReactToasterProps> = ({ position = 'top-right' }) => {
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-  const lastSnapshot = React.useRef<string[]>([]);
-
-  useEffect(() => {
-    const unsub = sileo.subscribe((items) => setToasts(items.filter((t) => (t.options.position || 'top-right') === position)));
-    return () => { unsub(); };
-  }, [position]);
-
-  const handleDismiss = async (id: string) => {
-    const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement | null;
-    if (el) {
-      try {
-        const a = animate(el, { opacity: [1, 0], transform: ['translateY(0px)', 'translateY(-8px)'] }, { duration: 0.15 });
-        await (a as any).finished;
-      } catch (e) { /* ignore */ }
-    }
-    sileo.dismiss(id);
-  };
-
-  // animate in newly added toasts
-  useEffect(() => {
-    const ids = toasts.map(t => t.id);
-    const added = ids.filter(id => !lastSnapshot.current.includes(id));
-    added.forEach(id => {
-      const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement | null;
-      if (el) {
-        // set initial state then animate
-        el.style.opacity = '0';
-        el.style.transform = 'translateY(-6px)';
-        try {
-          const a = animate(el, { opacity: [0, 1], transform: ['translateY(-6px)', 'translateY(0px)'] }, { duration: 0.22 });
-          // ignore finished
-        } catch (e) {}
-      }
-    });
-    lastSnapshot.current = ids;
-  }, [toasts]);
-
-  return (
-    <div className="sileo-toaster" data-position={position}>
-      {toasts.map((t) => (
-        <div key={t.id} className="sileo-toast" data-type={t.options.type} data-id={t.id}>
-          <div style={{ flex: 1 }}>
-            <div className="sileo-toast-header">{t.options.title}</div>
-            {t.options.description && <div className="sileo-toast-desc">{t.options.description}</div>}
-          </div>
-          {t.options.button && (
-            <button className="sileo-toast-btn" onClick={(e) => { e.stopPropagation(); t.options.button!.onClick(); }}>{t.options.button.title}</button>
-          )}
-          <button className="sileo-toast-close" onClick={() => handleDismiss(t.id)}>×</button>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default Toaster;

package/src/react/index.ts

@@ -1,13 +0,0 @@
-export { notify, sileo } from '../core/index';
-export { Toaster } from './Toaster';
-
-import { notify as coreNotify, sileo as coreSileo } from '../core/index';
-
-type ReactAPI = {
-	notify: typeof coreNotify;
-	sileo: typeof coreSileo;
-	Toaster?: any;
-};
-
-const defaultExport: ReactAPI = { notify: coreNotify, sileo: coreSileo };
-export default defaultExport;

package/src/styles/sileo.css

@@ -1,49 +0,0 @@
-: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/src/svelte/Toaster.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { toasts, initSileoStore } from './store';
-  import type { ToastItem } from '../core/index';
-  import { sileo } from '../core/index';
-  import { animate } from 'motion';
-
-  let unsubscribe: () => void;
-  let items: ToastItem[] = [];
-
-  onMount(() => {
-    // subscribe local items to avoid $store auto-subscription issues
-    unsubscribe = toasts.subscribe((v) => (items = v));
-    // also initialize sileo store subscription helper if present
-    try {
-      initSileoStore();
-    } catch (e) {
-      // no-op
-    }
-  });
-
-  onDestroy(() => { unsubscribe && unsubscribe(); });
-
-  export function animateIn(node: HTMLElement) {
-    try {
-      const a = animate(node, { opacity: [0, 1], transform: ['translateY(-8px)', 'translateY(0px)'] }, { duration: 0.2 });
-      return {
-        destroy() {
-          // no-op
-        }
-      };
-    } catch (e) {
-      return { destroy() {} };
-    }
-  }
-
-  async function handleDismiss(id: string, ev: Event) {
-    const btn = ev.currentTarget as HTMLElement | null;
-    const el = btn ? btn.closest('.sileo-toast') as HTMLElement | null : null;
-    if (el) {
-      try {
-        const a = animate(el, { opacity: [1, 0], transform: ['translateY(0px)', 'translateY(-8px)'] }, { duration: 0.15 });
-        await (a as any).finished;
-      } catch (e) { /* ignore */ }
-    }
-    sileo.dismiss(id);
-  }
-</script>
-
-<style>
-  /* rely on global sileo styles */
-</style>
-
-{#if items && items.length}
-  {#each items as t (t.id)}
-    <div class="sileo-toast" data-type={t.options.type} data-id={t.id} use:animateIn>
-      <div style="flex:1">
-        <div class="sileo-toast-header">{t.options.title}</div>
-        {#if t.options.description}
-          <div class="sileo-toast-desc">{t.options.description}</div>
-        {/if}
-      </div>
-      {#if t.options.button}
-        <button class="sileo-toast-btn" on:click|stopPropagation={(e) => { t.options.button && typeof t.options.button.onClick === 'function' ? t.options.button.onClick() : undefined; handleDismiss(t.id, e); }}>{t.options.button.title}</button>
-      {/if}
-      <button class="sileo-toast-close" on:click={(e) => handleDismiss(t.id, e)}>×</button>
-    </div>
-  {/each}
-{/if}

package/src/svelte/store.ts

@@ -1,9 +0,0 @@
-import { writable } from 'svelte/store';
-import { sileo, ToastItem } from '../core/index';
-
-export const toasts = writable<ToastItem[]>([]);
-
-export function initSileoStore() {
-  const unsub = sileo.subscribe((items: ToastItem[]) => toasts.set(items));
-  return unsub;
-}

package/src/vanilla/index.ts

@@ -1,22 +0,0 @@
-import { notify as coreNotify, sileo as coreSileo } from '../core/index';
-import { initToasters, POSITIONS } from './toasterManager';
-
-export { initToasters, POSITIONS };
-
-// convenience: keep the previous shape where `notify` was the quick-show function
-export const notify = coreNotify.show.bind(coreNotify);
-
-type VanillaAPI = {
-	sileo: typeof coreSileo;
-	initToasters: typeof initToasters;
-	notify: typeof notify;
-	// keep full controller available under `controller` for advanced use
-	controller?: typeof coreNotify;
-	notifications?: any;
-};
-
-const defaultExport: VanillaAPI = { sileo: coreSileo, initToasters, notify, controller: coreNotify };
-// backward compatibility: expose `notifications` key pointing to the same API object
-(defaultExport as any).notifications = defaultExport;
-
-export default defaultExport;