@jackuait/blok 0.7.3-beta.3 → 0.7.3

package/src/components/ui/toolbox.ts

@@ -167,6 +167,13 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private isInsideTableCell = false;
 
+  /**
+   * Whether the toolbox was opened in slash-search mode (via "/" key or existing slash paragraph).
+   * When false (opened via plus button), the input filter uses the full block text as the query
+   * instead of requiring a leading "/" and does not close on missing slash.
+   */
+  private openedWithSlash = true;
+
   /**
    * Toolbox constructor
    * @param options - available parameters
@@ -280,8 +287,10 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
   /**
    * Open Toolbox with Tools
+   * @param withSlash - When true (default), inline search requires "/" and closes on its removal.
+   *                    When false (plus button), the full block text is used as the filter query.
    */
-  public open(): void {
+  public open(withSlash = true): void {
     if (this.isEmpty) {
       return;
     }
@@ -318,8 +327,20 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       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());
+      }
     }
 
+    this.openedWithSlash = withSlash;
     this.opened = true;
     this.emit(ToolboxEvent.Opened);
     this.startListeningToBlockInput();
@@ -725,7 +746,12 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
   /**
    * Handles input events on the block to filter the toolbox.
-   * Extracts text after "/" and applies it as a filter query.
+   *
+   * In slash mode (default): extracts text after "/" and filters by it.
+   * Closes if "/" is removed.
+   *
+   * In no-slash mode (opened via plus button): uses full block text as the
+   * filter query and does not close on missing "/".
    */
   private handleBlockInput = (): void => {
     if (this.currentContentEditable === null) {
@@ -733,15 +759,18 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     }
 
     const text = this.currentContentEditable.textContent || '';
-    const slashIndex = text.lastIndexOf('/');
 
-    if (slashIndex === -1) {
-      this.close();
+    if (this.openedWithSlash) {
+      const slashIndex = text.lastIndexOf('/');
 
-      return;
+      if (slashIndex === -1) {
+        this.close();
+
+        return;
+      }
     }
 
-    const query = text.slice(slashIndex + 1);
+    const query = this.openedWithSlash ? text.slice(text.lastIndexOf('/') + 1) : text;
 
     if (this.currentContentEditable instanceof HTMLElement) {
       this.currentContentEditable.setAttribute(

package/src/components/utils/color-mapping.ts

@@ -1,4 +1,4 @@
-import { COLOR_PRESETS } from '../shared/color-presets';
+import { COLOR_PRESETS, COLOR_PRESETS_DARK } from '../shared/color-presets';
 
 /**
  * Convert an HSL color (H in degrees, S and L as 0-100 percentages) to an RGB tuple.
@@ -239,3 +239,45 @@ export function mapToNearestPresetColor(cssColor: string, mode: 'text' | 'bg'):
 
   return best.color;
 }
+
+/**
+ * Map an arbitrary CSS color to the name of the nearest Blok preset color.
+ *
+ * Searches both light and dark presets to correctly recover the semantic name
+ * from hex values that originated in either theme. First match wins on ties.
+ *
+ * @param cssColor - CSS color string (hex or rgb)
+ * @param mode - 'text' for text color presets, 'bg' for background presets
+ * @returns the nearest preset name (e.g. 'red'), or null if unparseable
+ */
+export function mapToNearestPresetName(cssColor: string, mode: 'text' | 'bg'): string | null {
+  const rgb = parseColor(cssColor);
+
+  if (rgb === null) {
+    return null;
+  }
+
+  const hsl = rgbToHsl(rgb);
+  const allPresets = [...COLOR_PRESETS, ...COLOR_PRESETS_DARK];
+
+  const best = allPresets.reduce<{ name: string; distance: number } | null>(
+    (acc, preset) => {
+      const presetRgb = parseColor(preset[mode]);
+
+      if (presetRgb === null) {
+        return acc;
+      }
+
+      const distance = hslDistance(hsl, rgbToHsl(presetRgb));
+
+      if (acc === null || distance < acc.distance) {
+        return { name: preset.name, distance };
+      }
+
+      return acc;
+    },
+    null
+  );
+
+  return best?.name ?? null;
+}

package/src/components/utils/color-migration.ts

@@ -0,0 +1,37 @@
+import { colorVarName } from '../shared/color-presets';
+import { mapToNearestPresetName } from './color-mapping';
+
+const PROPS = ['color', 'background-color'] as const;
+type Prop = typeof PROPS[number];
+
+const PROP_MODE: Record<Prop, 'text' | 'bg'> = {
+  'color': 'text',
+  'background-color': 'bg',
+};
+
+/**
+ * Scan all <mark> elements inside container and replace raw hex color/background-color
+ * inline style values with their corresponding CSS custom property references.
+ *
+ * Safe to call multiple times — already-migrated var() values and 'transparent' are
+ * left unchanged.
+ *
+ * @param container - Root element to search within (e.g. the editor redactor node)
+ */
+export function migrateMarkColors(container: Element): void {
+  container.querySelectorAll<HTMLElement>('mark').forEach((el) => {
+    for (const prop of PROPS) {
+      const value = el.style.getPropertyValue(prop);
+
+      if (!value || value === 'transparent' || value.startsWith('var(')) {
+        continue;
+      }
+
+      const name = mapToNearestPresetName(value, PROP_MODE[prop]);
+
+      if (name !== null) {
+        el.style.setProperty(prop, colorVarName(name, PROP_MODE[prop]));
+      }
+    }
+  });
+}

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-1 text-text-primary mb-px outline-hidden transition-[color,background-color,border-color,opacity,max-height,padding,margin] duration-150 max-h-9 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: 'flex items-center select-none border-none bg-transparent rounded-lg px-2 py-1 text-text-primary mb-px outline-hidden max-h-9 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-7 h-7 shrink-0 rounded-lg bg-popover-icon-bg transition-colors duration-150 [&_svg]:w-icon [&_svg]:h-icon',
+  icon: 'flex items-center justify-center w-7 h-7 shrink-0 rounded-lg bg-popover-icon-bg [&_svg]:w-icon [&_svg]:h-icon',
 
   /**
    * Focused state class for DomIterator/Flipper keyboard navigation.
@@ -37,7 +37,8 @@ export const cssInline = {
   /**
    * Item in inline context - more compact styling
    */
-  item: 'rounded p-1',
+  item: 'rounded-lg p-1',
+  itemIconOnly: 'aspect-square justify-center',
 };
 
 /**

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

@@ -305,7 +305,7 @@ export class PopoverItemDefault extends PopoverItem {
   private createIconElement(icon: string, iconWithGap: boolean, isInline: boolean, isNestedInline: boolean): HTMLElement {
     const iconEl = document.createElement('div');
 
-    iconEl.className = this.getIconClass(iconWithGap, isInline, isNestedInline, false);
+    iconEl.className = this.getIconClass(iconWithGap, isInline, isNestedInline);
     iconEl.setAttribute(DATA_ATTR.popoverItemIcon, '');
     iconEl.setAttribute('data-blok-testid', 'popover-item-icon');
     iconEl.innerHTML = icon;
@@ -328,6 +328,7 @@ export class PopoverItemDefault extends PopoverItem {
       css.item,
       !isInline && !isNestedInline && 'pl-2 pr-3',
       isInline && cssInline.item,
+      isInline && this.params.icon && cssInline.itemIconOnly,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
     );
@@ -336,15 +337,14 @@ export class PopoverItemDefault extends PopoverItem {
   /**
    * Gets the icon class based on context
    */
-  private getIconClass(iconWithGap: boolean, isInline: boolean, isNestedInline: boolean, isWobbling: boolean): string {
+  private getIconClass(iconWithGap: boolean, isInline: boolean, isNestedInline: boolean): string {
     return twMerge(
       css.icon,
       isInline && 'w-auto h-auto bg-transparent [&_svg]:w-icon [&_svg]:h-icon mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile',
       isNestedInline && 'w-toolbox-btn h-toolbox-btn',
       iconWithGap && 'mr-3',
       iconWithGap && isInline && 'shadow-none mr-0!',
-      iconWithGap && isNestedInline && 'mr-2!',
-      isWobbling && 'animate-wobble'
+      iconWithGap && isNestedInline && 'mr-2!'
     );
   }
 
@@ -639,47 +639,13 @@ export class PopoverItemDefault extends PopoverItem {
         item.onActivate?.(item);
         this.disableConfirmationMode();
       } catch {
-        this.animateError();
+        // onActivate threw an error
       }
     } else {
       this.enableConfirmationMode(item.confirmation);
     }
   }
 
-  /**
-   * Animates item which symbolizes that error occurred while executing 'onActivate()' callback
-   */
-  private animateError(): void {
-    this.triggerWobble();
-  }
-
-  /**
-   * Triggers wobble animation on the icon
-   */
-  private triggerWobble(): void {
-    if (!this.nodes.icon) {
-      return;
-    }
-
-    const isInline = this.renderParams?.isInline ?? false;
-    const isNestedInline = this.renderParams?.isNestedInline ?? false;
-    const iconWithGap = this.renderParams?.iconWithGap ?? true;
-
-    // Add wobble class
-    this.nodes.icon.setAttribute(DATA_ATTR.popoverItemWobble, 'true');
-    this.nodes.icon.className = this.getIconClass(iconWithGap, isInline, isNestedInline, true);
-
-    // Remove wobble after animation ends
-    const handleAnimationEnd = (): void => {
-      if (this.nodes.icon) {
-        this.nodes.icon.removeAttribute(DATA_ATTR.popoverItemWobble);
-        this.nodes.icon.className = this.getIconClass(iconWithGap, isInline, isNestedInline, false);
-      }
-    };
-
-    this.nodes.icon.addEventListener('animationend', handleAnimationEnd, { once: true });
-  }
-
   /**
    * Gets reference to the icon element
    */

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

@@ -2,7 +2,7 @@
  * Tailwind CSS classes for popover separator component
  */
 export const css = {
-  container: 'py-1.5 px-2 transition-[opacity,max-height,padding] duration-150 max-h-5 overflow-hidden',
+  container: 'py-1.5 px-2 max-h-5 overflow-hidden',
   containerHidden: 'opacity-0 max-h-0! py-0!',
   line: 'h-px w-full bg-popover-border/60',
 };
@@ -12,7 +12,7 @@ export const css = {
  */
 export const cssInline = {
   // Inline context: horizontal separator
-  container: 'px-1 py-0',
+  container: 'px-1 py-0 max-h-none',
   line: 'h-full w-px',
   // Nested inline context: back to vertical separator
   nestedContainer: 'py-1 px-[3px]',

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

@@ -170,6 +170,17 @@ export abstract class PopoverItem {
     return this.params.children?.width;
   }
 
+  /**
+   * Returns the min-width for children popover, if specified
+   */
+  public get childrenMinWidth(): string | undefined {
+    if (this.params === undefined || !('children' in this.params)) {
+      return undefined;
+    }
+
+    return this.params.children?.minWidth;
+  }
+
   /**
    * True if popover should close once item is activated
    */

package/src/components/utils/popover/components/search-input/search-input.const.ts

@@ -2,8 +2,7 @@
  * CSS class names to be used in popover search input class
  */
 export const css = {
-  wrapper: 'bg-search-input-bg border border-search-input-border rounded-lg p-1 grid grid-cols-[auto_auto_1fr] grid-rows-[auto] transition-all duration-200 focus-within:bg-popover-bg focus-within:border-search-input-focus-border focus-within:shadow-[0_0_0_2px_rgba(35,131,226,0.08)]',
+  wrapper: 'bg-search-input-bg border border-search-input-border rounded-lg p-1 grid grid-cols-[auto_1fr] grid-rows-[auto] focus-within:border-search-input-focus-border focus-within:shadow-[0_0_0_2px_rgba(35,131,226,0.15)]',
   icon: 'w-toolbox-btn h-toolbox-btn flex items-center justify-center mr-2 [&_svg]:w-icon [&_svg]:h-icon [&_svg]:text-gray-text',
-  input: "text-sm outline-hidden font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[22px] min-w-[calc(100%-(--spacing(6))-10px)] placeholder:text-gray-text/60 placeholder:font-normal",
-  clearButton: 'flex items-center justify-center w-toolbox-btn h-toolbox-btn cursor-pointer border-0 bg-transparent rounded p-0 opacity-0 pointer-events-none transition-opacity duration-150 [&_svg]:w-3 [&_svg]:h-3 [&_svg]:text-gray-text can-hover:hover:[&_svg]:text-dark',
+  input: "text-sm outline-hidden font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[22px] min-w-[calc(100%-(--spacing(6))-10px)] text-text-primary placeholder:text-gray-text/80 placeholder:font-normal",
 };

package/src/components/utils/popover/components/search-input/search-input.ts

@@ -1,5 +1,5 @@
 import { Dom } from '../../../../dom';
-import { IconCross, IconSearch } from '../../../../icons';
+import { IconSearch } from '../../../../icons';
 import { EventsDispatcher } from '../../../events';
 import { Listeners } from '../../../listeners';
 
@@ -23,11 +23,6 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
    */
   private input: HTMLInputElement;
 
-  /**
-   * Clear button element
-   */
-  private clearButton: HTMLButtonElement;
-
   /**
    * The instance of the Listeners util
    */
@@ -78,15 +73,8 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     this.input.setAttribute('data-blok-flipper-navigation-target', 'true');
     this.input.setAttribute('data-blok-testid', 'popover-search-input');
 
-    this.clearButton = Dom.make('button', css.clearButton, {
-      type: 'button',
-      innerHTML: IconCross,
-    }) as HTMLButtonElement;
-    this.clearButton.setAttribute('aria-label', 'Clear search');
-
     this.wrapper.appendChild(iconWrapper);
     this.wrapper.appendChild(this.input);
-    this.wrapper.appendChild(this.clearButton);
 
     this.overrideValueProperty();
 
@@ -95,11 +83,6 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     eventsToHandle.forEach((eventName) => {
       this.listeners.on(this.input, eventName, this.handleValueChange);
     });
-
-    this.listeners.on(this.clearButton, 'click', () => {
-      this.clear();
-      this.input.focus();
-    });
   }
 
   /**
@@ -121,14 +104,12 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
    */
   public clear(): void {
     this.input.value = '';
-    this.updateClearButtonVisibility();
   }
 
   /**
    * Handles value changes for the input element
    */
   private handleValueChange = (): void => {
-    this.updateClearButtonVisibility();
     this.applySearch(this.input.value);
   };
 
@@ -178,18 +159,6 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     });
   }
 
