perfect-toast 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Michael Kirsanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# Perfect Toast
+
+A Perfect Dark-inspired toast notification library with directional gradient sweep animations.
+
+## Features
+
+- Directional color gradient reveal animation (like Perfect Dark's HUD)
+- 9-point positioning grid
+- 4 built-in color themes + custom hex support
+- Light/dark mode support
+- Pause on hover, click to dismiss
+- TypeScript support
+- Zero dependencies, ~3KB gzipped
+
+## Installation
+
+```bash
+npm install perfect-toast
+```
+
+```bash
+yarn add perfect-toast
+```
+
+```bash
+pnpm add perfect-toast
+```
+
+## Quick Start
+
+```typescript
+import { toast } from 'perfect-toast';
+
+// Simple toast
+toast('Objective complete.');
+
+// Themed shortcuts
+toast.success('Mission complete.');
+toast.info('New intel received.');
+toast.error('Connection lost.');
+toast.warning('Low ammunition.');
+```
+
+## API
+
+### `toast(message, options?)`
+
+Show a toast notification.
+
+```typescript
+const id = toast('Hello world', {
+  theme: 'green',
+  position: 'bottom-left',
+  direction: 'left',
+  duration: 4000,
+});
+```
+
+### Themed Shortcuts
+
+```typescript
+toast.success(message, options?)  // green theme
+toast.info(message, options?)     // cyan theme
+toast.error(message, options?)    // red theme
+toast.warning(message, options?)  // amber theme
+```
+
+### Management
+
+```typescript
+toast.dismiss(id)      // Dismiss specific toast
+toast.dismissAll()     // Dismiss all toasts
+toast.update(id, { message: 'Updated!' })  // Update toast message
+```
+
+### Configuration
+
+Set global defaults:
+
+```typescript
+toast.configure({
+  position: 'bottom-left',
+  theme: 'green',
+  duration: 4000,
+  direction: 'left',
+  mode: 'auto',
+});
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `theme` | `'green' \| 'cyan' \| 'red' \| 'amber' \| string` | `'green'` | Color theme or custom hex |
+| `position` | `Position` | `'bottom-left'` | Screen position (9-point grid) |
+| `mode` | `'dark' \| 'light' \| 'auto'` | `'auto'` | Background mode |
+| `direction` | `'left' \| 'right' \| 'up' \| 'down'` | `'left'` | Animation sweep direction |
+| `duration` | `number` | `4000` | Auto-dismiss time in ms (0 = persistent) |
+| `animationSpeed` | `number` | `400` | Reveal animation duration in ms |
+| `dismissible` | `boolean` | `true` | Click to dismiss |
+| `pauseOnHover` | `boolean` | `true` | Pause timer on hover |
+| `onShow` | `() => void` | - | Callback when toast appears |
+| `onDismiss` | `() => void` | - | Callback when toast is dismissed |
+
+## Positions
+
+9-point positioning grid:
+
+```
+top-left      top-center      top-right
+middle-left   middle-center   middle-right
+bottom-left   bottom-center   bottom-right
+```
+
+## Global Config Options
+
+Additional options available via `toast.configure()`:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `fontFamily` | `string` | `'Courier New', Consolas, monospace` | Toast font |
+| `fontSize` | `number` | `14` | Font size in pixels |
+| `margin` | `number` | `16` | Margin from screen edges |
+| `gap` | `number` | `6` | Gap between stacked toasts |
+| `maxVisible` | `number` | `5` | Max visible toasts (0 = unlimited) |
+
+## Color Themes
+
+| Theme | Color | Use Case |
+|-------|-------|----------|
+| `green` | `#00ff00` | Success, confirmations |
+| `cyan` | `#00ccff` | Info, neutral messages |
+| `red` | `#ff3333` | Errors, warnings |
+| `amber` | `#ffcc00` | Cautions, alerts |
+
+Custom hex colors are also supported:
+
+```typescript
+toast('Custom color!', { theme: '#ff00ff' });
+```
+
+## Browser Support
+
+- Chrome 85+
+- Firefox 75+
+- Safari 15.4+
+- Edge 85+
+
+Requires CSS `@property` support for smooth gradient animations.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { toast } from './toast';
+export type { ToastOptions, ToastConfig, Position, Direction, Theme, Mode, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GACL,MAAM,SAAS,CAAC"}

package/dist/perfect-toast.js

@@ -0,0 +1,366 @@
+const f = {
+  green: { primary: "#00ff00", glow: "rgba(0, 255, 0, 0.5)" },
+  cyan: { primary: "#00ccff", glow: "rgba(0, 204, 255, 0.5)" },
+  red: { primary: "#ff3333", glow: "rgba(255, 51, 51, 0.5)" },
+  amber: { primary: "#ffcc00", glow: "rgba(255, 204, 0, 0.5)" }
+}, b = {
+  dark: {
+    background: "rgba(0, 0, 0, 0.85)",
+    unfadedText: "transparent",
+    // Invisible until revealed
+    highlight: "#ffffff"
+    // White leading edge in dark mode
+  },
+  light: {
+    background: "rgba(255, 255, 255, 0.92)",
+    unfadedText: "transparent",
+    // Invisible until revealed
+    highlight: "#000000"
+    // Black leading edge in light mode
+  }
+};
+function y(e) {
+  return f[e] ? f[e] : {
+    primary: e,
+    glow: `${e}80`
+    // 50% opacity
+  };
+}
+function x(e, t) {
+  const r = {
+    position: "fixed"
+  };
+  return e.startsWith("top") ? r.top = `${t}px` : e.startsWith("middle") ? (r.top = "50%", r.transform = "translateY(-50%)") : r.bottom = `${t}px`, e.endsWith("left") ? r.left = `${t}px` : e.endsWith("center") ? (r.left = "50%", r.transform ? r.transform = "translate(-50%, -50%)" : r.transform = "translateX(-50%)") : r.right = `${t}px`, r;
+}
+function w(e) {
+  switch (e) {
+    case "left":
+      return 90;
+    // left to right
+    case "right":
+      return 270;
+    // right to left
+    case "up":
+      return 0;
+    // bottom to top
+    case "down":
+      return 180;
+  }
+}
+let u = !1;
+function k() {
+  if (u || typeof document > "u") return;
+  const e = document.createElement("style");
+  e.id = "perfect-toast-styles", e.textContent = `
+    .pt-container {
+      position: fixed;
+      z-index: 9999;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .pt-container--top-left,
+    .pt-container--bottom-left,
+    .pt-container--middle-left {
+      align-items: flex-start;
+    }
+
+    .pt-container--top-center,
+    .pt-container--bottom-center,
+    .pt-container--middle-center {
+      align-items: center;
+    }
+
+    .pt-container--top-right,
+    .pt-container--bottom-right,
+    .pt-container--middle-right {
+      align-items: flex-end;
+    }
+
+    .pt-container--top-left,
+    .pt-container--top-center,
+    .pt-container--top-right {
+      flex-direction: column;
+    }
+
+    .pt-container--bottom-left,
+    .pt-container--bottom-center,
+    .pt-container--bottom-right {
+      flex-direction: column-reverse;
+    }
+
+    .pt-toast {
+      pointer-events: auto;
+      font-family: var(--pt-font-family, 'Courier New', Consolas, monospace);
+      font-size: var(--pt-font-size, 14px);
+      padding: 4px 8px;
+      margin: var(--pt-gap, 6px) 0;
+      background: var(--pt-bg);
+      border: 1px solid transparent;
+      position: relative;
+      max-width: 400px;
+      width: fit-content;
+      box-sizing: border-box;
+      /* Mask controls overall visibility - 40% gradient leading edge */
+      -webkit-mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        black calc(var(--pt-reveal, 0%) - 40%),
+        white var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      );
+      mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        black calc(var(--pt-reveal, 0%) - 40%),
+        white var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      );
+    }
+
+    /* Border with 40% gradient to bright edge */
+    .pt-toast::before {
+      content: '';
+      position: absolute;
+      inset: -1px;
+      pointer-events: none;
+      /* Set border properties individually - shorthand resets border-image */
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      border-image: linear-gradient(
+        var(--pt-gradient-angle),
+        var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
+        var(--pt-highlight) var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      ) 1;
+    }
+
+    .pt-toast--dismissible {
+      cursor: pointer;
+    }
+
+    /* Text with 40% gradient to bright edge */
+    .pt-toast__text {
+      background: linear-gradient(
+        var(--pt-gradient-angle),
+        var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
+        var(--pt-highlight) var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      line-height: 1.3;
+    }
+
+    /* Enter animation - everything reveals together via --pt-reveal */
+    .pt-toast--entering {
+      animation: pt-reveal var(--pt-animation-speed, 400ms) ease-out forwards;
+    }
+
+    /* Visible state - keep gradient structure but fully revealed (no style switch = no brightness pop) */
+    .pt-toast--visible {
+      --pt-reveal: 150%;
+    }
+
+    /* Exit animation - clean sweep to transparent (no bright edge) */
+    .pt-toast--exiting {
+      animation: pt-fade-out var(--pt-animation-speed, 400ms) ease-in forwards;
+      /* Mask: transparent sweeps left-to-right, no bright edge */
+      -webkit-mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        black calc(var(--pt-reveal, 0%) + 40%)
+      );
+      mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        black calc(var(--pt-reveal, 0%) + 40%)
+      );
+    }
+
+    .pt-toast--exiting::before {
+      /* Must set border properties individually - shorthand resets border-image */
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      border-image: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
+      ) 1;
+    }
+
+    .pt-toast--exiting .pt-toast__text {
+      background: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    @keyframes pt-reveal {
+      from { --pt-reveal: -40%; }
+      to { --pt-reveal: 105%; }
+    }
+
+    @keyframes pt-fade-out {
+      from { --pt-reveal: -40%; }
+      to { --pt-reveal: 105%; }
+    }
+
+    /* Register custom properties for animation */
+    @property --pt-reveal {
+      syntax: '<percentage>';
+      inherits: true;
+      initial-value: -40%;
+    }
+
+    @property --pt-highlight {
+      syntax: '<color>';
+      inherits: true;
+      initial-value: white;
+    }
+  `, document.head.appendChild(e), u = !0;
+}
+const C = {
+  theme: "green",
+  position: "bottom-left",
+  mode: "auto",
+  direction: "left",
+  duration: 4e3,
+  animationSpeed: 400,
+  dismissible: !0,
+  pauseOnHover: !0,
+  onShow: () => {
+  },
+  onDismiss: () => {
+  },
+  fontFamily: "'Courier New', Consolas, monospace",
+  // Can set to '"Press Start 2P"' for pixel font
+  fontSize: 14,
+  margin: 16,
+  gap: 6,
+  maxVisible: 5
+};
+let o = { ...C };
+const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
+let T = 0;
+function S() {
+  return `pt-${++T}-${Date.now()}`;
+}
+function E() {
+  return typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function I(e) {
+  return e === "auto" ? E() : e;
+}
+function $(e) {
+  if (d.has(e))
+    return d.get(e);
+  const t = document.createElement("div");
+  t.className = `pt-container pt-container--${e}`;
+  const r = x(e, o.margin);
+  return Object.assign(t.style, r), e.startsWith("middle") && (t.style.alignItems = e.endsWith("left") ? "flex-start" : e.endsWith("right") ? "flex-end" : "center"), document.body.appendChild(t), d.set(e, t), t;
+}
+function L(e) {
+  const { message: t, options: r } = e, a = y(r.theme), i = b[I(r.mode)], p = w(r.direction), n = document.createElement("div");
+  n.className = "pt-toast pt-toast--entering", r.dismissible && n.classList.add("pt-toast--dismissible"), n.style.setProperty("--pt-color", a.primary), n.style.setProperty("--pt-glow", a.glow), n.style.setProperty("--pt-highlight", i.highlight), n.style.setProperty("--pt-bg", i.background), n.style.setProperty("--pt-gradient-angle", `${p}deg`), n.style.setProperty("--pt-animation-speed", `${r.animationSpeed}ms`), n.style.setProperty("--pt-font-family", o.fontFamily), n.style.setProperty("--pt-font-size", `${o.fontSize}px`), n.style.setProperty("--pt-gap", `${o.gap}px`);
+  const l = document.createElement("span");
+  return l.className = "pt-toast__text", l.textContent = t, n.appendChild(l), r.dismissible && n.addEventListener("click", () => g(e.id)), r.pauseOnHover && (n.addEventListener("mouseenter", () => M(e.id)), n.addEventListener("mouseleave", () => O(e.id))), n;
+}
+function h(e) {
+  e.options.duration <= 0 || (e.timeoutId = window.setTimeout(() => {
+    g(e.id);
+  }, e.remainingTime));
+}
+function M(e) {
+  const t = s.get(e);
+  !t || t.phase !== "visible" || !t.timeoutId || (window.clearTimeout(t.timeoutId), t.pausedAt = Date.now(), t.timeoutId = null);
+}
+function O(e) {
+  const t = s.get(e);
+  if (!t || t.phase !== "visible" || !t.pausedAt) return;
+  const r = Date.now() - (t.options.duration - t.remainingTime);
+  t.remainingTime = Math.max(0, t.options.duration - r), t.pausedAt = null, h(t);
+}
+function c(e, t) {
+  k();
+  const r = S(), a = {
+    ...o,
+    ...t
+  }, i = {
+    id: r,
+    message: e,
+    options: a,
+    element: null,
+    timeoutId: null,
+    phase: "entering",
+    pausedAt: null,
+    remainingTime: a.duration
+  };
+  if (o.maxVisible > 0) {
+    const l = Array.from(s.values()).filter(
+      (m) => m.phase !== "exiting" && m.phase !== "removed"
+    );
+    if (l.length >= o.maxVisible) {
+      const m = l[0];
+      g(m.id);
+    }
+  }
+  s.set(r, i);
+  const p = $(a.position), n = L(i);
+  return i.element = n, a.position.startsWith("bottom") ? p.insertBefore(n, p.firstChild) : p.appendChild(n), setTimeout(() => {
+    i.phase === "entering" && (i.phase = "visible", n.classList.remove("pt-toast--entering"), n.classList.add("pt-toast--visible"), i.options.onShow?.(), h(i));
+  }, a.animationSpeed), r;
+}
+function g(e) {
+  const t = s.get(e);
+  !t || t.phase === "exiting" || t.phase === "removed" || (t.phase = "exiting", t.timeoutId && (window.clearTimeout(t.timeoutId), t.timeoutId = null), t.element ? (t.element.style.setProperty("--pt-reveal", "-40%"), t.element.classList.remove("pt-toast--visible"), t.element.classList.add("pt-toast--exiting"), setTimeout(() => {
+    v(e);
+  }, t.options.animationSpeed)) : v(e));
+}
+function v(e) {
+  const t = s.get(e);
+  if (!t) return;
+  t.phase = "removed", t.element?.remove(), t.options.onDismiss?.(), s.delete(e);
+  const r = d.get(t.options.position);
+  r && r.children.length === 0 && (r.remove(), d.delete(t.options.position));
+}
+function P() {
+  for (const e of s.keys())
+    g(e);
+}
+function _(e, t) {
+  const r = s.get(e);
+  if (!(!r || !r.element) && t.message) {
+    r.message = t.message;
+    const a = r.element.querySelector(".pt-toast__text");
+    a && (a.textContent = t.message);
+  }
+}
+function A(e) {
+  o = { ...o, ...e };
+}
+function W() {
+  return { ...o };
+}
+const z = Object.assign(c, {
+  dismiss: g,
+  dismissAll: P,
+  update: _,
+  configure: A,
+  getConfig: W,
+  // Themed shortcuts
+  success: (e, t) => c(e, { ...t, theme: "green" }),
+  info: (e, t) => c(e, { ...t, theme: "cyan" }),
+  error: (e, t) => c(e, { ...t, theme: "red" }),
+  warning: (e, t) => c(e, { ...t, theme: "amber" })
+});
+export {
+  z as toast
+};

package/dist/perfect-toast.umd.cjs

@@ -0,0 +1,175 @@
+(function(l,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(l=typeof globalThis<"u"?globalThis:l||self,p(l.PerfectToast={}))})(this,(function(l){"use strict";const p={green:{primary:"#00ff00",glow:"rgba(0, 255, 0, 0.5)"},cyan:{primary:"#00ccff",glow:"rgba(0, 204, 255, 0.5)"},red:{primary:"#ff3333",glow:"rgba(255, 51, 51, 0.5)"},amber:{primary:"#ffcc00",glow:"rgba(255, 204, 0, 0.5)"}},y={dark:{background:"rgba(0, 0, 0, 0.85)",unfadedText:"transparent",highlight:"#ffffff"},light:{background:"rgba(255, 255, 255, 0.92)",unfadedText:"transparent",highlight:"#000000"}};function x(e){return p[e]?p[e]:{primary:e,glow:`${e}80`}}function w(e,t){const n={position:"fixed"};return e.startsWith("top")?n.top=`${t}px`:e.startsWith("middle")?(n.top="50%",n.transform="translateY(-50%)"):n.bottom=`${t}px`,e.endsWith("left")?n.left=`${t}px`:e.endsWith("center")?(n.left="50%",n.transform?n.transform="translate(-50%, -50%)":n.transform="translateX(-50%)"):n.right=`${t}px`,n}function k(e){switch(e){case"left":return 90;case"right":return 270;case"up":return 0;case"down":return 180}}let v=!1;function T(){if(v||typeof document>"u")return;const e=document.createElement("style");e.id="perfect-toast-styles",e.textContent=`
+    .pt-container {
+      position: fixed;
+      z-index: 9999;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .pt-container--top-left,
+    .pt-container--bottom-left,
+    .pt-container--middle-left {
+      align-items: flex-start;
+    }
+
+    .pt-container--top-center,
+    .pt-container--bottom-center,
+    .pt-container--middle-center {
+      align-items: center;
+    }
+
+    .pt-container--top-right,
+    .pt-container--bottom-right,
+    .pt-container--middle-right {
+      align-items: flex-end;
+    }
+
+    .pt-container--top-left,
+    .pt-container--top-center,
+    .pt-container--top-right {
+      flex-direction: column;
+    }
+
+    .pt-container--bottom-left,
+    .pt-container--bottom-center,
+    .pt-container--bottom-right {
+      flex-direction: column-reverse;
+    }
+
+    .pt-toast {
+      pointer-events: auto;
+      font-family: var(--pt-font-family, 'Courier New', Consolas, monospace);
+      font-size: var(--pt-font-size, 14px);
+      padding: 4px 8px;
+      margin: var(--pt-gap, 6px) 0;
+      background: var(--pt-bg);
+      border: 1px solid transparent;
+      position: relative;
+      max-width: 400px;
+      width: fit-content;
+      box-sizing: border-box;
+      /* Mask controls overall visibility - 40% gradient leading edge */
+      -webkit-mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        black calc(var(--pt-reveal, 0%) - 40%),
+        white var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      );
+      mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        black calc(var(--pt-reveal, 0%) - 40%),
+        white var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      );
+    }
+
+    /* Border with 40% gradient to bright edge */
+    .pt-toast::before {
+      content: '';
+      position: absolute;
+      inset: -1px;
+      pointer-events: none;
+      /* Set border properties individually - shorthand resets border-image */
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      border-image: linear-gradient(
+        var(--pt-gradient-angle),
+        var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
+        var(--pt-highlight) var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      ) 1;
+    }
+
+    .pt-toast--dismissible {
+      cursor: pointer;
+    }
+
+    /* Text with 40% gradient to bright edge */
+    .pt-toast__text {
+      background: linear-gradient(
+        var(--pt-gradient-angle),
+        var(--pt-color) calc(var(--pt-reveal, 0%) - 40%),
+        var(--pt-highlight) var(--pt-reveal, 0%),
+        transparent calc(var(--pt-reveal, 0%) + 2%)
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      line-height: 1.3;
+    }
+
+    /* Enter animation - everything reveals together via --pt-reveal */
+    .pt-toast--entering {
+      animation: pt-reveal var(--pt-animation-speed, 400ms) ease-out forwards;
+    }
+
+    /* Visible state - keep gradient structure but fully revealed (no style switch = no brightness pop) */
+    .pt-toast--visible {
+      --pt-reveal: 150%;
+    }
+
+    /* Exit animation - clean sweep to transparent (no bright edge) */
+    .pt-toast--exiting {
+      animation: pt-fade-out var(--pt-animation-speed, 400ms) ease-in forwards;
+      /* Mask: transparent sweeps left-to-right, no bright edge */
+      -webkit-mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        black calc(var(--pt-reveal, 0%) + 40%)
+      );
+      mask-image: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        black calc(var(--pt-reveal, 0%) + 40%)
+      );
+    }
+
+    .pt-toast--exiting::before {
+      /* Must set border properties individually - shorthand resets border-image */
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      border-image: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
+      ) 1;
+    }
+
+    .pt-toast--exiting .pt-toast__text {
+      background: linear-gradient(
+        var(--pt-gradient-angle),
+        transparent calc(var(--pt-reveal, 0%) - 2%),
+        var(--pt-color) calc(var(--pt-reveal, 0%) + 40%)
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    @keyframes pt-reveal {
+      from { --pt-reveal: -40%; }
+      to { --pt-reveal: 105%; }
+    }
+
+    @keyframes pt-fade-out {
+      from { --pt-reveal: -40%; }
+      to { --pt-reveal: 105%; }
+    }
+
+    /* Register custom properties for animation */
+    @property --pt-reveal {
+      syntax: '<percentage>';
+      inherits: true;
+      initial-value: -40%;
+    }
+
+    @property --pt-highlight {
+      syntax: '<color>';
+      inherits: true;
+      initial-value: white;
+    }
+  `,document.head.appendChild(e),v=!0}let a={...{theme:"green",position:"bottom-left",mode:"auto",direction:"left",duration:4e3,animationSpeed:400,dismissible:!0,pauseOnHover:!0,onShow:()=>{},onDismiss:()=>{},fontFamily:"'Courier New', Consolas, monospace",fontSize:14,margin:16,gap:6,maxVisible:5}};const s=new Map,d=new Map;let C=0;function S(){return`pt-${++C}-${Date.now()}`}function E(){return typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function I(e){return e==="auto"?E():e}function O(e){if(d.has(e))return d.get(e);const t=document.createElement("div");t.className=`pt-container pt-container--${e}`;const n=w(e,a.margin);return Object.assign(t.style,n),e.startsWith("middle")&&(t.style.alignItems=e.endsWith("left")?"flex-start":e.endsWith("right")?"flex-end":"center"),document.body.appendChild(t),d.set(e,t),t}function P(e){const{message:t,options:n}=e,i=x(n.theme),o=y[I(n.mode)],f=k(n.direction),r=document.createElement("div");r.className="pt-toast pt-toast--entering",n.dismissible&&r.classList.add("pt-toast--dismissible"),r.style.setProperty("--pt-color",i.primary),r.style.setProperty("--pt-glow",i.glow),r.style.setProperty("--pt-highlight",o.highlight),r.style.setProperty("--pt-bg",o.background),r.style.setProperty("--pt-gradient-angle",`${f}deg`),r.style.setProperty("--pt-animation-speed",`${n.animationSpeed}ms`),r.style.setProperty("--pt-font-family",a.fontFamily),r.style.setProperty("--pt-font-size",`${a.fontSize}px`),r.style.setProperty("--pt-gap",`${a.gap}px`);const c=document.createElement("span");return c.className="pt-toast__text",c.textContent=t,r.appendChild(c),n.dismissible&&r.addEventListener("click",()=>m(e.id)),n.pauseOnHover&&(r.addEventListener("mouseenter",()=>L(e.id)),r.addEventListener("mouseleave",()=>M(e.id))),r}function h(e){e.options.duration<=0||(e.timeoutId=window.setTimeout(()=>{m(e.id)},e.remainingTime))}function L(e){const t=s.get(e);!t||t.phase!=="visible"||!t.timeoutId||(window.clearTimeout(t.timeoutId),t.pausedAt=Date.now(),t.timeoutId=null)}function M(e){const t=s.get(e);if(!t||t.phase!=="visible"||!t.pausedAt)return;const n=Date.now()-(t.options.duration-t.remainingTime);t.remainingTime=Math.max(0,t.options.duration-n),t.pausedAt=null,h(t)}function g(e,t){T();const n=S(),i={...a,...t},o={id:n,message:e,options:i,element:null,timeoutId:null,phase:"entering",pausedAt:null,remainingTime:i.duration};if(a.maxVisible>0){const c=Array.from(s.values()).filter(u=>u.phase!=="exiting"&&u.phase!=="removed");if(c.length>=a.maxVisible){const u=c[0];m(u.id)}}s.set(n,o);const f=O(i.position),r=P(o);return o.element=r,i.position.startsWith("bottom")?f.insertBefore(r,f.firstChild):f.appendChild(r),setTimeout(()=>{o.phase==="entering"&&(o.phase="visible",r.classList.remove("pt-toast--entering"),r.classList.add("pt-toast--visible"),o.options.onShow?.(),h(o))},i.animationSpeed),n}function m(e){const t=s.get(e);!t||t.phase==="exiting"||t.phase==="removed"||(t.phase="exiting",t.timeoutId&&(window.clearTimeout(t.timeoutId),t.timeoutId=null),t.element?(t.element.style.setProperty("--pt-reveal","-40%"),t.element.classList.remove("pt-toast--visible"),t.element.classList.add("pt-toast--exiting"),setTimeout(()=>{b(e)},t.options.animationSpeed)):b(e))}function b(e){const t=s.get(e);if(!t)return;t.phase="removed",t.element?.remove(),t.options.onDismiss?.(),s.delete(e);const n=d.get(t.options.position);n&&n.children.length===0&&(n.remove(),d.delete(t.options.position))}function _(){for(const e of s.keys())m(e)}function $(e,t){const n=s.get(e);if(!(!n||!n.element)&&t.message){n.message=t.message;const i=n.element.querySelector(".pt-toast__text");i&&(i.textContent=t.message)}}function A(e){a={...a,...e}}function D(){return{...a}}const W=Object.assign(g,{dismiss:m,dismissAll:_,update:$,configure:A,getConfig:D,success:(e,t)=>g(e,{...t,theme:"green"}),info:(e,t)=>g(e,{...t,theme:"cyan"}),error:(e,t)=>g(e,{...t,theme:"red"}),warning:(e,t)=>g(e,{...t,theme:"amber"})});l.toast=W,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/styles.d.ts

@@ -0,0 +1,23 @@
+import { Position, Direction, ModeColors, ThemeColors } from './types';
+/**
+ * Built-in theme colors
+ */
+export declare const THEME_COLORS: Record<string, ThemeColors>;
+/**
+ * Mode-specific colors
+ */
+export declare const MODE_COLORS: Record<'dark' | 'light', ModeColors>;
+/**
+ * Get theme colors - supports built-in themes and custom hex
+ */
+export declare function getThemeColors(theme: string): ThemeColors;
+/**
+ * Get position CSS properties
+ */
+export declare function getPositionStyles(position: Position, margin: number): Record<string, string>;
+/**
+ * Get gradient direction in degrees
+ */
+export declare function getGradientAngle(direction: Direction): number;
+export declare function injectStyles(): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAKpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,OAAO,EAAE,UAAU,CAW5D,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CASzD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8B5F;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAO7D;AAOD,wBAAgB,YAAY,IAAI,IAAI,CAsLnC"}

package/dist/toast.d.ts

@@ -0,0 +1,40 @@
+import { ToastOptions, ToastConfig } from './types';
+/**
+ * Show a toast
+ */
+declare function show(message: string, options?: ToastOptions): string;
+/**
+ * Dismiss a toast
+ */
+declare function dismiss(id: string): void;
+/**
+ * Dismiss all toasts
+ */
+declare function dismissAll(): void;
+/**
+ * Update toast message
+ */
+declare function update(id: string, updates: {
+    message?: string;
+}): void;
+/**
+ * Configure global defaults
+ */
+declare function configure(newConfig: Partial<ToastConfig>): void;
+/**
+ * Get current configuration
+ */
+declare function getConfig(): Readonly<Required<ToastConfig>>;
+export declare const toast: typeof show & {
+    dismiss: typeof dismiss;
+    dismissAll: typeof dismissAll;
+    update: typeof update;
+    configure: typeof configure;
+    getConfig: typeof getConfig;
+    success: (message: string, options?: Omit<ToastOptions, "theme">) => string;
+    info: (message: string, options?: Omit<ToastOptions, "theme">) => string;
+    error: (message: string, options?: Omit<ToastOptions, "theme">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "theme">) => string;
+};
+export {};
+//# sourceMappingURL=toast.d.ts.map

package/dist/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EAIZ,MAAM,SAAS,CAAC;AAkKjB;;GAEG;AACH,iBAAS,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAyD7D;AAED;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAyBjC;AAsBD;;GAEG;AACH,iBAAS,UAAU,IAAI,IAAI,CAI1B;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAW/D;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAExD;AAED;;GAEG;AACH,iBAAS,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAEpD;AAGD,eAAO,MAAM,KAAK;;;;;;uBAQG,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;oBAGhD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;qBAG5C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;uBAG3C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;CAEhE,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * 9-point grid positioning for toasts
+ */
+export type Position = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * Direction for the sweep animation
+ */
+export type Direction = 'left' | 'right' | 'up' | 'down';
+/**
+ * Built-in color themes
+ */
+export type Theme = 'green' | 'cyan' | 'red' | 'amber';
+/**
+ * Light/dark mode setting
+ */
+export type Mode = 'dark' | 'light' | 'auto';
+/**
+ * Options for individual toasts
+ */
+export interface ToastOptions {
+    /** Color theme - built-in name or custom hex color */
+    theme?: Theme | string;
+    /** Position on screen */
+    position?: Position;
+    /** Light/dark mode */
+    mode?: Mode;
+    /** Direction of the sweep animation */
+    direction?: Direction;
+    /** Duration in ms before auto-dismiss (0 = persistent) */
+    duration?: number;
+    /** Duration of the reveal animation in ms */
+    animationSpeed?: number;
+    /** Allow click to dismiss */
+    dismissible?: boolean;
+    /** Pause timer on hover */
+    pauseOnHover?: boolean;
+    /** Callback when toast appears */
+    onShow?: () => void;
+    /** Callback when toast is dismissed */
+    onDismiss?: () => void;
+}
+/**
+ * Global configuration options
+ */
+export interface ToastConfig extends ToastOptions {
+    /** Font family for toast text */
+    fontFamily?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Margin from screen edges in pixels */
+    margin?: number;
+    /** Gap between stacked toasts in pixels */
+    gap?: number;
+    /** Maximum number of visible toasts (0 = unlimited) */
+    maxVisible?: number;
+}
+/**
+ * Internal toast state
+ */
+export interface ToastState {
+    id: string;
+    message: string;
+    options: Required<ToastOptions>;
+    element: HTMLElement | null;
+    timeoutId: number | null;
+    phase: 'entering' | 'visible' | 'exiting' | 'removed';
+    pausedAt: number | null;
+    remainingTime: number;
+}
+/**
+ * Theme color definitions
+ */
+export interface ThemeColors {
+    primary: string;
+    glow: string;
+}
+/**
+ * Resolved mode colors for rendering
+ */
+export interface ModeColors {
+    background: string;
+    unfadedText: string;
+    highlight: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAChC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "perfect-toast",
+  "version": "0.1.0",
+  "description": "A Perfect Dark-inspired toast notification library with directional fade animations",
+  "type": "module",
+  "main": "./dist/perfect-toast.umd.cjs",
+  "module": "./dist/perfect-toast.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/perfect-toast.js",
+      "require": "./dist/perfect-toast.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "toast",
+    "notification",
+    "perfect-dark",
+    "animation",
+    "vanilla-js"
+  ],
+  "author": "Michael Kirsanov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lofimichael/perfect-toast.git"
+  },
+  "homepage": "https://github.com/lofimichael/perfect-toast#readme",
+  "bugs": {
+    "url": "https://github.com/lofimichael/perfect-toast/issues"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}