react-snackbar-glass 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,39 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-10-28
+
+### Added
+
+- `compact` snackbars: single-line pill, no title or countdown hairline.
+  Available per toast (`compact: true`), on the provider
+  (`<SnackbarProvider compact />`) and in the store config.
+- Minimize API: `toast.minimize()`, `toast.expand()`, `toast.isMinimized()`
+  (also on `useSnackbar()`), collapsing the whole stack into one summary pill
+  that expands on click.
+- `minimizedLabel` host prop to customise the collapsed pill text.
+
+### Changed
+
+- Demo homepage now defaults to the light theme.
+
+## [1.1.0] - 2026-10-28
+
+### Added
+
+- Global `toast` API: callable (`toast('Saved')`), option objects
+  (`toast({ message, variant })`), every variant preset, plus `show`,
+  `update`, `dismiss`, `dismissAll`, `promise` and a `store` accessor.
+- `getDefaultStore()` / `setDefaultStore()` to share or swap the store behind
+  the global API.
+- `<SnackbarProvider>` now renders the shared default store when no `store`
+  prop is given, so `toast` works with zero wiring.
+
+### Changed
+
+- Copy and docs rebranded from "premium" to "glass".
+- Added `repository`, `homepage` and `bugs` metadata.
+
 ## [1.0.0] - 2026-10-28
 
 ### Added

package/README.md

@@ -1,12 +1,14 @@
 # react-snackbar-glass
 
-A premium, glassmorphic snackbar system for React — queueing, promise-aware
+A glassmorphic snackbar system for React — queueing, promise-aware
 states, swipe-to-dismiss and token-driven theming with **zero runtime
 dependencies**.
 
 - 🪟 **Glass or solid** surfaces, `xs` → `lg` sizes, six screen corners
+- 🌍 **Global `toast`** — call it from anywhere, no hook required
 - ⏳ **Promise aware** — one call moves a snackbar through loading → success → error
 - 👆 **Swipe to dismiss**, hover/focus/document-hidden pause, countdown hairline
+- 📦 **Compact + minimize** — one-line pills, or collapse the whole stack
 - ♿ **Accessible** — polite/assertive live regions, keyboard reachable actions, `prefers-reduced-motion`
 - 🧩 **Typed** — written in TypeScript, ships ESM + CJS + `.d.ts`
 - 🪶 **Tiny** — React is the only peer dependency
