react-snackbar-glass 1.1.0 → 1.3.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.3.0] - 2026-10-28
+
+### Added
+
+- `layout` option: `'card' | 'compact' | 'inline'`, available per snackbar,
+  on `<SnackbarProvider layout="…">` and in the store config. `compact: true`
+  keeps working as sugar for `layout: 'compact'`.
+- `toast.single(message, options)` / `useSnackbar().single()`: message-only
+  status line with a hard one-line contract (ellipsis instead of wrapping),
+  no title, no hairline, and no close button while timed.
+- Animation presets: `animation`, `enterAnimation` and `exitAnimation`
+  (`'slide' | 'fade' | 'scale' | 'pop' | 'flip' | 'none'`).
+- `--prs-enter-duration` / `--prs-exit-duration` and `--prs-radius-inline`
+  CSS variables for pacing and shaping the new modes.
+- Demo: layout and motion selectors in the Studio panel, `toast.single()`
+  example, and position buttons now confirm with a single-line toast.
+
+## [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

package/README.md

@@ -8,6 +8,9 @@ dependencies**.
 - 🌍 **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
+- ✏️ **Single-line status** — `toast.single()` for instant, title-less feedback
+- 🎞️ **Pick your motion** — slide, fade, scale, pop, flip or none
 - ♿ **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