-  /**
-   * Shows or hides the clear button based on whether the input has a value
-   */
-  private updateClearButtonVisibility(): void {
-    const visible = this.input.value.length > 0;
-
-    this.clearButton.classList.toggle('opacity-0', !visible);
-    this.clearButton.classList.toggle('pointer-events-none', !visible);
-    this.clearButton.classList.toggle('opacity-100', visible);
-    this.clearButton.classList.toggle('pointer-events-auto', visible);
-  }
-
   /**
    * Clears memory
    */

package/src/components/utils/popover/popover-abstract.ts

@@ -391,11 +391,9 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
   protected toggleNothingFoundMessage(isDisplayed: boolean): void {
     if (isDisplayed) {
       this.nodes.nothingFoundMessage.classList.remove('hidden');
-      this.nodes.nothingFoundMessage.classList.add('animate-[fade-in_150ms_ease_forwards]');
       this.nodes.nothingFoundMessage.setAttribute(DATA_ATTR.nothingFoundDisplayed, 'true');
     } else {
       this.nodes.nothingFoundMessage.classList.add('hidden');
-      this.nodes.nothingFoundMessage.classList.remove('animate-[fade-in_150ms_ease_forwards]');
       this.nodes.nothingFoundMessage.removeAttribute(DATA_ATTR.nothingFoundDisplayed);
     }
   }
