@jackuait/blok 0.10.12 → 0.11.0

package/src/components/modules/api/blocks.ts

@@ -228,6 +228,8 @@ export class BlocksAPI extends Module {
     }
 
     this.Blok.ModificationsObserver.enable();
+
+    this.processPendingHashScroll();
   }
 
   /**
@@ -564,4 +566,36 @@ export class BlocksAPI extends Module {
       throw new Error(`Index should be greater than or equal to 0`);
     }
   }
+
+  /**
+   * If Renderer.pendingHashScroll is set (hash-based scroll was deferred because the
+   * target block did not exist at init time), attempt to scroll to and select the block now.
+   * Always clears the pending hash afterward (one-shot).
+   */
+  private processPendingHashScroll(): void {
+    const hash = this.Blok.Renderer.pendingHashScroll;
+
+    if (hash === null) {
+      return;
+    }
+
+    this.Blok.Renderer.pendingHashScroll = null;
+
+    const el = document.querySelector(`[data-blok-id="${CSS.escape(hash)}"]`);
+
+    if (el === null) {
+      return;
+    }
+
+    const topOffset = this.config.scrollToBlock?.topOffset ?? 0;
+    const y = el.getBoundingClientRect().top + window.scrollY - topOffset;
+
+    window.scrollTo({ top: y, behavior: 'smooth' });
+
+    const block = this.Blok.BlockManager.getBlockById(hash);
+
+    if (block !== undefined) {
+      this.Blok.BlockSelection.selectBlock(block);
+    }
+  }
 }

package/src/components/modules/api/notifier.ts

@@ -3,15 +3,24 @@ import type { ModuleConfig } from '../../../types-internal/module-config';
 import { Module } from '../../__module';
 import { Notifier } from '../../utils/notifier';
 import type { ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions } from '../../utils/notifier/types';