@@ -63,6 +65,35 @@ function Dashboard() {
 | `promise(promise, messages, options?)` | Drive a single snackbar through loading, success and error. |
 | `store` | Escape hatch: the underlying store for subscriptions and advanced updates. |
 
+### `toast` — global API
+
+Import `toast` when you are outside a component: data layers, event
+emitters, API clients, `setTimeout` callbacks. It targets the same store
+that `<SnackbarProvider>` renders, so no hook is needed.
+
+```ts
+import { toast } from 'react-snackbar-glass';
+
+toast('Draft saved');
+toast.success('Deployment complete.', { title: 'v1.4.0 is live' });
+toast.error('Payment declined', { action: { label: 'Retry', onClick: retry } });
+```
+
+It mirrors `useSnackbar()` one-to-one — `show`, `update`, `dismiss`,
+`dismissAll`, every variant preset, `promise`, and `store`:
+
+```ts
+const id = toast.loading('Saving…');
+await save();
+toast.update(id, { variant: 'success', message: 'Saved', duration: 3000 });
+```
+
+`<SnackbarProvider>` renders the shared store by default. Mount
+`<SnackbarHost store={getDefaultStore()} />` if you need the host without a
+provider, and `setDefaultStore(store)` to point `toast` at a store of your
+own (handy in tests or multi-app setups). On the server, pass an explicit
+`store` so requests stay isolated.
+
 ### Promise-aware flows
 
 ```tsx
@@ -130,6 +161,8 @@ the snackbar only closes after the handler settles (`closeOnClick`, default
 | `maxVisible` | `number` | `3` | Simultaneously visible cards per corner. |
 | `dismissible` | `boolean` | `true` | Show the close button. |
 | `progress` | `boolean` | `true` | Show the countdown hairline. |
+| `compact` | `boolean` | `false` | Single-line pill for every snackbar. |
+| `minimizedLabel` | `(count: number) => ReactNode` | `"3 notifications"` | Text on the collapsed pill. |
 | `pauseOnHover` | `boolean` | `true` | Freeze the timer while hovered. |
 | `pauseOnFocus` | `boolean` | `true` | Freeze the timer while focus is inside. |
 | `pauseOnDocumentHidden` | `boolean` | `true` | Pause when the tab is hidden. |
@@ -145,12 +178,39 @@ the snackbar only closes after the handler settles (`closeOnClick`, default
 ## `SnackbarOptions`
 
 `id`, `title`, `message`, `variant`, `duration`, `position`, `icon`,
-`action`, `dismissible`, `progress`, `tone`, `size`, `className`, `style`,
-`onOpen`, `onClose`.
+`action`, `dismissible`, `progress`, `compact`, `tone`, `size`, `className`,
+`style`, `onOpen`, `onClose`.
 
 Reusing an `id` updates (or revives) the existing snackbar instead of stacking
 a duplicate — ideal for progress-style flows.
 
+## Compact and minimized stacks
+
+Two ways to reclaim screen space when snackbars would otherwise pile up.
+
+**Compact** — a single-line pill per snackbar (no title, no hairline):
+
+```ts
+toast.success('Draft saved', { compact: true });
+snackbar.show({ message: 'Synced', compact: true });
+```
+
+Set it once for every snackbar with `<SnackbarProvider compact />` or
+`createSnackbarStore({ compact: true })`.
+
+**Minimized** — collapse the whole stack into one summary pill
+(`"3 notifications"`) that expands on click:
+
+```ts
+toast.minimize();   // stack → one pill
+toast.expand();     // back to full cards
+toast.isMinimized(); // boolean
+```
+
+`useSnackbar()` exposes the same three methods, and the store has
+`setMinimized(true | false)` + `getMinimized()`. Customize the pill text with
+`minimizedLabel={(count) => `${count} neue Meldungen`}`.
+
 ## Theming
 
 Colors, radii, blur and motion are CSS custom properties on `.prs-root`

package/dist/index.cjs

@@ -11,6 +11,7 @@ var DEFAULT_CONFIG = {
   duration: 5e3,
   dismissible: true,
   progress: true,
+  compact: false,
   tone: "glass",
   size: "md",
   maxVisible: 3
@@ -50,6 +51,7 @@ function createSnackbarStore(initialConfig = {}) {
     } : null,
     ...initialConfig.dismissible !== void 0 ? { dismissible: initialConfig.dismissible } : null,
     ...initialConfig.progress !== void 0 ? { progress: initialConfig.progress } : null,
+    ...initialConfig.compact !== void 0 ? { compact: initialConfig.compact } : null,
     ...initialConfig.tone !== void 0 ? { tone: initialConfig.tone } : null,
     ...initialConfig.size !== void 0 ? { size: initialConfig.size } : null,
     ...initialConfig.maxVisible !== void 0 ? { maxVisible: Math.max(1, Math.floor(initialConfig.maxVisible)) } : null
@@ -60,6 +62,7 @@ function createSnackbarStore(initialConfig = {}) {
   const shown = /* @__PURE__ */ new Set();
   const pauseReasons = /* @__PURE__ */ new Map();
   let pageHidden = false;
+  let minimized = false;
   const emit = () => {
     for (const listener of listeners) listener();
   };
@@ -233,6 +236,7 @@ function createSnackbarStore(initialConfig = {}) {
       action: options.action ?? null,
       dismissible: options.dismissible ?? config.dismissible,
       progress: options.progress ?? config.progress,
+      compact: options.compact ?? config.compact,
       className: options.className,
       style: options.style,
       createdAt: Date.now(),
@@ -261,6 +265,7 @@ function createSnackbarStore(initialConfig = {}) {
       ...options.action !== void 0 ? { action: options.action } : null,
       ...options.dismissible !== void 0 ? { dismissible: options.dismissible } : null,
       ...options.progress !== void 0 ? { progress: options.progress } : null,
+      ...options.compact !== void 0 ? { compact: options.compact } : null,
       ...options.className !== void 0 ? { className: options.className } : null,
       ...options.style !== void 0 ? { style: options.style } : null,
       ...options.onOpen !== void 0 ? { onOpen: options.onOpen } : null,
@@ -318,6 +323,7 @@ function createSnackbarStore(initialConfig = {}) {
       } : null,
       ...patch.dismissible !== void 0 ? { dismissible: patch.dismissible } : null,
       ...patch.progress !== void 0 ? { progress: patch.progress } : null,
+      ...patch.compact !== void 0 ? { compact: patch.compact } : null,
       ...patch.tone !== void 0 ? { tone: patch.tone } : null,
       ...patch.size !== void 0 ? { size: patch.size } : null,
       ...patch.maxVisible !== void 0 ? { maxVisible: Math.max(1, Math.floor(patch.maxVisible)) } : null
@@ -372,9 +378,26 @@ function createSnackbarStore(initialConfig = {}) {
     resume,
     notifyShown,
     notifyExited,
-    setPageHidden
+    setPageHidden,
+    getMinimized: () => minimized,
+    getServerMinimized: () => false,
+    setMinimized(next) {
+      if (minimized === next) return;
+      minimized = next;
+      emit();
+    }
   };
 }
+
+// src/core/defaultStore.ts
+var defaultStore = null;
+function getDefaultStore() {
+  if (!defaultStore) defaultStore = createSnackbarStore();
+  return defaultStore;
+}
+function setDefaultStore(store) {
+  defaultStore = store;
+}
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -607,7 +630,7 @@ function SnackbarItem({
   };
   const resolvedIcon = record.icon === void 0 ? icons?.[variant] ?? defaultIcons[variant] : record.icon;
   const showIcon = record.icon !== false;
-  const showProgress = record.progress && Number.isFinite(duration) && duration > 0;
+  const showProgress = !record.compact && record.progress && Number.isFinite(duration) && duration > 0;
   const style = {
     ...record.style,
     "--prs-drag-x": `${dragX}px`,
@@ -627,6 +650,7 @@ function SnackbarItem({
       "data-dragging": dragging ? "true" : "false",
       "data-has-icon": showIcon ? "true" : "false",
       "data-dismissible": record.dismissible ? "true" : "false",
+      "data-compact": record.compact ? "true" : "false",
       "data-prs-id": record.id,
       "data-position": record.position,
       style,
@@ -726,6 +750,9 @@ var POSITIONS = [
   "bottom-center",
   "bottom-right"
 ];
+function defaultMinimizedLabel(count) {
+  return `${count} notification${count === 1 ? "" : "s"}`;
+}
 function SnackbarHost({
   store,
   maxVisible = 3,
@@ -743,6 +770,7 @@ function SnackbarHost({
   closeIcon,
   closeLabel = "Dismiss notification",
   regionLabel = "Notifications",
+  minimizedLabel = defaultMinimizedLabel,
   className,
   style,
   zIndex = 2147483e3,
@@ -753,6 +781,11 @@ function SnackbarHost({
     store.getSnapshot,
     store.getServerSnapshot
   );
+  const minimized = react.useSyncExternalStore(
+    store.subscribe,
+    store.getMinimized,
+    store.getServerMinimized
+  );
   const [portalNode, setPortalNode] = react.useState(null);
   const regionRefs = react.useRef(/* @__PURE__ */ new Map());
   const topsRef = react.useRef(/* @__PURE__ */ new Map());
@@ -816,6 +849,7 @@ function SnackbarHost({
     else byPosition.set(record.position, [record]);
   }
   const limit = Math.max(1, Math.floor(maxVisible));
+  const minimizedPosition = records[0]?.position ?? null;
   const rootStyle = {
     "--prs-width": `${width}px`,
     "--prs-offset": `${offset}px`,
@@ -834,6 +868,32 @@ function SnackbarHost({
         children: POSITIONS.map((position) => {
           const items = byPosition.get(position);
           if (!items || items.length === 0) return null;
+          if (minimized) {
+            if (position !== minimizedPosition) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "section",
+              {
+                className: "prs-region prs-region--minimized",
+                "data-position": position,
+                "aria-label": regionLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "prs-minimized",
+                    "data-count": items.length,
+                    onClick: () => store.setMinimized(false),
+                    title: "Expand notifications",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "prs-minimized__dot", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "prs-minimized__count", children: minimizedLabel(items.length) })
+                    ]
+                  }
+                )
+              },
+              position
+            );
+          }
           const visible = items.slice(0, limit);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "section",
@@ -877,20 +937,18 @@ function SnackbarProvider({
   duration,
   dismissible,
   progress,
+  compact,
   tone,
   size,
   maxVisible,
   ...hostProps
 }) {
   const store = react.useMemo(
-    () => providedStore ?? createSnackbarStore({
-      position,
-      duration,
-      dismissible,
-      progress,
-      tone,
-      size
-    }),
+    () => (
+      // Falling back to the shared default store is what makes the
+      // module-level `toast` API render without extra wiring.
+      providedStore ?? getDefaultStore()
+    ),
     // The store is intentionally created once per provider instance.
     // Subsequent config changes are pushed below.
     [providedStore]
@@ -901,31 +959,45 @@ function SnackbarProvider({
       duration,
       dismissible,
       progress,
+      compact,
       tone,
       size,
       maxVisible
     });
-  }, [store, position, duration, dismissible, progress, tone, size, maxVisible]);
+  }, [
+    store,
+    position,
+    duration,
+    dismissible,
+    progress,
+    compact,
+    tone,
+    size,
+    maxVisible
+  ]);
   const api = react.useMemo(() => {
-    const preset = (variant) => (message, options = {}) => store.show({ ...options, message, variant });
+    const preset2 = (variant) => (message, options = {}) => store.show({ ...options, message, variant });
     return {
       show: store.show,
       update: store.update,
       dismiss: store.dismiss,
       dismissAll: store.dismissAll,
       promise: store.promise,
-      success: preset("success"),
-      error: preset("error"),
-      warning: preset("warning"),
-      info: preset("info"),
-      neutral: preset("neutral"),
-      custom: preset("custom"),
+      success: preset2("success"),
+      error: preset2("error"),
+      warning: preset2("warning"),
+      info: preset2("info"),
+      neutral: preset2("neutral"),
+      custom: preset2("custom"),
       loading: (message, options = {}) => store.show({
         ...options,
         message,
         variant: "loading",
         duration: options.duration !== void 0 ? options.duration : null
       }),
+      minimize: () => store.setMinimized(true),
+      expand: () => store.setMinimized(false),
+      isMinimized: () => store.getMinimized(),
       store
     };
   }, [store]);
@@ -957,10 +1029,56 @@ function useSnackbar() {
 function useSnackbarStore() {
   return useSnackbarContext().store;
 }
+function isOptionsObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !react.isValidElement(value) && !("$$typeof" in value);
+}
+function preset(variant) {
+  return (message, options = {}) => getDefaultStore().show({ ...options, message, variant });
+}
+function createToast() {
+  const toast2 = ((content, options) => {
+    if (options === void 0 && isOptionsObject(content)) {
+      return getDefaultStore().show(content);
+    }
+    return getDefaultStore().show({
+      ...options,
+      message: content
+    });
+  });
+  toast2.show = (options) => getDefaultStore().show(options);
+  toast2.update = (id, options) => getDefaultStore().update(id, options);
+  toast2.dismiss = (id, reason) => getDefaultStore().dismiss(id, reason);
+  toast2.dismissAll = (reason) => getDefaultStore().dismissAll(reason);
+  toast2.success = preset("success");
+  toast2.error = preset("error");
+  toast2.warning = preset("warning");
+  toast2.info = preset("info");
+  toast2.neutral = preset("neutral");
+  toast2.custom = preset("custom");
+  toast2.loading = (message, options = {}) => getDefaultStore().show({
+    ...options,
+    message,
+    variant: "loading",
+    duration: options.duration !== void 0 ? options.duration : null
+  });
+  toast2.promise = (input, messages, options) => getDefaultStore().promise(input, messages, options);
+  toast2.minimize = () => getDefaultStore().setMinimized(true);
+  toast2.expand = () => getDefaultStore().setMinimized(false);
+  toast2.isMinimized = () => getDefaultStore().getMinimized();
+  Object.defineProperty(toast2, "store", {
+    get: getDefaultStore,
+    enumerable: true
+  });
+  return toast2;
+}
+var toast = createToast();
 
 exports.SnackbarHost = SnackbarHost;
 exports.SnackbarProvider = SnackbarProvider;
 exports.createSnackbarStore = createSnackbarStore;
+exports.getDefaultStore = getDefaultStore;
+exports.setDefaultStore = setDefaultStore;
+exports.toast = toast;
 exports.useSnackbar = useSnackbar;
 exports.useSnackbarStore = useSnackbarStore;
 //# sourceMappingURL=index.cjs.map