react-snackbar-glass 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,46 @@ 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.4.0] - 2026-10-28
+
+### Added
+
+- Surface presets via `tone`: `paper` (opaque matte, light/dark aware),
+  `graphite` (dark charcoal in both themes) and `neon` (near-black with an
+  accent glow), next to the existing `glass` and `solid`. Per-snackbar, on the
+  provider and in store config; no new prop to learn.
+- Demo: the playground's tone switch is now a five-way surface picker with
+  swatches.
+
+### Changed
+
+- README is now a full API reference: layouts, surfaces, sizes, animations,
+  every `SnackbarOptions` field, close reasons, the store surface and the
+  theming tokens.
+
+### Fixed
+
+- Title-less cards no longer pin their message to the top edge: content is
+  centred against the icon when there is no title.
+
+## [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: replaced the showcase page with an API-first homepage — hero install
+  command, 3-step quickstart, live playground, method/option tables and theming
+  notes (`demo/src/ApiHome.tsx`).
+
 ## [1.2.0] - 2026-10-28
 
 ### Added

package/README.md

@@ -1,14 +1,16 @@
 # react-snackbar-glass
 
-A glassmorphic snackbar system for React — queueing, promise-aware
-states, swipe-to-dismiss and token-driven theming with **zero runtime
+Queueing, promise-aware snackbars for React — five ready-made surfaces, three
+densities, swipe-to-dismiss and token-driven theming with **zero runtime
 dependencies**.
 
-- 🪟 **Glass or solid** surfaces, `xs` → `lg` sizes, six screen corners
+- 🪟 **Five surfaces** — `glass`, `paper`, `solid`, `graphite`, `neon`
+- 📐 **Three layouts** — `card`, `compact`, `inline`; `toast.single()` for one-liners
 - 🌍 **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
+- 📦 **Compact + minimize** — one-line pills, or collapse the whole stack into one
+- 🎞️ **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
@@ -34,7 +36,7 @@ import 'react-snackbar-glass/styles.css';
 
 export default function App() {
   return (
-    <SnackbarProvider position="bottom-right" theme="auto">
+    <SnackbarProvider position="bottom-right" theme="auto" tone="glass">
       <Dashboard />
     </SnackbarProvider>
   );
@@ -51,25 +53,43 @@ function Dashboard() {
 }
 ```
 
+That is the whole setup: one provider, one stylesheet, one hook. Everything else
+below is optional.
+
 ## API
 
+Two entry points render the same store, so pick whichever fits the call site:
+
+| Import | Use it when |
+| --- | --- |
+| `useSnackbar()` | Inside a component — the idiomatic path. |
+| `toast` | Anywhere else: data layers, API clients, event handlers, `setTimeout`. |
+
 ### `useSnackbar()`
 
+```ts
+const snackbar = useSnackbar();
+```
+
 | Method | Description |
 | --- | --- |
 | `show(options)` | Queue a fully customised snackbar, returns its `id`. |
-| `update(id, options)` | Patch an existing snackbar in place; timers restart if `duration` changes. |
+| `update(id, options)` | Patch an existing snackbar in place; timers restart when `duration` changes. |
 | `dismiss(id?, reason?)` | Close one snackbar (or the oldest) and report a close reason. |
 | `dismissAll(reason?)` | Close every visible snackbar. |
 | `success / error / warning / info / neutral / loading / custom(message, options?)` | Variant presets. |
-| `promise(promise, messages, options?)` | Drive a single snackbar through loading, success and error. |
+| `single(message, options?)` | Message-only status line (`layout: 'inline'`). |
+| `promise(promise, messages, options?)` | Drive one snackbar through loading → success → error. |
+| `minimize()` / `expand()` / `isMinimized()` | Collapse the stack into a summary pill and bring it back. |
 | `store` | Escape hatch: the underlying store for subscriptions and advanced updates. |
 
+Every method returns the snackbar `id` (except `update`, `dismiss*` and the
+minimize helpers), so you can update or dismiss it later.
+
 ### `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.
+Import `toast` when you are outside a component. It talks to the same store that
+`<SnackbarProvider>` renders, so no hook is needed.
 
 ```ts
 import { toast } from 'react-snackbar-glass';
@@ -77,22 +97,115 @@ 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 } });
-```
+toast.single('Position set to top-center');
 
-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 });
 ```
 
+It mirrors `useSnackbar()` one-to-one — `show`, `update`, `dismiss`,
+`dismissAll`, every variant preset, `single`, `promise`, `minimize`, `expand`,
+`isMinimized` and `store`.
+
 `<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.