+import { DEFAULT_NOTIFIER_POSITION } from '../../utils/notifier/types';
 
 /**
- *
+ * Notifier API module — routes show() to the custom handler when the consumer
+ * provides one in BlokConfig.notifier, otherwise falls back to the built-in notifier.
  */
 export class NotifierAPI extends Module {
   /**
-   * Notifier utility Instance
+   * Built-in notifier utility instance (used only when no custom handler is provided)
    */
-  private notifier: Notifier;
+  private builtInNotifier: Notifier;
+
+  /**
+   * Optional consumer-provided notifier handler from BlokConfig
+   */
+  private readonly customNotifier:
+    | ((options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) => void)
+    | undefined;
 
   /**
    * @param moduleConfiguration - Module Configuration
@@ -19,12 +28,10 @@ export class NotifierAPI extends Module {
    * @param moduleConfiguration.eventsDispatcher - Blok's event dispatcher
    */
   constructor({ config, eventsDispatcher }: ModuleConfig) {
-    super({
-      config,
-      eventsDispatcher,
-    });
+    super({ config, eventsDispatcher });
 
-    this.notifier = new Notifier();
+    this.builtInNotifier = new Notifier(config.notifierPosition ?? DEFAULT_NOTIFIER_POSITION);
+    this.customNotifier = config.notifier;
   }
 
   /**
@@ -32,15 +39,21 @@ export class NotifierAPI extends Module {
    */
   public get methods(): INotifier {
     return {
-      show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void => this.show(options),
+      show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void =>
+        this.show(options),
     };
   }
 
   /**
-   * Show notification
+   * Show notification — delegates to custom handler if provided, else built-in
    * @param {NotifierOptions} options - message option
    */
   public show(options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void {
-    return this.notifier.show(options);
+    if (this.customNotifier !== undefined) {
+      this.customNotifier(options);
+      return;
+    }
+
+    this.builtInNotifier.show(options);
   }
 }

package/src/components/modules/renderer.ts

@@ -37,6 +37,13 @@ export class Renderer extends Module {
    */
   public pendingRender: Promise<void> | null = null;
 
+  /**
+   * Decoded URL hash fragment that could not be scrolled to at init time
+   * because the target block was not yet in the DOM.
+   * Set by Blok constructor; consumed (and cleared) by BlocksAPI.render().
+   */
+  public pendingHashScroll: string | null = null;
+
   /**
    * Resolve function for the current pendingRender promise.
    * Called when the render operation is done (in finally block).

package/src/components/ui/toolbox.ts

@@ -338,36 +338,41 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       this.toggleRestrictedToolsHidden(true);
     }
 
-    this.popover?.show();
-
     /**
-     * When opening toolbox inside a table cell or a nested block (toggle, callout),
-     * position it at the caret instead of at the trigger element (which is outside
-     * the nested container).
-     * Must be called after show() so the popover is in the DOM.
+     * Always anchor the popover to a rect derived from the current context,
+     * never from the trigger element (plus button). The trigger rect is fragile:
+     * it can be hidden, offscreen, misaligned with the caret in nested containers
+     * (table cells, toggles, callouts), or detached from the block when the plus
+     * button sits at the block's top edge while the caret is elsewhere.
+     *
+     * - Slash open ("/"): anchor at the caret rect so the menu appears next to
+     *   what the user is typing, in any block type at any nesting depth.
+     * - Plus button open: anchor at the current block's bounding rect so the
+     *   menu appears below the block regardless of trigger placement.
+     *
+     * Set the position BEFORE show() so the first paint is already correct —
+     * popover.show() reads `params.position` via calculatePosition() and uses
+     * it instead of the trigger rect when present.
      */
-    const triggerRect = this.triggerElement?.getBoundingClientRect();
-    const triggerHidden = triggerRect?.height === 0;
-    const triggerOffScreen = triggerRect !== undefined && triggerRect.bottom < 0;
-    const isInsideNestedBlock = currentBlock !== undefined && currentBlock.parentId !== null;
-
-    if ((this.isInsideTableCell || triggerHidden || triggerOffScreen || isInsideNestedBlock) && this.popover instanceof PopoverDesktop) {
-      const caretRect = SelectionUtils.rect;
-
-      this.popover.updatePosition(caretRect);
-    } else if (!withSlash && this.popover instanceof PopoverDesktop) {
-      /**
-       * When opened without slash (via plus button), the trigger element (plus button)
-       * is at the top of the block. Position the popover below the block's bottom edge
-       * instead, so it doesn't overlap the block's placeholder text.
-       */
-      const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
-
-      if (currentBlock) {
-        this.popover.updatePosition(currentBlock.holder.getBoundingClientRect());
+    if (this.popover instanceof PopoverDesktop) {
+      const blockRect = currentBlock?.holder.getBoundingClientRect();
+      const caretRect = withSlash ? SelectionUtils.rect : undefined;
+      const caretRectIsDegenerate = caretRect !== undefined
+        && caretRect.width === 0
+        && caretRect.height === 0
+        && caretRect.x === 0
+        && caretRect.y === 0;
+      // Fall back to the block rect when selection is lost or returns a
+      // degenerate {0,0,0,0} rect — never anchor the popover at the page origin.
+      const anchorRect = caretRect !== undefined && !caretRectIsDegenerate ? caretRect : blockRect;
+
+      if (anchorRect !== undefined) {
+        this.popover.updatePosition(anchorRect);
       }
     }
 
+    this.popover?.show();
+
     this.openedWithSlash = withSlash;
     this.opened = true;
     this.emit(ToolboxEvent.Opened);

package/src/components/utils/notifier/draw.ts

@@ -1,123 +1,48 @@
-import { twMerge, twJoin } from '../tw';
+import { twJoin } from '../tw';
 
-import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
-
-/**
- * SVG icons for notification styles.
- * Each icon is 16x16, stroke-based for consistency.
- */
-const ICONS = {
-  success: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.25"/><path d="M5.5 8.25l1.75 1.75 3.25-3.5"/></svg>`,
-  error: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.25"/><path d="M8 5.25v3"/><circle cx="8" cy="10.75" r="0.5" fill="currentColor" stroke="none"/></svg>`,
-  default: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.25v3.25"/><circle cx="8" cy="5.25" r="0.5" fill="currentColor" stroke="none"/></svg>`,
-};
-
-const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 2l6 6M8 2l-6 6"/></svg>`;
+import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions, NotifierPosition } from './types';
+import { DEFAULT_NOTIFIER_POSITION } from './types';
 
 export const CSS = {
-  wrapper: twJoin(
-    'fixed z-2 bottom-5 left-5',
-    'font-[-apple-system,BlinkMacSystemFont,"Segoe_UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira_Sans","Droid_Sans","Helvetica_Neue",sans-serif]'
-  ),
+  /**
+   * The wrapper class is built dynamically per-position.
+   * See getPositionClasses().
+   */
+  wrapper: 'fixed z-[9999]',
   notification: twJoin(
-    'relative flex items-start gap-2.5 w-[230px] mt-[15px] py-[13px] px-4',
-    'bg-white shadow-notify rounded-[6px]',
-    'text-sm leading-[1.4em] wrap-break-word overflow-hidden',
-    'before:content-[""] before:absolute before:block before:top-0 before:left-0',
-    'before:w-[3px] before:h-[calc(100%-6px)] before:m-[3px] before:rounded-[5px] before:bg-transparent'
+    'relative flex items-center justify-center mt-2 py-[10px] px-6',
+    'bg-[#1c1c1e] text-[#f5f5f5]',
+    'text-[15px] font-normal leading-[1.4] tracking-[-0.015em] wrap-break-word overflow-hidden',
+    'rounded-[14px]',
+    'shadow-[0_8px_32px_rgba(0,0,0,0.4),0_1px_4px_rgba(0,0,0,0.25)]',
+    'border border-white/[0.08]'
   ),
-  icon: 'shrink-0 mt-px',
-  iconSuccess: 'text-[#34c992]',
-  iconError: 'text-[#fb5d5d]',
-  iconDefault: 'text-[#9ca3af]',
   messageWrapper: 'flex-1 min-w-0',
-  crossBtn: twJoin(
-    'absolute top-[7px] right-[7px] flex items-center justify-center',
-    'w-6 h-6 rounded opacity-40 cursor-pointer',
-    'transition-opacity duration-150',
-    'hover:opacity-100'
-  ),
-  btnsWrapper: 'flex flex-row flex-nowrap mt-[5px]',
-  btn: 'border-none rounded-[3px] text-[13px] py-[5px] px-2.5 cursor-pointer outline-hidden last:ml-2.5',
-  okBtn: 'bg-[#34c992] shadow-[0_1px_1px_0_rgba(18,49,35,0.05)] text-white hover:bg-[#2db583]',
-  cancelBtn: 'bg-[#f2f5f7] shadow-[0_2px_1px_0_rgba(16,19,29,0)] text-[#656b7c] hover:bg-[#e9ecee]',
+  btnsWrapper: 'flex flex-row flex-nowrap mt-[8px] gap-2',
+  btn: 'border-none rounded-[7px] text-[13px] py-[5px] px-3 cursor-pointer outline-hidden font-medium',
+  okBtn: 'bg-white/15 text-[#f5f5f5] hover:bg-white/25',
+  cancelBtn: 'bg-white/8 text-[#a1a1aa] hover:bg-white/12',
   input: twJoin(
-    'max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]',
-    'text-[13px] text-[#656b7c] outline-hidden',
-    'placeholder:text-[#656b7c] focus:placeholder:text-[rgba(101,107,124,0.3)]'
-  ),
-  successNotification: twJoin(
-    'bg-[#fafffe]!',
-    'before:bg-[#41ffb1]!'
-  ),
-  errorNotification: twJoin(
-    'bg-[#fffbfb]!',
-    'before:bg-[#fb5d5d]!'
+    'max-w-[140px] py-[5px] px-3 bg-white/10 border border-white/10 rounded-[7px]',
+    'text-[13px] text-[#e4e4e7] outline-hidden',
+    'placeholder:text-white/30 focus:border-white/20'
   ),
-  progressBar: twJoin(
-    'absolute bottom-0 left-0 h-[2px] rounded-b-[6px]',
-    'animate-notify-progress'
-  ),
-  progressDefault: 'bg-[#d1d5db]',
-  progressSuccess: 'bg-[#41ffb1]',
-  progressError: 'bg-[#fb5d5d]',
-};
-
-/**
- * Creates an icon element for the notification.
- */
-const createIcon = (style?: string): HTMLElement => {
-  const iconWrapper = document.createElement('span');
-  const resolvedStyle = style === 'success' || style === 'error' ? style : 'default';
-
-  iconWrapper.innerHTML = ICONS[resolvedStyle];
-  iconWrapper.setAttribute('data-blok-testid', 'notification-icon');
-  iconWrapper.setAttribute('data-blok-style', resolvedStyle);
-
-  const iconColorMap: Record<string, string> = {
-    success: CSS.iconSuccess,
-    error: CSS.iconError,
-    default: CSS.iconDefault,
-  };
-
-  const colorClass = iconColorMap[resolvedStyle] ?? CSS.iconDefault;
-
-  iconWrapper.className = twJoin(CSS.icon, colorClass);
-
-  return iconWrapper;
-};
-
-/**
- * Creates a close (cross) button with an SVG icon.
- */
-const createCloseButton = (): HTMLElement => {
-  const cross = document.createElement('div');
-
-  cross.className = CSS.crossBtn;
-  cross.setAttribute('data-blok-testid', 'notification-cross');
-  cross.innerHTML = CLOSE_ICON;
-
-  return cross;
 };
 
 /**
- * Creates a progress bar element for auto-dismissing alerts.
+ * Maps NotifierPosition to Tailwind positioning classes.
  */
-export const createProgressBar = (style?: string, time?: number): HTMLElement => {
-  const bar = document.createElement('div');
-
-  const progressColorMap: Record<string, string> = {
-    success: CSS.progressSuccess,
-    error: CSS.progressError,
+export const getPositionClasses = (position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): string => {
+  const map: Record<NotifierPosition, string> = {
+    'bottom-left': 'bottom-5 left-5',
+    'bottom-right': 'bottom-5 right-5',
+    'bottom-center': 'bottom-5 left-1/2 -translate-x-1/2',
+    'top-left': 'top-5 left-5',
+    'top-right': 'top-5 right-5',
+    'top-center': 'top-5 left-1/2 -translate-x-1/2',
   };
 
-  const colorClass = progressColorMap[style ?? ''] ?? CSS.progressDefault;
-
-  bar.className = twJoin(CSS.progressBar, colorClass);
-  bar.setAttribute('data-blok-testid', 'notification-progress');
-  bar.style.animationDuration = `${time ?? 8000}ms`;
-
-  return bar;
+  return map[position] ?? map['bottom-left'];
 };
 
 /**
@@ -128,19 +53,7 @@ export const alert = (options: NotifierOptions): HTMLElement => {
   const notify = document.createElement('DIV');
   const style = options.style;
 
-  const getStyleClasses = (): string => {
-    if (style === 'success') {
-      return CSS.successNotification;
-    }
-
-    if (style === 'error') {
-      return CSS.errorNotification;
-    }
-
-    return '';
-  };
-
-  notify.className = twMerge(CSS.notification, getStyleClasses());
+  notify.className = CSS.notification;
 
   if (style) {
     notify.setAttribute('data-blok-testid', `notification-${style}`);
@@ -148,12 +61,7 @@ export const alert = (options: NotifierOptions): HTMLElement => {
     notify.setAttribute('data-blok-testid', 'notification');
   }
 
-  // Icon
-  const icon = createIcon(style);
-
-  notify.appendChild(icon);
-
-  // Message wrapper (flex child that holds message + buttons)
+  // Message wrapper
   const messageWrapper = document.createElement('div');
 
   messageWrapper.className = CSS.messageWrapper;
@@ -161,12 +69,6 @@ export const alert = (options: NotifierOptions): HTMLElement => {
   messageWrapper.innerHTML = options.message;
   notify.appendChild(messageWrapper);
 
-  // Close button
-  const cross = createCloseButton();
-
-  cross.addEventListener('click', () => notify.remove());
-  notify.appendChild(cross);
-
   return notify;
 };
 
@@ -180,7 +82,6 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const cancelBtn = document.createElement('button');
-  const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
   const cancelHandler = options.cancelHandler;
   const okHandler = options.okHandler;
 
@@ -200,10 +101,6 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
     cancelBtn.addEventListener('click', cancelHandler);
   }
 
-  if (cancelHandler && typeof cancelHandler === 'function' && crossBtn) {
-    crossBtn.addEventListener('click', cancelHandler);
-  }
-
   if (okHandler && typeof okHandler === 'function') {
     okBtn.addEventListener('click', okHandler);
   }
@@ -214,7 +111,6 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(okBtn);
   btnsWrapper.appendChild(cancelBtn);
 
-  // Append buttons to the message wrapper so they flow under the message text
   if (messageWrapper) {
     messageWrapper.appendChild(btnsWrapper);
   } else {
@@ -234,7 +130,6 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const input = document.createElement('input');
-  const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
   const cancelHandler = options.cancelHandler;
   const okHandler = options.okHandler;
 
@@ -258,8 +153,12 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
     input.type = options.inputType;
   }
 
-  if (cancelHandler && typeof cancelHandler === 'function' && crossBtn) {
-    crossBtn.addEventListener('click', cancelHandler);
+  if (cancelHandler && typeof cancelHandler === 'function') {
+    const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
+
+    if (crossBtn) {
+      crossBtn.addEventListener('click', cancelHandler);
+    }
   }
 
   if (okHandler && typeof okHandler === 'function') {
@@ -273,7 +172,6 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(input);
   btnsWrapper.appendChild(okBtn);
 
-  // Append to message wrapper for proper flex layout
   if (messageWrapper) {
     messageWrapper.appendChild(btnsWrapper);
   } else {
@@ -283,11 +181,13 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   return notify;
 };
 
-export const getWrapper = (): HTMLElement => {
+export const getWrapper = (position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): HTMLElement => {
   const wrapper = document.createElement('DIV');
+  const positionClasses = getPositionClasses(position);
 
-  wrapper.className = CSS.wrapper;
+  wrapper.className = twJoin(CSS.wrapper, positionClasses);
   wrapper.setAttribute('data-blok-testid', 'notifier-container');
+  wrapper.setAttribute('data-blok-position', position);
 
   return wrapper;
 };

package/src/components/utils/notifier/index.ts

@@ -1,13 +1,29 @@
-import { alert, confirm, createProgressBar, getWrapper, prompt } from './draw';
-import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
+import { alert, confirm, getWrapper, prompt } from './draw';
+import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions, NotifierPosition } from './types';
+import { DEFAULT_NOTIFIER_POSITION } from './types';
 
 const DEFAULT_TIME = 8000;
 
+/**
+ * Returns the slide-in animation class based on position.
+ * Top positions slide down, bottom positions slide up.
+ */
+const getSlideInClass = (position: NotifierPosition): string => {
+  return position.startsWith('top') ? 'animate-notify-slide-in-top' : 'animate-notify-slide-in';
+};
+
+/**
+ * Returns the slide-out animation class based on position.
+ */
+const getSlideOutClass = (position: NotifierPosition): string => {
+  return position.startsWith('top') ? 'animate-notify-slide-out-top' : 'animate-notify-slide-out';
+};
+
 /**
  * Applies the exit animation and removes the element after it finishes.
  */
-const dismissWithAnimation = (element: HTMLElement): void => {
-  element.classList.add('animate-notify-slide-out');
+const dismissWithAnimation = (element: HTMLElement, position: NotifierPosition): void => {
+  element.classList.add(getSlideOutClass(position));
 
   element.addEventListener('animationend', () => {
     element.remove();
@@ -15,37 +31,72 @@ const dismissWithAnimation = (element: HTMLElement): void => {
 };
 
 /**
- * Prepare wrapper for notifications
+ * Fades and scales the element out quickly (replacement case), then calls onDone.
+ */
+const swapOut = (element: HTMLElement, onDone: () => void): void => {
+  element.classList.add('animate-notify-swap-out');
+
+  element.addEventListener('animationend', () => {
+    element.remove();
+    onDone();
+  }, { once: true });
+};
+
+/**
+ * Prepare wrapper for notifications.
+ * If position changes, removes the old wrapper and creates a fresh one.
+ * @param {NotifierPosition} position - desired position
  * @returns {HTMLElement}
  */
-const prepare_ = (): HTMLElement => {
+const prepare_ = (position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): HTMLElement => {
   const existingWrapper = document.querySelector('[data-blok-testid="notifier-container"]') as HTMLElement;
 
   if (existingWrapper) {
-    return existingWrapper;
+    // If position has changed, recreate the wrapper at the new location
+    if (existingWrapper.getAttribute('data-blok-position') !== position) {
+      existingWrapper.remove();
+    } else {
+      return existingWrapper;
+    }
   }
 
-  const wrapper = getWrapper();
+  const wrapper = getWrapper(position);
 
   document.body.appendChild(wrapper);
 
   return wrapper;
 };
 
+/**
+ * Appends the notification to the wrapper and starts its auto-dismiss timer.
+ */
+const appendNotify = (wrapper: HTMLElement, notify: HTMLElement, position: NotifierPosition, time: number): void => {
+  wrapper.appendChild(notify);
+  notify.classList.add(getSlideInClass(position));
+  notify.setAttribute('data-blok-bounce-in', 'true');
+
+  window.setTimeout(() => {
+    // Guard: element may have already been replaced
+    if (notify.isConnected) {
+      dismissWithAnimation(notify, position);
+    }
+  }, time);
+};
+
 /**
  * Show new notification
  * @param {NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions} options - notification options
+ * @param {NotifierPosition} position - notification container position
  */
-export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void => {
+export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions, position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): void => {
   if (!options.message) {
     return;
   }
 
-  const wrapper = prepare_();
-
+  const wrapper = prepare_(position);
   const time = options.time || DEFAULT_TIME;
 
-  const notify: HTMLElement = (() => {
+  const buildNotify = (): HTMLElement => {
     const type = options.type;
 
     if (type === 'confirm') {
@@ -56,36 +107,24 @@ export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptN
       return prompt(options as PromptNotifierOptions);
     }
 
-    // type is 'alert' or undefined
-    const alertElement = alert(options);
-
-    // Add progress bar for auto-dismissing alerts
-    const progressBar = createProgressBar(options.style, time);
+    return alert(options);
+  };
 
-    alertElement.appendChild(progressBar);
+  const existing = wrapper.querySelector<HTMLElement>('[data-blok-testid]');
 
-    // Wire up the close button to use animated dismissal
-    const crossBtn = alertElement.querySelector('[data-blok-testid="notification-cross"]');
-
-    if (crossBtn) {
-      // Replace the basic remove handler with animated dismissal
-      const newCross = crossBtn.cloneNode(true) as HTMLElement;
-
-      crossBtn.replaceWith(newCross);
-      newCross.addEventListener('click', () => dismissWithAnimation(alertElement));
-    }
+  if (existing) {
+    // Cancel any in-progress swap-out on the existing element so we don't double-fire
+    existing.classList.remove('animate-notify-swap-out');
 
-    window.setTimeout(() => {
-      dismissWithAnimation(alertElement);
-    }, time);
+    swapOut(existing, () => {
+      const notify = buildNotify();
 
-    return alertElement;
-  })();
+      appendNotify(wrapper, notify, position, time);
+    });
+  } else {
+    const notify = buildNotify();
 
-  if (wrapper && notify) {
-    wrapper.appendChild(notify);
-    notify.className = `${notify.className} animate-notify-slide-in`;
-    notify.setAttribute('data-blok-bounce-in', 'true');
+    appendNotify(wrapper, notify, position, time);
   }
 };
 

package/src/components/utils/notifier/types.ts

@@ -1 +1,4 @@
 export type * from '@/types/configs/notifier';
+export type { NotifierPosition } from '@/types/configs/notifier';
+
+export const DEFAULT_NOTIFIER_POSITION = 'bottom-center' as const;