@@ -461,14 +459,14 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     // Create popover container
     const popoverContainer = document.createElement('div');
     popoverContainer.className = css.popoverContainer;
-    popoverContainer.style.boxShadow = '0 0 0 1px var(--blok-popover-border), 0 4px 16px rgba(0, 0, 0, 0.1), 0 16px 40px -8px rgba(0, 0, 0, 0.08)';
+    popoverContainer.style.boxShadow = 'var(--blok-popover-box-shadow)';
     popoverContainer.setAttribute(DATA_ATTR.popoverContainer, '');
     popoverContainer.setAttribute('data-blok-testid', 'popover-container');
 
     // Create nothing found message
     const nothingFoundMessage = document.createElement('div');
     nothingFoundMessage.className = twMerge(
-      'cursor-default text-[13px] leading-5 font-normal whitespace-nowrap overflow-hidden text-ellipsis text-gray-text/70 px-3 py-4 text-center',
+      'cursor-default text-[13px] leading-5 font-normal whitespace-nowrap overflow-hidden text-ellipsis text-gray-text px-3 py-4 text-center',
       'hidden'
     );
     nothingFoundMessage.setAttribute('data-blok-testid', 'popover-nothing-found');

package/src/components/utils/popover/popover-desktop.ts

@@ -562,6 +562,7 @@ export class PopoverDesktop extends PopoverAbstract {
       messages: this.messages,
       onNavigateBack: this.destroyNestedPopoverIfExists.bind(this),
       width: item.childrenWidth,
+      minWidth: item.childrenMinWidth,
       handleContentEditableNavigation: handleContentEditable,
       autoFocusFirstItem: this.params.autoFocusFirstItem,
     });