+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.
+
+### Layouts
+
+`layout` is the density axis. It can be set per snackbar, on the provider or in
+the store config, and it is the only thing that changes between the three shapes:
+
+| `layout` | Shape | Use it for |
+| --- | --- | --- |
+| `card` | Full card: title, message, action, hairline. Default. | Results that deserve a headline and an action. |
+| `compact` | Fully rounded single-line pill. | High-frequency messages that should stay quiet. |
+| `inline` | Message-only status line, content width, ~38 px tall. | Instant feedback such as “Copied” or “Position set”. |
+
+```ts
+toast.success('Draft saved', { layout: 'compact' });
+snackbar.show({ message: 'Synced', layout: 'inline' });
+<SnackbarProvider layout="compact" />;
+```
+
+`compact: true` still works and is sugar for `layout: 'compact'`.
+
+**Single-line status** — `toast.single()` is the `inline` preset with a hard
+one-line contract: long text truncates with an ellipsis instead of wrapping, and
+a timed notice has no title, no countdown hairline and no close button.
+
+```ts
+toast.single('Position set to top-center', { variant: 'success' });
+toast.single('Could not reach the server', { variant: 'error', duration: 8000 });
+```
+
+### Surfaces
+
+Five presets ship with the stylesheet. Pick one per snackbar or as the default:
+
+```tsx
+<SnackbarProvider tone="paper" />
+
+// or per snackbar
+toast.info('Backup finished.', { tone: 'graphite' });
+```
+
+| `tone` | Look |
+| --- | --- |
+| `glass` | Frosted and translucent — the page shows through. Default. |
+| `paper` | Opaque, matte, hairline border, no blur. Follows light/dark. |
+| `solid` | The variant accent painted as the surface, white text. |
+| `graphite` | Dark matte charcoal with light text, in both themes. |
+| `neon` | Near-black with an accent glow ring, in both themes. |
+
+All five keep the same layout, icon tinting, hairline and motion, and every one
+is driven by the `--prs-*` tokens, so you can restyle a preset without forking
+the CSS.
+
+### Sizes and positions
+
+| `size` | Width (relative to `--prs-width`, default `384px`) |
+| --- | --- |
+| `xs` | 72 % |
+| `sm` | 86 % |
+| `md` | 100 % — default |
+| `lg` | 116 % |
+
+Positions are the six screen corners: `top-left`, `top-center`, `top-right`,
+`bottom-left`, `bottom-center`, `bottom-right` (default).
+
+```ts
+toast.success('Saved', { size: 'sm', position: 'top-center' });
+```
+
+`maxVisible` (default `3`) caps how many cards a corner shows at once; older
+ones stay queued and take the next free slot.
+
+### 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.
 
 ### Promise-aware flows
 
@@ -110,12 +223,13 @@ snackbar.promise(deploy(), {
 });
 ```
 
-`success` and `error` can be plain content, full options, or a mapper that
-receives the resolved value / rejection reason.
+`loading`, `success` and `error` accept plain content, full options, or a mapper
+that receives the resolved value / rejection reason. The returned promise
+resolves with the original value, so it can be awaited inline.
 
 ### Sticky snackbars with in-place updates
 
-```tsx
+```ts
 const id = snackbar.show({
   variant: 'loading',
   title: 'Uploading assets',
@@ -132,9 +246,12 @@ snackbar.update(id, {
 });
 ```
 
