@jackuait/blok 0.7.0-beta.1 → 0.7.0-beta.3

package/src/components/modules/drag/DragController.ts

@@ -110,11 +110,18 @@ export class DragController extends Module {
       ? this.Blok.BlockSelection.selectedBlocks
       : [block];
 
-    // For single-block list item drags, include all descendants
-    const descendants = !isBlockSelected && this.listItemDescendants
+    // For single-block drags, include all descendants (list items via depth, toggles via contentIds)
+    const listDescendants = !isBlockSelected && this.listItemDescendants
       ? this.listItemDescendants.getDescendants(block)
       : [];
 
+    // If no list descendants found, check for hierarchy children (toggle blocks)
+    const hasHierarchyChildren = !isBlockSelected && block.contentIds?.length > 0;
+    const hierarchyDescendants = listDescendants.length === 0 && hasHierarchyChildren
+      ? this.getHierarchyDescendants(block)
+      : [];
+    const descendants = listDescendants.length > 0 ? listDescendants : hierarchyDescendants;
+
     const blocksToMove = descendants.length > 0
       ? [block, ...descendants]
       : initialBlocks;
@@ -458,6 +465,31 @@ export class DragController extends Module {
     this.Blok.Toolbar.moveAndOpen(blockToShow);
   }
 
+  /**
+   * Recursively collects all descendants of a block via the parentId/contentIds hierarchy.
+   * Used for toggle blocks and other parent-child structures that don't use data-list-depth.
+   * @param block - Parent block to collect descendants for
+   * @returns Array of descendant blocks
+   */
+  private getHierarchyDescendants(block: Block): Block[] {
+    const descendants: Block[] = [];
+
+    const collectChildren = (parentBlock: Block): void => {
+      for (const childId of parentBlock.contentIds) {
+        const child = this.Blok.BlockManager.getBlockById(childId);
+
+        if (child !== undefined) {
+          descendants.push(child);
+          collectChildren(child);
+        }
+      }
+    };
+
+    collectChildren(block);
+
+    return descendants;
+  }
+
   public destroy(): void {
     this.cleanup();
   }

package/src/components/modules/paste/handlers/blok-data-handler.ts

@@ -1,6 +1,7 @@
 import type { SanitizerConfig } from '../../../../../types/configs/sanitizer-config';
 import type { SavedData } from '../../../../../types/data-formats';
 import type { BlokModules } from '../../../../types-internal/blok-modules';
+import type { Block } from '../../../block';
 import { sanitizeBlocks } from '../../../utils/sanitizer';
 import type { SanitizerConfigBuilder } from '../sanitizer-config';
 import type { ToolRegistry } from '../tool-registry';
@@ -10,6 +11,15 @@ import type { PasteHandler } from './base';
 import { BasePasteHandler } from './base';
 import { PatternHandler } from './pattern-handler';
 
+/**
+ * Shape of a block in the Blok clipboard data.
+ * Extends the basic SavedData fields with optional hierarchy information.
+ */
+interface BlokClipboardBlock extends Pick<SavedData, 'id' | 'data' | 'tool'> {
+  parentId?: string | null;
+  contentIds?: string[];
+}
+
 
 /**
  * Blok Data Handler Priority.
@@ -45,7 +55,7 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
       return false;
     }
 
-    const parsedBlokData = JSON.parse(data) as Pick<SavedData, 'id' | 'data' | 'tool'>[];
+    const parsedBlokData = JSON.parse(data) as BlokClipboardBlock[];
 
     // Check if we should try pattern matching first (for URL pasting within editor)
     const hasPatterns = this.toolRegistry.toolsPatterns.length > 0;
@@ -118,9 +128,11 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
 
   /**
    * Insert Blok JSON blocks.
+   * After inserting all blocks, restores parent-child hierarchy using an ID mapping
+   * (pasted blocks receive new IDs, so original IDs are mapped to new block instances).
    */
   private insertBlokBlocks(
-    blocks: Pick<SavedData, 'id' | 'data' | 'tool'>[],
+    blocks: BlokClipboardBlock[],
     canReplace: boolean
   ): void {
     const { BlockManager, Caret, Tools } = this.Blok;
@@ -130,7 +142,14 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
       this.config.sanitizer
     );
 
-    sanitizedBlocks.forEach(({ tool, data }, i) => {
+    /**
+     * Map from original (old) block ID to the newly inserted Block instance.
+     * Used after insertion to re-establish parent-child relationships.
+     */
+    const oldIdToEntry = new Map<string, { newBlock: Block; original: BlokClipboardBlock }>();
+
+    sanitizedBlocks.forEach((sanitizedBlock, i) => {
+      const { tool, data } = sanitizedBlock;
       const needToReplaceCurrentBlock = i === 0 &&
         canReplace &&
         Boolean(BlockManager.currentBlock?.tool.isDefault) &&
@@ -142,7 +161,35 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
         replace: needToReplaceCurrentBlock,
       });
 
+      const originalBlock = blocks[i];
+
+      if (originalBlock !== undefined) {
+        oldIdToEntry.set(originalBlock.id, { newBlock: block, original: originalBlock });
+      }
+
       Caret.setToBlock(block, Caret.positions.END);
     });
+
+    /**
+     * Restore parent-child hierarchy using the old-to-new ID mapping.
+     * Only restores relationships where both parent and child are in the pasted set.
+     */
+    for (const [, { newBlock, original }] of oldIdToEntry) {
+      if (original.parentId === undefined || original.parentId === null) {
+        continue;
+      }
+
+      const parentEntry = oldIdToEntry.get(original.parentId);
+
+      if (parentEntry === undefined) {
+        continue;
+      }
+
+      newBlock.parentId = parentEntry.newBlock.id;
+
+      if (!parentEntry.newBlock.contentIds.includes(newBlock.id)) {
+        parentEntry.newBlock.contentIds = [...parentEntry.newBlock.contentIds, newBlock.id];
+      }
+    }
   }
 }