@@ -160,6 +163,11 @@ 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. |
+| `layout` | `'card' \| 'compact' \| 'inline'` | `'card'` | Default layout; `compact` is sugar for `'compact'`. |
+| `animation` | `'slide' \| 'fade' \| 'scale' \| 'pop' \| 'flip' \| 'none'` | `'slide'` | Enter + exit animation preset. |
+| `enterAnimation` / `exitAnimation` | same as `animation` | — | Override a single phase. |
+| `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. |
@@ -175,12 +183,82 @@ 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`,
+`action`, `dismissible`, `progress`, `compact`, `layout`, `animation`,
+`enterAnimation`, `exitAnimation`, `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.
 
+## Single-line status notices
+
+`toast.single()` is the "one line, no ceremony" preset: content width, a hard
+one-line contract (long text truncates with an ellipsis instead of wrapping),
+no title, no countdown hairline and no close button while it is timed.
+
+```ts
+toast.single('Position set to top-center', { variant: 'success' });
+toast.single('Could not reach the server', { variant: 'error', duration: 8000 });
+```
+
+It is `layout: 'inline'` under the hood, so every entry point can do the same:
+
+```ts
+snackbar.show({ message: 'Synced', layout: 'inline' });
+useSnackbar().single('Copied to clipboard');
+<SnackbarProvider layout="inline" />;
+```
+
+## Animations
+
+One preset drives both phases; `enterAnimation` / `exitAnimation` override a
+single phase:
+
+```ts
+toast.success('Saved', { animation: 'fade' });
+toast.error('Failed', { animation: 'scale', exitAnimation: 'none' });
+<SnackbarProvider animation="pop" />;
+```
+
+| Preset | Feel |
+| --- | --- |
+| `slide` | Spring slide from the nearest edge with a soft blur (default). |
+| `fade` | Pure opacity cross-fade. |
+| `scale` | Zoom from the center. |
+| `pop` | Bouncy overshoot. |
+| `flip` | 3D flip on the X axis. |
+| `none` | Instant, no motion. |
+
+Pace them with `--prs-enter-duration` / `--prs-exit-duration` (defaults
+`440ms` / `190ms`); `prefers-reduced-motion` still disables everything.
+
+## 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,10 @@ var DEFAULT_CONFIG = {
   duration: 5e3,
   dismissible: true,
   progress: true,
+  layout: "card",
+  animation: "slide",
+  enterAnimation: "slide",
+  exitAnimation: "slide",
   tone: "glass",
   size: "md",
   maxVisible: 3
@@ -38,28 +42,45 @@ function resolveContent(content, value) {
   const resolved = typeof content === "function" ? content(value) : content;
   return contentToOptions(resolved);
 }
-function createSnackbarStore(initialConfig = {}) {
-  let config = {
-    ...DEFAULT_CONFIG,
-    ...initialConfig.position !== void 0 ? { position: initialConfig.position } : null,
-    ...initialConfig.duration !== void 0 ? {
-      duration: normalizeDuration(
-        initialConfig.duration,
-        DEFAULT_CONFIG.duration
-      )
-    } : null,
-    ...initialConfig.dismissible !== void 0 ? { dismissible: initialConfig.dismissible } : null,
-    ...initialConfig.progress !== void 0 ? { progress: initialConfig.progress } : 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
+function resolveLayout(layout, compact, fallback) {
+  if (layout !== void 0) return layout;
+  if (compact !== void 0) return compact ? "compact" : "card";
+  return fallback;
+}
+function resolveLayoutPatch(record, options) {
+  if (options.layout === void 0 && options.compact === void 0) return {};
+  const layout = resolveLayout(options.layout, options.compact, record.layout);
+  return { layout, compact: layout === "compact" };
+}
+function mergeConfig(previous, patch) {
+  const layout = resolveLayout(patch.layout, patch.compact, previous.layout);
+  return {
+    position: patch.position ?? previous.position,
+    duration: patch.duration !== void 0 ? normalizeDuration(patch.duration, previous.duration) : previous.duration,
+    dismissible: patch.dismissible ?? previous.dismissible,
+    progress: patch.progress ?? previous.progress,
+    compact: layout === "compact",
+    layout,
+    animation: patch.animation ?? previous.animation,
+    enterAnimation: patch.enterAnimation ?? patch.animation ?? previous.enterAnimation,
+    exitAnimation: patch.exitAnimation ?? patch.animation ?? previous.exitAnimation,
+    tone: patch.tone ?? previous.tone,
+    size: patch.size ?? previous.size,
+    maxVisible: patch.maxVisible !== void 0 ? Math.max(1, Math.floor(patch.maxVisible)) : previous.maxVisible
   };
+}
+function createSnackbarStore(initialConfig = {}) {
+  let config = mergeConfig(
+    DEFAULT_CONFIG,
+    initialConfig
+  );
   let records = EMPTY;
   const listeners = /* @__PURE__ */ new Set();
   const timers = /* @__PURE__ */ new Map();
   const shown = /* @__PURE__ */ new Set();
   const pauseReasons = /* @__PURE__ */ new Map();
   let pageHidden = false;
+  let minimized = false;
   const emit = () => {
     for (const listener of listeners) listener();
   };
@@ -220,6 +241,7 @@ function createSnackbarStore(initialConfig = {}) {
       }
       return id;
     }
+    const layout = resolveLayout(options.layout, options.compact, config.layout);
     const record = {
       id,
       title: options.title,
@@ -233,6 +255,11 @@ function createSnackbarStore(initialConfig = {}) {
       action: options.action ?? null,
       dismissible: options.dismissible ?? config.dismissible,
       progress: options.progress ?? config.progress,
+      compact: layout === "compact",
+      layout,
+      animation: options.animation ?? config.animation,
+      enterAnimation: options.enterAnimation ?? options.animation ?? config.enterAnimation,
+      exitAnimation: options.exitAnimation ?? options.animation ?? config.exitAnimation,
       className: options.className,
       style: options.style,
       createdAt: Date.now(),
@@ -261,6 +288,14 @@ 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,
+      ...resolveLayoutPatch(record, options),
+      ...options.animation !== void 0 ? {
+        animation: options.animation,
+        enterAnimation: options.animation,
+        exitAnimation: options.animation
+      } : null,
+      ...options.enterAnimation !== void 0 ? { enterAnimation: options.enterAnimation } : null,
+      ...options.exitAnimation !== void 0 ? { exitAnimation: options.exitAnimation } : 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,
@@ -310,18 +345,7 @@ function createSnackbarStore(initialConfig = {}) {
     }
   };
   const setConfig = (patch) => {
-    config = {
-      ...config,
-      ...patch.position !== void 0 ? { position: patch.position } : null,
-      ...patch.duration !== void 0 ? {
-        duration: normalizeDuration(patch.duration, config.duration)
-      } : null,
-      ...patch.dismissible !== void 0 ? { dismissible: patch.dismissible } : null,
-      ...patch.progress !== void 0 ? { progress: patch.progress } : 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
-    };
+    config = mergeConfig(config, patch);
   };
   const promise = (input, messages, options = {}) => {
     const loadingOptions = contentToOptions(messages.loading ?? "Loading\u2026");
@@ -372,7 +396,14 @@ function createSnackbarStore(initialConfig = {}) {
     resume,
     notifyShown,
     notifyExited,
-    setPageHidden
+    setPageHidden,
+    getMinimized: () => minimized,
+    getServerMinimized: () => false,
+    setMinimized(next) {
+      if (minimized === next) return;
+      minimized = next;
+      emit();
+    }
   };
 }
 
@@ -617,7 +648,10 @@ 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 isInline = record.layout === "inline";
+  const isTimed = Number.isFinite(duration) && duration > 0;
+  const showProgress = record.layout === "card" && record.progress && isTimed;
+  const showClose = record.dismissible && (!isInline || !isTimed);
   const style = {
     ...record.style,
     "--prs-drag-x": `${dragX}px`,
@@ -637,6 +671,10 @@ 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-layout": record.layout,
+      "data-enter": record.enterAnimation,
+      "data-exit": record.exitAnimation,
       "data-prs-id": record.id,
       "data-position": record.position,
       style,
@@ -685,7 +723,7 @@ function SnackbarItem({
                 className: "prs-item__content",
                 "data-has-title": title !== void 0 && title !== null ? "true" : "false",
                 children: [
-                  title !== void 0 && title !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__title", children: title }) : null,
+                  title !== void 0 && title !== null && !isInline ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__title", children: title }) : null,
                   message !== void 0 && message !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__message", children: message }) : null,
                   action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__actions", children: /* @__PURE__ */ jsxRuntime.jsxs(
                     "button",
@@ -704,7 +742,7 @@ function SnackbarItem({
                 ]
               }
             ),
-            record.dismissible ? /* @__PURE__ */ jsxRuntime.jsx(
+            showClose ? /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
@@ -736,6 +774,9 @@ var POSITIONS = [
   "bottom-center",
   "bottom-right"
 ];
+function defaultMinimizedLabel(count) {
+  return `${count} notification${count === 1 ? "" : "s"}`;
+}
 function SnackbarHost({
   store,
   maxVisible = 3,
@@ -753,6 +794,7 @@ function SnackbarHost({
   closeIcon,
   closeLabel = "Dismiss notification",
   regionLabel = "Notifications",
+  minimizedLabel = defaultMinimizedLabel,
   className,
   style,
   zIndex = 2147483e3,
@@ -763,6 +805,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());
@@ -826,6 +873,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`,
@@ -844,6 +892,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",
@@ -887,6 +961,11 @@ function SnackbarProvider({
   duration,
   dismissible,
   progress,
+  compact,
+  layout,
+  animation,
+  enterAnimation,
+  exitAnimation,
   tone,
   size,
   maxVisible,
@@ -908,11 +987,30 @@ function SnackbarProvider({
       duration,
       dismissible,
       progress,
+      compact,
+      layout,
+      animation,
+      enterAnimation,
+      exitAnimation,
       tone,
       size,
       maxVisible
     });
-  }, [store, position, duration, dismissible, progress, tone, size, maxVisible]);
+  }, [
+    store,
+    position,
+    duration,
+    dismissible,
+    progress,
+    compact,
+    layout,
+    animation,
+    enterAnimation,
+    exitAnimation,
+    tone,
+    size,
+    maxVisible
+  ]);
   const api = react.useMemo(() => {
     const preset2 = (variant) => (message, options = {}) => store.show({ ...options, message, variant });
     return {
@@ -927,12 +1025,16 @@ function SnackbarProvider({
       info: preset2("info"),
       neutral: preset2("neutral"),
       custom: preset2("custom"),
+      single: (message, options = {}) => store.show({ ...options, message, layout: "inline" }),
       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]);
@@ -990,6 +1092,7 @@ function createToast() {
   toast2.info = preset("info");
   toast2.neutral = preset("neutral");
   toast2.custom = preset("custom");
+  toast2.single = (message, options = {}) => getDefaultStore().show({ ...options, message, layout: "inline" });
   toast2.loading = (message, options = {}) => getDefaultStore().show({
     ...options,
     message,
@@ -997,6 +1100,9 @@ function createToast() {
     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