+Reusing an `id` (in `show()` or `update()`) updates or revives the existing
+snackbar instead of stacking a duplicate — ideal for progress-style flows.
+
 ### Actions and undo windows
 
-```tsx
+```ts
 snackbar.show({
   message: 'Project archived.',
   duration: 7000,
@@ -145,23 +262,76 @@ snackbar.show({
 });
 ```
 
-Action handlers may return a promise: the button shows a pending state and
-the snackbar only closes after the handler settles (`closeOnClick`, default
-`true`).
+Action handlers may return a promise: the button shows a pending state and the
+snackbar only closes after the handler settles (`closeOnClick`, default `true`).
+Set `closeOnClick: false` to keep the snackbar open for a second step.
+
+### Close reasons and lifecycle
+
+`onClose` receives **why** a snackbar went away, plus its id:
+
+```ts
+snackbar.show({
+  message: 'Draft saved',
+  onOpen: (id) => track('shown', id),
+  onClose: (reason) => track('closed', reason),
+});
+```
+
+| Reason | Fired by |
+| --- | --- |
+| `timeout` | The duration elapsed. |
+| `manual` | The close button (or `dismiss()` without a reason). |
+| `action` | The action button, after its handler settled. |
+| `swipe` | A drag past `swipeThreshold`. |
+| `escape` | The user pressed <kbd>Esc</kbd> while a snackbar had focus. |
+| `dismissAll` | `dismissAll()` cleared the stack. |
+
+`onOpen` runs once the snackbar is actually mounted in a visible slot — not when
+it is queued.
+
+## `SnackbarOptions`
+
+| Option | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `id` | `string` | generated | Stable key; reusing it updates instead of stacking. |
+| `title` | `ReactNode` | — | Small, strong headline above the message. |
+| `message` | `ReactNode` | — | Main content. |
+| `variant` | `'neutral' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'loading' \| 'custom'` | `'neutral'` | Drives accent, icon and live-region politeness. |
+| `duration` | `number \| null` | `5000` | `null`, `0` or `Infinity` = persistent. |
+| `position` | `SnackbarPosition` | provider | Corner for this snackbar. |
+| `icon` | `ReactNode \| false` | variant icon | `false` hides the icon. |
+| `action` | `{ label, onClick?, closeOnClick? } \| null` | `null` | One call-to-action. |
+| `dismissible` | `boolean` | `true` | Show the close button. |
+| `progress` | `boolean` | `true` | Countdown hairline. |
+| `layout` | `'card' \| 'compact' \| 'inline'` | `'card'` | Density. |
+| `compact` | `boolean` | `false` | Sugar for `layout: 'compact'`. |
+| `animation` | `SnackbarAnimation` | `'slide'` | Both phases. |
+| `enterAnimation` / `exitAnimation` | `SnackbarAnimation` | — | Per-phase override. |
+| `tone` | `'glass' \| 'paper' \| 'solid' \| 'graphite' \| 'neon'` | `'glass'` | Surface preset. |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Density/width. |
+| `className` / `style` | — | — | Per-snackbar styling hooks. |
+| `onOpen` | `(id) => void` | — | Mounted and visible. |
+| `onClose` | `(reason, id) => void` | — | Dismissal started. |
 
 ## `<SnackbarProvider>` props
 
+Every default below can be overridden per snackbar in `SnackbarOptions`.
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `position` | `SnackbarPosition` | `'bottom-right'` | Default corner for new snackbars. |
 | `duration` | `number \| null` | `5000` | Auto-dismiss delay in ms. `null`/`0`/`Infinity` = persistent. |
-| `tone` | `'glass' \| 'solid'` | `'glass'` | Surface treatment. |
+| `tone` | `'glass' \| 'paper' \| 'solid' \| 'graphite' \| 'neon'` | `'glass'` | Surface preset. |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Card density/width. |
+| `layout` | `'card' \| 'compact' \| 'inline'` | `'card'` | Default layout. |
+| `compact` | `boolean` | `false` | Sugar for `layout: 'compact'`. |
+| `animation` | `SnackbarAnimation` | `'slide'` | Enter + exit preset. |
+| `enterAnimation` / `exitAnimation` | `SnackbarAnimation` | — | Per-phase override. |
 | `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Color scheme. |
 | `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. |
@@ -174,15 +344,7 @@ the snackbar only closes after the handler settles (`closeOnClick`, default
 | `container` | `HTMLElement \| () => HTMLElement \| null` | `document.body` | Portal target. |
 | `dir` | `'ltr' \| 'rtl'` | inherited | Text direction. |
 | `zIndex` | `number` | `2147483000` | Host stacking context. |
-
-## `SnackbarOptions`
-
-`id`, `title`, `message`, `variant`, `duration`, `position`, `icon`,
-`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.
+| `className` / `style` | — | — | Classes/styles for the host root. |
 
 ## Compact and minimized stacks
 
@@ -202,9 +364,9 @@ Set it once for every snackbar with `<SnackbarProvider compact />` or
 (`"3 notifications"`) that expands on click:
 
 ```ts
-toast.minimize();   // stack → one pill
-toast.expand();     // back to full cards
-toast.isMinimized(); // boolean
+toast.minimize();     // stack → one pill
+toast.expand();       // back to full cards
+toast.isMinimized();  // boolean
 ```
 
 `useSnackbar()` exposes the same three methods, and the store has
@@ -213,13 +375,14 @@ toast.isMinimized(); // boolean
 
 ## Theming
 
-Colors, radii, blur and motion are CSS custom properties on `.prs-root`
-(and per-card inline styles). Override globally:
+Colors, radii, blur and motion are CSS custom properties on `.prs-root` (and
+per-card inline styles).
 
 ```css
 :root {
   --prs-accent: #8b5cf6;
   --prs-radius: 16px;
+  --prs-width: 400px;
 }
 ```
 
@@ -231,12 +394,32 @@ snackbar.custom('Added to collection.', {
 });
 ```
 
+| Token | Default | Controls |
+| --- | --- | --- |
+| `--prs-accent` | variant color | Accent for icons, actions and links. |
+| `--prs-accent-soft` | 13 % accent | Icon chip / action background. |
+| `--prs-accent-ring` | 30 % accent | Icon ring and hover border. |
+| `--prs-solid` | accent | Surface color of the `solid` tone. |
+| `--prs-radius` | `18px` | Card radius. |
+| `--prs-width` | `384px` | Base card width; `size` scales it. |
+| `--prs-offset` | `20px` | Distance from the viewport edge. |
+| `--prs-gap` | `12px` | Space between stacked cards. |
+| `--prs-font` | Inter/system stack | Font family. |
+| `--prs-blur` | `blur(22px) saturate(1.55)` | Glass backdrop filter. |
+| `--prs-shadow` / `--prs-shadow-hover` | layered | Card shadow. |
+| `--prs-enter-duration` / `--prs-exit-duration` | `440ms` / `190ms` | Motion pacing. |
+| `--prs-radius-inline` | pill radius | Radius of `inline` notices. |
+| `--prs-z-index` | `2147483000` | Host stacking context. |
+
 ## Store-only usage
 
+If you want to own the store — or render the host somewhere specific — skip the
+provider:
+
 ```tsx
 import { createSnackbarStore, SnackbarHost } from 'react-snackbar-glass';
 
-const store = createSnackbarStore({ position: 'top-center' });
+const store = createSnackbarStore({ position: 'top-center', tone: 'paper' });
 
 function App() {
   return (
@@ -248,11 +431,27 @@ function App() {
 }
 ```
 
+```ts
+store.setConfig({ duration: 3000, layout: 'compact' }); // live default changes
+const stop = store.subscribe(() => console.log(store.getSnapshot()));
+```
+
+| Member | Description |
+| --- | --- |
+| `show / update / dismiss / dismissAll / promise` | Same semantics as the hook. |
+| `subscribe(fn)` | Listen for any change; returns an unsubscribe function. |
+| `getSnapshot()` / `getServerSnapshot()` | Current records (stable for `useSyncExternalStore`). |
+| `getConfig()` / `setConfig(partial)` | Read or change defaults at runtime. |
+| `pause(id, reason?)` / `resume(id, reason?)` | Reference-counted timer pause (hover, drag, hidden tab). |
+| `minimize / expand / getMinimized` | Stack collapse state. |
+| `notifyShown(id)` / `notifyExited(id)` | Lifecycle hooks the viewport calls. |
+| `setPageHidden(hidden)` | Forward `document.visibilityState` changes. |
+
 ## Server-side rendering
 
 `SnackbarProvider` and `SnackbarHost` render nothing until mounted, and the
-store returns a stable server snapshot. No `window` access during render, so
-the components are safe in Next.js, Remix and other SSR frameworks.
+store returns a stable server snapshot. No `window` access during render, so the
+components are safe in Next.js, Remix and other SSR frameworks.
 
 ## Requirements
 

package/dist/index.cjs

@@ -11,7 +11,10 @@ var DEFAULT_CONFIG = {
   duration: 5e3,
   dismissible: true,
   progress: true,
-  compact: false,
+  layout: "card",
+  animation: "slide",
+  enterAnimation: "slide",
+  exitAnimation: "slide",
   tone: "glass",
   size: "md",
   maxVisible: 3
@@ -39,23 +42,38 @@ 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.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
+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();
@@ -223,6 +241,7 @@ function createSnackbarStore(initialConfig = {}) {
       }
       return id;
     }
+    const layout = resolveLayout(options.layout, options.compact, config.layout);
     const record = {
       id,
       title: options.title,
@@ -236,7 +255,11 @@ function createSnackbarStore(initialConfig = {}) {
       action: options.action ?? null,
       dismissible: options.dismissible ?? config.dismissible,
       progress: options.progress ?? config.progress,
-      compact: options.compact ?? config.compact,
+      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(),
@@ -265,7 +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,
-      ...options.compact !== void 0 ? { compact: options.compact } : 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,
@@ -315,19 +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.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
-    };
+    config = mergeConfig(config, patch);
   };
   const promise = (input, messages, options = {}) => {
     const loadingOptions = contentToOptions(messages.loading ?? "Loading\u2026");
@@ -630,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.compact && 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`,
@@ -651,6 +672,9 @@ function SnackbarItem({
       "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,
@@ -699,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",
@@ -718,7 +742,7 @@ function SnackbarItem({
                 ]
               }
             ),
-            record.dismissible ? /* @__PURE__ */ jsxRuntime.jsx(
+            showClose ? /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
@@ -938,6 +962,10 @@ function SnackbarProvider({
   dismissible,
   progress,
   compact,
+  layout,
+  animation,
+  enterAnimation,
+  exitAnimation,
   tone,
   size,
   maxVisible,
@@ -960,6 +988,10 @@ function SnackbarProvider({
       dismissible,
       progress,
       compact,
+      layout,
+      animation,
+      enterAnimation,
+      exitAnimation,
       tone,
       size,
       maxVisible
@@ -971,6 +1003,10 @@ function SnackbarProvider({
     dismissible,
     progress,
     compact,
+    layout,
+    animation,
+    enterAnimation,
+    exitAnimation,
     tone,
     size,
     maxVisible
@@ -989,6 +1025,7 @@ 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,
@@ -1055,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,