package/src/components/modules/toolbar/index.ts

@@ -393,22 +393,16 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Suppress toolbar buttons when the focused element is inside a table cell.
-     * The toolbar still positions itself for toolbox/slash-search purposes,
-     * but plus button and settings toggler remain hidden while a cell has focus.
-     *
-     * Note: we check focus (activeElement) not hover. On hover alone, the plus
-     * button should remain visible so the user can click it to add blocks
-     * below the table. Only when the user actually clicks/focuses inside a cell
-     * should the buttons be suppressed.
+     * Adjust toolbar button visibility when focus is inside a table cell.
+     * The plus button always stays visible so users can add blocks below the table.
+     * The settings toggler is hidden because drag/settings don't apply to individual cells.
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
-    const displayValue = focusIsInsideCell ? 'none' : '';
 
-    plusButton.style.display = displayValue;
+    plusButton.style.display = '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = displayValue;
+      settingsToggler.style.display = focusIsInsideCell ? 'none' : '';
     }
 
     const targetBlockHolder = targetBlock.holder;
@@ -662,8 +656,8 @@ export class Toolbar extends Module<ToolbarNodes> {
 
   /**
    * Updates toolbar button visibility based on whether a table cell has focus.
-   * Hides plus button and settings toggler when focus is inside a cell;
-   * restores them when focus moves to a regular block.
+   * The plus button always stays visible; the settings toggler is hidden when
+   * focus is inside a cell and restored when focus moves to a regular block.
    *
    * Called from the focusin listener so button state is updated immediately
    * on click, without waiting for the next hover/moveAndOpen cycle.
@@ -676,12 +670,11 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
-    const displayValue = focusIsInsideCell ? 'none' : '';
 
-    plusButton.style.display = displayValue;
+    plusButton.style.display = '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = displayValue;
+      settingsToggler.style.display = focusIsInsideCell ? 'none' : '';
     }
   }
 
@@ -837,9 +830,11 @@ export class Toolbar extends Module<ToolbarNodes> {
       i18nLabels: {
         filter: this.Blok.I18n.t('popover.search'),
         nothingFound: this.Blok.I18n.t('popover.nothingFound'),
+        slashSearchPlaceholder: this.Blok.I18n.t('toolbox.typeToSearch'),
       },
       i18n: this.Blok.I18n,
       triggerElement: this.nodes.plusButton,
+      leftAlignElement: this.nodes.content,
     });
 
     this.toolboxInstance.on(ToolboxEvent.Opened, () => {

package/src/components/modules/ui.ts

@@ -22,6 +22,7 @@ import { KeyboardController } from './uiControllers/controllers/keyboard';
 import { SelectionController } from './uiControllers/controllers/selection';
 import { createDocumentClickedHandler } from './uiControllers/handlers/click';
 import { createRedactorTouchHandler } from './uiControllers/handlers/touch';
+import { ToggleShortcuts } from '../../tools/toggle/toggle-shortcuts';
 
 /**
  * HTML Elements used for UI
@@ -56,6 +57,7 @@ export class UI extends Module<UINodes> {
   private keyboardController: KeyboardController | null = null;
   private selectionController: SelectionController | null = null;
   private blockHoverController: BlockHoverController | null = null;
+  private toggleShortcuts: ToggleShortcuts | null = null;
 
   /**
    * Handlers for simple event behaviors
@@ -162,8 +164,27 @@ export class UI extends Module<UINodes> {
      * Enable selection controller after initialization.
      * This is needed because bindReadOnlyInsensitiveListeners() is called in make()
      * before initializeControllers(), so the selectionController doesn't exist yet.
+     * Must happen before toggleShortcuts.register() so that a shortcut registration
+     * error cannot prevent the selectionchange listener from being set up.
      */
     this.selectionController?.enable();
+
+    /**
+     * Register toggle shortcuts (CMD+ALT+T) for collapsing/expanding all toggle blocks.
+     * Wrapped in try-catch because the Shortcuts singleton may throw if shortcuts are
+     * already registered (e.g. race condition with multiple editor instances in CI).
+     * This is non-critical — the editor works fine without toggle shortcuts.
+     */
+    this.toggleShortcuts = new ToggleShortcuts(
+      this.Blok.API.methods,
+      this.nodes.wrapper
+    );
+
+    try {
+      this.toggleShortcuts.register();
+    } catch (error) {
+      console.warn('Blok: Failed to register toggle shortcuts:', error);
+    }
   }
 
   /**
@@ -343,6 +364,7 @@ export class UI extends Module<UINodes> {
    * Clean blok`s UI
    */
   public destroy(): void {
+    this.toggleShortcuts?.unregister();
     this.nodes.holder.innerHTML = '';
 
     this.unbindReadOnlyInsensitiveListeners();

package/src/components/ui/toolbox.ts

@@ -57,7 +57,7 @@ export interface ToolboxEventMap {
 /**
  * Available i18n dict keys that should be passed to the constructor
  */
-type ToolboxTextLabelsKeys = 'filter' | 'nothingFound';
+type ToolboxTextLabelsKeys = 'filter' | 'nothingFound' | 'slashSearchPlaceholder';
 
 /**
  * Toolbox
@@ -145,6 +145,11 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private triggerElement?: HTMLElement;
 
+  /**
+   * Optional element whose left edge is used for horizontal popover alignment.
+   */
+  private leftAlignElement?: HTMLElement;
+
   /**
    * The block element currently being listened to for inline slash search
    */
@@ -169,13 +174,15 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    * @param options.tools - Tools available to check whether some of them should be displayed at the Toolbox or not
    * @param options.i18n - I18n instance for translations
    * @param options.triggerElement - Element relative to which the popover should be positioned
+   * @param options.leftAlignElement - Element whose left edge is used for horizontal popover alignment
    */
-  constructor({ api, tools, i18nLabels, i18n, triggerElement }: {
+  constructor({ api, tools, i18nLabels, i18n, triggerElement, leftAlignElement }: {
     api: API;
     tools: ToolsCollection<BlockToolAdapter>;
     i18nLabels: Record<ToolboxTextLabelsKeys, string>;
     i18n: I18nInstance;
     triggerElement?: HTMLElement;
+    leftAlignElement?: HTMLElement;
   }) {
     super();
 
@@ -184,6 +191,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.i18nLabels = i18nLabels;
     this.i18n = i18n;
     this.triggerElement = triggerElement;
+    this.leftAlignElement = leftAlignElement;
 
     this.enableShortcuts();
 
@@ -346,6 +354,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.popover = new PopoverClass({
       scopeElement: this.api.ui.nodes.redactor,
       trigger: this.triggerElement || this.nodes.toolbox,
+      leftAlignElement: this.leftAlignElement,
       messages: {
         nothingFound: this.i18nLabels.nothingFound,
         search: this.i18nLabels.filter,
@@ -633,7 +642,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.currentBlockForSearch = currentBlock.holder;
     this.currentContentEditable = this.currentBlockForSearch.querySelector('[contenteditable="true"]');
     if (this.currentContentEditable instanceof HTMLElement) {
-      this.currentContentEditable.setAttribute(DATA_ATTR.slashSearch, '');
+      this.currentContentEditable.setAttribute(DATA_ATTR.slashSearch, this.i18nLabels.slashSearchPlaceholder);
     }
     this.listeners.on(this.currentBlockForSearch, 'input', this.handleBlockInput);
   }
@@ -674,6 +683,13 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
     const query = text.slice(slashIndex + 1);
 
+    if (this.currentContentEditable instanceof HTMLElement) {
+      this.currentContentEditable.setAttribute(
+        DATA_ATTR.slashSearch,
+        query.length === 0 ? this.i18nLabels.slashSearchPlaceholder : ''
+      );
+    }
+
     this.popover?.filterItems(query);
   };
 

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

@@ -2,22 +2,39 @@ import { twMerge, 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>`;
+
 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]'
   ),
   notification: twJoin(
-    'relative w-[230px] mt-[15px] py-[13px] px-4',
-    'bg-white shadow-notify rounded-[5px]',
-    'text-sm leading-[1.4em] wrap-break-word',
+    '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'
   ),
+  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-[15px] w-2.5 h-2.5 p-[5px] opacity-55 cursor-pointer',
-    'before:content-[""] before:absolute before:left-[9px] before:top-[5px] before:h-3 before:w-0.5 before:bg-[#575d67] before:-rotate-45',
-    'after:content-[""] after:absolute after:left-[9px] after:top-[5px] after:h-3 after:w-0.5 after:bg-[#575d67] after:rotate-45',
+    '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]',
@@ -37,6 +54,70 @@ export const CSS = {
     'bg-[#fffbfb]!',
     'before:bg-[#fb5d5d]!'
   ),
+  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.
+ */
+export const createProgressBar = (style?: string, time?: number): HTMLElement => {
+  const bar = document.createElement('div');
+
+  const progressColorMap: Record<string, string> = {
+    success: CSS.progressSuccess,
+    error: CSS.progressError,
+  };
+
+  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;
 };
 
 /**
@@ -45,8 +126,6 @@ export const CSS = {
  */
 export const alert = (options: NotifierOptions): HTMLElement => {
   const notify = document.createElement('DIV');
-  const cross = document.createElement('DIV');
-  const message = options.message;
   const style = options.style;
 
   const getStyleClasses = (): string => {
@@ -69,12 +148,23 @@ export const alert = (options: NotifierOptions): HTMLElement => {
     notify.setAttribute('data-blok-testid', 'notification');
   }
 
-  notify.innerHTML = message;
+  // Icon
+  const icon = createIcon(style);
 
-  cross.className = CSS.crossBtn;
-  cross.setAttribute('data-blok-testid', 'notification-cross');
-  cross.addEventListener('click', () => notify.remove());
+  notify.appendChild(icon);
+
+  // Message wrapper (flex child that holds message + buttons)
+  const messageWrapper = document.createElement('div');
+
+  messageWrapper.className = CSS.messageWrapper;
+  messageWrapper.setAttribute('data-blok-testid', 'notification-message');
+  messageWrapper.innerHTML = options.message;
+  notify.appendChild(messageWrapper);
+
+  // Close button
+  const cross = createCloseButton();
 
+  cross.addEventListener('click', () => notify.remove());
   notify.appendChild(cross);
 
   return notify;
@@ -86,6 +176,7 @@ export const alert = (options: NotifierOptions): HTMLElement => {
  */
 export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   const notify = alert(options);
+  const messageWrapper = notify.querySelector('[data-blok-testid="notification-message"]') as HTMLElement;
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const cancelBtn = document.createElement('button');
@@ -123,7 +214,12 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(okBtn);
   btnsWrapper.appendChild(cancelBtn);
 
-  notify.appendChild(btnsWrapper);
+  // Append buttons to the message wrapper so they flow under the message text
+  if (messageWrapper) {
+    messageWrapper.appendChild(btnsWrapper);
+  } else {
+    notify.appendChild(btnsWrapper);
+  }
 
   return notify;
 };
@@ -134,6 +230,7 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
  */
 export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   const notify = alert(options);
+  const messageWrapper = notify.querySelector('[data-blok-testid="notification-message"]') as HTMLElement;
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const input = document.createElement('input');
@@ -176,7 +273,12 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(input);
   btnsWrapper.appendChild(okBtn);
 
-  notify.appendChild(btnsWrapper);
+  // Append to message wrapper for proper flex layout
+  if (messageWrapper) {
+    messageWrapper.appendChild(btnsWrapper);
+  } else {
+    notify.appendChild(btnsWrapper);
+  }
 
   return notify;
 };

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

@@ -1,8 +1,19 @@
-import { alert, confirm, getWrapper, prompt } from './draw';
+import { alert, confirm, createProgressBar, getWrapper, prompt } from './draw';
 import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
 
 const DEFAULT_TIME = 8000;
 
+/**
+ * Applies the exit animation and removes the element after it finishes.
+ */
+const dismissWithAnimation = (element: HTMLElement): void => {
+  element.classList.add('animate-notify-slide-out');
+
+  element.addEventListener('animationend', () => {
+    element.remove();
+  }, { once: true });
+};
+
 /**
  * Prepare wrapper for notifications
  * @returns {HTMLElement}
@@ -48,8 +59,24 @@ export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptN
     // type is 'alert' or undefined
     const alertElement = alert(options);
 
+    // Add progress bar for auto-dismissing alerts
+    const progressBar = createProgressBar(options.style, time);
+
+    alertElement.appendChild(progressBar);
+
+    // 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));
+    }
+
     window.setTimeout(() => {
-      alertElement.remove();
+      dismissWithAnimation(alertElement);
     }, time);
 
     return alertElement;
@@ -57,11 +84,11 @@ export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptN
 
   if (wrapper && notify) {
     wrapper.appendChild(notify);
-    notify.className = `${notify.className} animate-notify-bounce-in`;
+    notify.className = `${notify.className} animate-notify-slide-in`;
     notify.setAttribute('data-blok-bounce-in', 'true');
   }
 };
 
 export const Notifier = {
   show,
-};
+};

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.const.ts

@@ -10,7 +10,7 @@ export const css = {
    * Note: noHover state is handled via [data-blok-popover-item-no-hover] which disables hover
    * Priority order: active < hover < focus (focus wins when navigating with keyboard)
    */
-  item: 'flex items-center select-none border-none bg-transparent rounded-lg px-2 py-(--item-padding) text-text-primary mb-0.5 transition-colors duration-150 data-blok-popover-item-active:bg-icon-active-bg data-blok-popover-item-active:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg data-blok-force-hover:cursor-pointer data-blok-force-hover:bg-item-hover-bg data-[blok-focused="true"]:bg-item-focus-bg data-blok-popover-item-no-hover:hover:bg-transparent data-blok-popover-item-no-hover:cursor-default can-hover:data-blok-popover-item-destructive:hover:text-item-destructive-text can-hover:data-blok-popover-item-destructive:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
+  item: 'flex items-center select-none border-none bg-transparent rounded-lg px-2 py-(--item-padding) text-text-primary mb-0.5 transition-[color,background-color,border-color,opacity,max-height,padding,margin] duration-150 max-h-10 overflow-hidden data-blok-popover-item-active:bg-icon-active-bg data-blok-popover-item-active:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg data-blok-force-hover:cursor-pointer data-blok-force-hover:bg-item-hover-bg data-[blok-focused="true"]:bg-item-focus-bg data-blok-popover-item-no-hover:hover:bg-transparent data-blok-popover-item-no-hover:cursor-default can-hover:data-blok-popover-item-destructive:hover:text-item-destructive-text can-hover:data-blok-popover-item-destructive:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
 
   /**
    * Item disabled state
@@ -21,7 +21,7 @@ export const css = {
   /**
    * Icon container styles
    */
-  icon: 'flex items-center justify-center w-[26px] h-[26px] rounded-lg [&_svg]:w-icon [&_svg]:h-icon',
+  icon: 'flex items-center justify-center w-[26px] h-[26px] shrink-0 rounded-lg [&_svg]:w-icon [&_svg]:h-icon',
 
   /**
    * Focused state class for DomIterator/Flipper keyboard navigation.

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -258,8 +258,8 @@ export class PopoverItemDefault extends PopoverItem {
       const titleEl = document.createElement('div');
 
       titleEl.className = params.secondaryLabel
-        ? 'grow truncate text-sm font-medium leading-5'
-        : 'mr-auto truncate text-sm font-medium leading-5';
+        ? 'grow whitespace-nowrap text-sm font-medium leading-5'
+        : 'mr-auto whitespace-nowrap text-sm font-medium leading-5';
       titleEl.setAttribute(DATA_ATTR.popoverItemTitle, '');
       titleEl.setAttribute('data-blok-testid', 'popover-item-title');
       titleEl.textContent = title;
@@ -272,7 +272,7 @@ export class PopoverItemDefault extends PopoverItem {
     if (params.secondaryLabel) {
       const secondaryEl = document.createElement('div');
 
-      secondaryEl.className = 'ml-auto flex items-center whitespace-nowrap pl-3 text-[11px] font-medium tracking-wide text-text-secondary/50';
+      secondaryEl.className = 'ml-auto shrink-0 flex items-center whitespace-nowrap pl-20 text-[11px] font-medium tracking-wide text-text-secondary/50';
       secondaryEl.setAttribute(DATA_ATTR.popoverItemSecondaryTitle, '');
       secondaryEl.setAttribute('data-blok-testid', 'popover-item-secondary-title');
       secondaryEl.textContent = params.secondaryLabel;
@@ -326,8 +326,7 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
-      // Asymmetric padding: pr-8 for visual balance, pr-4 when secondary label or chevron occupies right edge
-      !isInline && !isNestedInline && (this.params.secondaryLabel || (this.hasChildren && !this.isChevronHidden) ? 'pl-2 pr-4' : 'pl-2 pr-8'),
+      !isInline && !isNestedInline && 'pl-2 pr-4',
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
@@ -385,10 +384,10 @@ export class PopoverItemDefault extends PopoverItem {
 
     if (isHidden) {
       this.nodes.root.setAttribute(DATA_ATTR.hidden, 'true');
-      this.nodes.root.classList.add('hidden!');
+      this.nodes.root.classList.add('opacity-0', 'max-h-0!', 'py-0!', 'mb-0!');
     } else {
       this.nodes.root.removeAttribute(DATA_ATTR.hidden);
-      this.nodes.root.classList.remove('hidden!');
+      this.nodes.root.classList.remove('opacity-0', 'max-h-0!', 'py-0!', 'mb-0!');
     }
   }