@jackuait/blok 0.10.12 → 0.11.1

package/dist/react.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/blok-CNEP3LpI.cjs`);require(`./chunks/constants-DJjFgioo.cjs`);const t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),n=require(`./chunks/objectWithoutProperties-BbzyiphF.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a=new WeakMap;function o(e,t){a.set(e,t)}function s(e){return a.get(e)}function c(e){a.delete(e)}function l(n,i){let[a,s]=(0,r.useState)(null),l=(0,r.useRef)(n);l.current=n;let d=(0,r.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,r.useMemo)(()=>({}),i==null?[]:i);(0,r.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return s(n.editor),()=>{u(n,s)};if(n.editor!==null&&!n.isDestroyed){c(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,s(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=l.current,a=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=l.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=l.current).onChange)==null||t.call(n,...e)}}));return n.editor=a,o(a,r),a.isReady.then(()=>{n.editor===a&&!n.isDestroyed&&s(a)}).catch(()=>{if(n.editor===a&&!n.isDestroyed){c(a);try{a.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,s(null)}}),()=>{u(n,s)}},[f]);let{readOnly:p}=n;(0,r.useEffect)(()=>{a!==null&&a.readOnly.set(p==null?!1:p)},[a,p]);let{autofocus:m}=n;return(0,r.useEffect)(()=>{a===null||!m||a.focus()},[a,m]),a}function u(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){c(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.destroyTimeout=null,t(null)}},0)}var d=[`editor`],f=(0,r.forwardRef)(function(e,a){let{editor:o}=e,c=n.t(e,d),l=(0,r.useRef)(null);return(0,r.useEffect)(()=>{if(o===null||l.current===null)return;let e=s(o);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[o]),(0,i.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))});exports.BlokContent=f,exports.useBlok=l;

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { t as e } from "./chunks/blok-Cb7w54t6.mjs";
-import "./chunks/constants-C0aZXxoO.mjs";
+import { t as e } from "./chunks/blok-DNvzyOYn.mjs";
+import "./chunks/constants-DMsOCPcF.mjs";
 import { t } from "./chunks/objectSpread2-CWwMYL_U.mjs";
 import { t as n } from "./chunks/objectWithoutProperties-Dci1-l7D.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";

package/dist/tools.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/constants-DJjFgioo.cjs`),t=require(`./chunks/tools-NAqHj-Cy.cjs`);exports.Bold=t.l,exports.Callout=t.h,exports.Code=t.u,exports.Convert=e.m,exports.Database=t.m,exports.DatabaseRow=t.p,exports.Divider=t.f,exports.Header=t.y,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.v,exports.Marker=t.o,exports.Paragraph=t.b,exports.Quote=t.d,exports.Strikethrough=t.i,exports.Table=t._,exports.Toggle=t.g,exports.Underline=t.a,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-C0aZXxoO.mjs";
-import { _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, y as b } from "./chunks/tools-vS7102lG.mjs";
+import { m as e } from "./chunks/constants-DMsOCPcF.mjs";
+import { _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, y as b } from "./chunks/tools-DPov06L-.mjs";
 export { u as Bold, c as Callout, v as Code, e as Convert, d as Database, m as DatabaseRow, o as Divider, b as Header, h as InlineCode, i as Italic, g as Link, y as List, p as Marker, r as Paragraph, a as Quote, l as Strikethrough, t as Table, s as Toggle, n as Underline, _ as defaultBlockTools, f as defaultInlineTools };

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.10.12",
+  "version": "0.11.1",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
+  "main": "./dist/blok.cjs",
+  "browser": "./dist/blok.iife.js",
+  "unpkg": "./dist/blok.iife.js",
+  "jsdelivr": "./dist/blok.iife.js",
   "types": "./types/index.d.ts",
   "typesVersions": {
     "*": {
@@ -26,15 +30,18 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/blok.mjs"
+      "import": "./dist/blok.mjs",
+      "require": "./dist/blok.cjs"
     },
     "./tools": {
       "types": "./types/tools-entry.d.ts",
-      "import": "./dist/tools.mjs"
+      "import": "./dist/tools.mjs",
+      "require": "./dist/tools.cjs"
     },
     "./full": {
       "types": "./types/full.d.ts",
-      "import": "./dist/full.mjs"
+      "import": "./dist/full.mjs",
+      "require": "./dist/full.cjs"
     },
     "./locales": {
       "types": "./types/locales.d.ts",
@@ -42,11 +49,13 @@
     },
     "./react": {
       "types": "./types/react.d.ts",
-      "import": "./dist/react.mjs"
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.cjs"
     },
     "./markdown": {
       "types": "./types/markdown.d.ts",
-      "import": "./dist/markdown.mjs"
+      "import": "./dist/markdown.mjs",
+      "require": "./dist/markdown.cjs"
     }
   },
   "bin": {
@@ -81,9 +90,9 @@
   "scripts": {
     "serve": "vite --no-open",
     "serve:docs": "cd docs && vite --port 8080",
-    "build": "vite build --mode production && node scripts/build-locales.mjs",
+    "build": "vite build --mode production && vite build --config vite.config.iife.mjs --mode production && node scripts/build-locales.mjs",
     "build:cli": "node scripts/build-cli.mjs",
-    "build:test": "vite build --mode test && node scripts/build-locales.mjs test && node scripts/build-react-vendor.mjs",
+    "build:test": "vite build --mode test && vite build --config vite.config.iife.mjs --mode test && node scripts/build-locales.mjs test && node scripts/build-react-vendor.mjs",
     "lint": "sh -c 'eslint .; ESLINT_EXIT=$?; tsc --noEmit; TSC_EXIT=$?; if [ $ESLINT_EXIT -ne 0 ] || [ $TSC_EXIT -ne 0 ]; then exit 1; fi'",
     "lint:fix": "eslint . --fix",
     "lint:tests": "eslint test/",

package/src/blok.ts

@@ -205,6 +205,9 @@ class Blok {
       // Scroll to the block referenced by the URL hash, if present.
       // isReady resolves only after all blocks are in the DOM (requestIdleCallback fence in Renderer),
       // so no extra polling is needed even on slow connections.
+      // However, when consumers pass no `data` in the config and instead call blocks.render()
+      // from onReady, the target block won't exist yet. In that case we store the hash
+      // on Renderer.pendingHashScroll so BlocksAPI.render() can retry after the real blocks arrive.
       const rawHash = window.location.hash.slice(1);
       const hash = rawHash ? Blok.safeDecodeHash(rawHash) : '';
 
@@ -220,6 +223,8 @@ class Blok {
           window.scrollTo({ top: y, behavior: 'smooth' });
 
           Blok.selectBlockById(blok, hash);
+        } else if (blok.moduleInstances.Renderer !== undefined) {
+          blok.moduleInstances.Renderer.pendingHashScroll = hash;
         }
       }
 

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;
 };