@@ -1035,15 +1036,6 @@ export class PopoverDesktop extends PopoverAbstract {
 
     const isNothingFound = matchingTopLevel.length === 0 && data.promotedItems.length === 0;
 
-    /**
-     * When nothing is found, disable transitions so items hide instantly.
-     */
-    if (isNothingFound) {
-      this.items.forEach(item => {
-        item.getElement()?.style.setProperty('transition-duration', '0s');
-      });
-    }
-
     this.items
       .forEach((item) => {
         const isDefaultItem = item instanceof PopoverItemDefault;
@@ -1055,13 +1047,6 @@ export class PopoverDesktop extends PopoverAbstract {
         item.toggleHidden(isHidden);
       });
 
-    if (isNothingFound) {
-      this.nodes.popoverContainer.offsetHeight;
-      this.items.forEach(item => {
-        item.getElement()?.style.removeProperty('transition-duration');
-      });
-    }
-
     // Reorder top-level DOM elements to reflect ranking
     if (!isEmptyQuery && matchingTopLevel.length > 0) {
       this.reorderItemsByRank(matchingTopLevel);

package/src/components/utils/popover/popover-inline.ts

@@ -204,8 +204,7 @@ export class PopoverInline extends PopoverDesktop {
       this.nodes.popoverContainer.className = twMerge(
         css.popoverContainer,
         css.popoverContainerOpened,
-        cssInline.popoverContainer,
-        'animate-none'
+        cssInline.popoverContainer
       );
 
       // Set height based on screen

package/src/components/utils/popover/popover-mobile.ts

@@ -90,7 +90,7 @@ export class PopoverMobile extends PopoverAbstract<PopoverMobileNodes> {
    */
   public show(): void {
     this.nodes.overlay.removeAttribute(DATA_ATTR.overlayHidden);
-    this.nodes.overlay.className = twMerge(css.popoverOverlay, 'fixed inset-0 block visible z-3 opacity-50 transition-opacity duration-120 ease-in will-change-[opacity]');
+    this.nodes.overlay.className = twMerge(css.popoverOverlay, 'fixed inset-0 block visible z-3 opacity-50');
 
     super.show();
 
@@ -102,7 +102,7 @@ export class PopoverMobile extends PopoverAbstract<PopoverMobileNodes> {
       css.popoverContainer,
       css.popoverContainerMobile,
       css.popoverContainerOpened,
-      'max-h-none z-4 animate-[panelShowingMobile_250ms_ease]'
+      'max-h-none z-4'
     );
 
     this.scrollLocker.lock();

package/src/components/utils/popover/popover.const.ts

@@ -12,7 +12,7 @@ export const css = {
   popoverContainerMobile: 'fixed max-w-none rounded-[10px] min-w-[calc(100%-var(--offset)*2)] left-auto top-auto inset-[auto_var(--offset)_calc(var(--offset)+env(safe-area-inset-bottom))_var(--offset)]',
 
   // Popover container - opened state
-  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1.5 max-h-(--max-height) border-none animate-panel-showing',
+  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1.5 max-h-(--max-height) border-none',
 
   // Popover overlay
   popoverOverlay: 'hidden bg-dark',

package/src/stories/Table.stories.ts

@@ -7,6 +7,8 @@ import { createEditorContainer, defaultTools, simulateClick, waitForToolbar } fr
 import type { EditorFactoryOptions } from './helpers';
 
 import type { OutputData, ToolSettings } from '@/types';
+import { GRIP_ACTIVE_CLASSES, GRIP_IDLE_CLASSES, GRIP_VISIBLE_CLASSES } from '../tools/table/table-row-col-controls';
+import { GRIP_HOVER_SIZE } from '../tools/table/table-grip-visuals';
 
 // ── Constants ────────────────────────────────────────────────────────
 
@@ -77,20 +79,24 @@ const waitForTable = async (canvas: HTMLElement): Promise<void> => {
 const forceGripsVisible = (grips: NodeListOf<Element>): void => {
   grips.forEach((grip) => {
     grip.setAttribute('data-blok-table-grip-visible', '');
-    grip.classList.remove('opacity-0', 'pointer-events-none');
-    grip.classList.add('opacity-100', 'pointer-events-auto');
+    GRIP_IDLE_CLASSES.forEach(cls => grip.classList.remove(cls));
+    GRIP_VISIBLE_CLASSES.forEach(cls => grip.classList.add(cls));
   });
 };
 
-const forceGripActive = (grip: Element, expanded: { width: string; height: string }): void => {
+const forceGripActive = (grip: Element): void => {
   grip.setAttribute('data-blok-table-grip-visible', '');
-  grip.classList.remove('opacity-0', 'pointer-events-none', 'bg-gray-300');
-  grip.classList.add('opacity-100', 'pointer-events-auto', 'bg-blue-500', 'text-white');
+  GRIP_IDLE_CLASSES.forEach(cls => grip.classList.remove(cls));
+  GRIP_ACTIVE_CLASSES.forEach(cls => grip.classList.add(cls));
 
   const el = grip as HTMLElement;
+  const isCol = grip.hasAttribute('data-blok-table-grip-col');
 
-  el.style.width = expanded.width;
-  el.style.height = expanded.height;
+  if (isCol) {
+    el.style.height = `${GRIP_HOVER_SIZE}px`;
+  } else {
+    el.style.width = `${GRIP_HOVER_SIZE}px`;
+  }
 
   const svg = grip.querySelector('svg');
 
@@ -701,7 +707,7 @@ export const ColumnGripActive: Story = {
       const grip = canvasElement.querySelector(GRIP_COL_SELECTOR);
 
       if (grip) {
-        forceGripActive(grip, { width: '24px', height: '16px' });
+        forceGripActive(grip);
       }
 
       await waitFor(
@@ -749,7 +755,7 @@ export const RowGripActive: Story = {
       const grip = canvasElement.querySelector(GRIP_ROW_SELECTOR);
 
       if (grip) {
-        forceGripActive(grip, { width: '16px', height: '20px' });
+        forceGripActive(grip);
       }
 
       await waitFor(