@samline/notify 0.1.0

package/src/react/Toaster.tsx

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

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

@@ -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/src/svelte/Toaster.svelte

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

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

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

package/src/vanilla/toasterManager.ts

@@ -0,0 +1,132 @@
+import { sileo, ToastItem } from '../core/index';
+import { animate } from 'motion';
+
+const POSITIONS = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right'
+] as const;
+
+export type Position = typeof POSITIONS[number];
+
+function createContainer(position: string, root: HTMLElement) {
+  const c = document.createElement('div');
+  c.className = 'sileo-toaster';
+  c.setAttribute('data-position', position);
+  c.setAttribute('role', 'status');
+  c.setAttribute('aria-live', 'polite');
+  return c;
+}
+
+function renderToast(item: ToastItem) {
+  const el = document.createElement('div');
+  el.className = 'sileo-toast';
+  el.dataset.id = item.id;
+  el.setAttribute('data-type', item.options.type || 'info');
+  el.style.opacity = '0';
+  el.style.transform = 'translateY(-6px)';
+
+  const body = document.createElement('div');
+  body.style.display = 'flex';
+  body.style.flexDirection = 'column';
+  body.style.flex = '1';
+
+  const header = document.createElement('div');
+  header.className = 'sileo-toast-header';
+  header.textContent = item.options.title || '';
+
+  body.appendChild(header);
+
+  if (item.options.description) {
+    const desc = document.createElement('div');
+    desc.className = 'sileo-toast-desc';
+    desc.textContent = item.options.description;
+    body.appendChild(desc);
+  }
+
+  el.appendChild(body);
+
+  if (item.options.button) {
+    const btn = document.createElement('button');
+    btn.className = 'sileo-toast-btn';
+    btn.textContent = item.options.button.title;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      try {
+        if (item.options.button && typeof item.options.button.onClick === 'function') {
+          item.options.button.onClick();
+        }
+      } catch (err) { console.error(err); }
+    });
+    el.appendChild(btn);
+  }
+
+  const close = document.createElement('button');
+  close.className = 'sileo-toast-close';
+  close.innerHTML = '×';
+  close.addEventListener('click', () => sileo.dismiss(item.id));
+  el.appendChild(close);
+
+  if (typeof item.options.duration === 'number') {
+    if (item.options.duration > 0) {
+      setTimeout(() => sileo.dismiss(item.id), item.options.duration);
+    }
+  }
+
+  return el;
+}
+
+export function initToasters(root: HTMLElement = document.body, positions: Position[] = ['top-right']) {
+  const containers: Record<string, HTMLElement> = {};
+
+  positions.forEach((pos) => {
+    const c = createContainer(pos, root);
+    root.appendChild(c);
+    containers[pos] = c;
+  });
+
+  function rerender(items: ToastItem[]) {
+    positions.forEach((pos) => {
+      const container = containers[pos];
+      const visible = items.filter((t) => (t.options.position || 'top-right') === pos);
+
+      // Diff existing children and animate out removed toasts
+      const visibleIds = new Set(visible.map((v) => v.id));
+      const existing = Array.from(container.children) as HTMLElement[];
+
+      existing.forEach((child) => {
+        const id = child.dataset.id;
+        if (!id || !visibleIds.has(id)) {
+          // animate out then remove
+          animate(child, { opacity: 0, y: -8 }, { duration: 0.18 }).finished.then(() => child.remove());
+        }
+      });
+
+      // Add new items
+      visible.forEach((t) => {
+        if (!container.querySelector(`[data-id="${t.id}"]`)) {
+          const node = renderToast(t);
+          container.appendChild(node);
+          // animate in
+          requestAnimationFrame(() => {
+            animate(node, { opacity: [0, 1], y: [-6, 0] }, { duration: 0.24 });
+          });
+        }
+      });
+    });
+  }
+
+  const unsub = sileo.subscribe(rerender);
+
+  return {
+    destroy() {
+      unsub();
+      Object.values(containers).forEach((c) => c.remove());
+    }
+  };
+}
+
+export { POSITIONS };

package/src/vue/index.ts

@@ -0,0 +1,61 @@
+import { App, defineComponent, h, onMounted, ref } from 'vue';
+import { notify, sileo } from '../core/index';
+import type { ToastItem } from '../core/index';
+import { animate } from 'motion';
+
+export const Toaster = defineComponent({
+  props: { position: { type: String, default: 'top-right' } },
+  setup(props) {
+    const toasts = ref<ToastItem[]>([]);
+    let unsub: (() => void) | null = null;
+    onMounted(() => {
+      unsub = sileo.subscribe((items) => { toasts.value = items.filter((t) => (t.options.position || 'top-right') === props.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 after render
+    const lastIds = ref<string[]>([]);
+    import('vue').then(({ nextTick }) => {
+      // watch toasts and animate new ones
+      const stop = (require('vue') as any).watch(toasts, async () => {
+        await nextTick();
+        const ids = toasts.value.map(t => t.id);
+        const added = ids.filter(id => !lastIds.value.includes(id));
+        added.forEach(id => {
+          const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement | null;
+          if (el) {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(-6px)';
+            try { animate(el, { opacity: [0,1], transform: ['translateY(-6px)','translateY(0px)'] }, { duration: 0.22 }); } catch (e) {}
+          }
+        });
+        lastIds.value = ids;
+      }, { deep: true });
+    }).catch(() => {});
+    return () => h('div', { class: 'sileo-toaster', 'data-position': props.position }, toasts.value.map((t) => h('div', { key: t.id, class: 'sileo-toast', 'data-type': t.options.type }, [
+      h('div', { style: { flex: '1' } }, [
+        h('div', { class: 'sileo-toast-header' }, t.options.title),
+        t.options.description ? h('div', { class: 'sileo-toast-desc' }, t.options.description) : null
+      ]),
+      t.options.button ? h('button', { class: 'sileo-toast-btn', onClick: (e: Event) => { e.stopPropagation(); t.options.button!.onClick(); handleDismiss(t.id); } }, t.options.button.title) : null,
+      h('button', { class: 'sileo-toast-close', onClick: () => handleDismiss(t.id) }, '×')
+    ])));
+  }
+});
+
+export default {
+  install(app: App) {
+    app.config.globalProperties.$sileo = sileo;
+    // expose notify as well on the app for convenience
+    (app.config.globalProperties as any).$notify = notify;
+    app.component('SileoToaster', Toaster as any);
+  }
+};

package/test/smoke/no-bundler.test.ts

@@ -0,0 +1,10 @@
+import { existsSync } from 'fs';
+import { describe, it, expect } from 'vitest';
+import { resolve } from 'path';
+
+describe('no-bundler UMD bundle', () => {
+  it('dist/notify.umd.js should exist', () => {
+    const p = resolve(__dirname, '../../dist/notify.umd.js');
+    expect(existsSync(p)).toBe(true);
+  });
+});

package/test/smoke/svelte.test.ts

@@ -0,0 +1,12 @@
+import { readFileSync, existsSync } from 'fs';
+import { describe, it, expect } from 'vitest';
+import { resolve } from 'path';
+
+describe('svelte toaster smoke', () => {
+  it('src/svelte/Toaster.svelte contains use:animateIn or motion import', () => {
+    const p = resolve(__dirname, '../../src/svelte/Toaster.svelte');
+    expect(existsSync(p)).toBe(true);
+    const txt = readFileSync(p, 'utf-8');
+    expect(/use:animateIn|from\s+['"]motion['"]/.test(txt)).toBe(true);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ESNext",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "Node",
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"]
+}