@jackuait/blok 0.8.2 → 0.8.3-beta.2

package/src/components/modules/toolbar/plus-button.ts

@@ -166,11 +166,21 @@ export class PlusButtonHandler {
       return;
     }
 
-    // Determine target block: reuse empty/slash paragraph, or create new one
+    // Determine target block: reuse any empty block, or create a new one
     const hoveredBlock = this.hoveredBlockInternal;
     const isParagraph = hoveredBlock?.name === 'paragraph';
     const startsWithSlash = isParagraph && hoveredBlock.pluginsContent.textContent?.startsWith('/');
-    const isEmptyParagraph = isParagraph && hoveredBlock.isEmpty;
+
+    // Reuse the hovered block if it's empty (any type, not just paragraphs).
+    // If hoveredBlock is not empty (e.g. a table), check if the focused block
+    // is empty and nested inside it (e.g. an empty paragraph in a table cell).
+    const currentBlock = BlockManager.currentBlock ?? null;
+    const hoveredIsEmpty = hoveredBlock !== null && hoveredBlock.isEmpty;
+    const nestedCurrentBlockIsEmpty = !hoveredIsEmpty && currentBlock !== null
+      && currentBlock !== hoveredBlock && currentBlock.isEmpty
+      && hoveredBlock !== null && hoveredBlock.holder.contains(currentBlock.holder);
+    const emptyBlockToReuse: Block | null =
+      (hoveredIsEmpty && hoveredBlock) || (nestedCurrentBlockIsEmpty && currentBlock) || null;
 
     // Calculate insert index based on direction
     const hoveredBlockIndex = hoveredBlock !== null
@@ -191,15 +201,17 @@ export class PlusButtonHandler {
       : 0;
     const insertIndex = baseInsertIndex + (firstNonNestedOffset === -1 ? blocksAfterInsert.length : firstNonNestedOffset);
 
-    const targetBlock = isEmptyParagraph || startsWithSlash
+    // startsWithSlash is only true when isParagraph is true, which requires
+    // hoveredBlock to be non-null. TypeScript narrows this correctly.
+    const targetBlock: Block = startsWithSlash
       ? hoveredBlock
-      : BlockManager.insertDefaultBlockAtIndex(insertIndex, true);
+      : (emptyBlockToReuse ?? BlockManager.insertDefaultBlockAtIndex(insertIndex, true));
 
     // The DOM insertion may place the new block's holder inside a nested
     // container (e.g. a table cell) because the previous block in the array
     // is inside another block's DOM. Move the holder to be a sibling after
     // the hovered block so it becomes a top-level block.
-    if (targetBlock !== hoveredBlock && isNested(targetBlock)) {
+    if (targetBlock !== hoveredBlock && emptyBlockToReuse === null && isNested(targetBlock)) {
       hoveredBlock?.holder.after(targetBlock.holder);
     }
 

package/src/components/modules/uiControllers/controllers/blockHover.ts

@@ -67,12 +67,39 @@ export class BlockHoverController extends Controller {
       const closestBlockWrapper = (event.target as Element | null)?.closest('[data-blok-testid="block-wrapper"]');
 
       /**
-       * If the hovered block is inside a table cell, resolve to the table block instead.
-       * Without this, the toolbar hides itself for nested cell blocks and the table's
+       * When the cursor is in the gap between children inside a [data-blok-child-toolbar]
+       * container, the closest block-wrapper is the parent — not a child.
+       * Skip the event so the toolbar stays on the previous child block.
+       */
+      const targetChildToolbar = (event.target as Element | null)?.closest('[data-blok-child-toolbar]');
+
+      if (targetChildToolbar && closestBlockWrapper && !targetChildToolbar.contains(closestBlockWrapper)) {
+        return;
+      }
+
+      /**
+       * If the hovered block is inside a table cell or toggle-children container,
+       * resolve to the parent block instead.
+       * Without this, the toolbar targets nested child blocks and the parent's
        * block tune settings become inaccessible.
+       *
+       * Containers with [data-blok-child-toolbar] opt out of parent resolution,
+       * allowing non-first children to have independent toolbars (e.g. callout blocks).
+       * The first child still resolves to parent so the container's own controls display.
        */
-      const hoveredBlockElement = closestBlockWrapper?.closest('[data-blok-table-cell-blocks]')
-        ? closestBlockWrapper.closest('[data-blok-table-cell-blocks]')?.closest('[data-blok-testid="block-wrapper"]') ?? null
+      const alwaysResolveContainer = closestBlockWrapper?.closest(
+        '[data-blok-table-cell-blocks], [data-blok-toggle-children]:not([data-blok-child-toolbar])'
+      );
+      const childToolbarContainer = !alwaysResolveContainer
+        ? closestBlockWrapper?.closest('[data-blok-child-toolbar]') ?? null
+        : null;
+      const isFirstChildOfContainer = childToolbarContainer !== null
+        && childToolbarContainer.querySelector(':scope > [data-blok-testid="block-wrapper"]') === closestBlockWrapper;
+
+      const nestedContainer = alwaysResolveContainer
+        ?? (isFirstChildOfContainer ? childToolbarContainer : null);
+      const hoveredBlockElement = nestedContainer
+        ? nestedContainer.closest('[data-blok-testid="block-wrapper"]') ?? null
         : closestBlockWrapper;
 
       /**
@@ -158,13 +185,13 @@ export class BlockHoverController extends Controller {
     }
 
     /**
-     * Filter out blocks whose holders are inside a table cell container.
-     * Cell blocks should not participate in nearest-block detection —
-     * the parent table block should be found instead.
-     * This matches the direct-hit path which also resolves cell blocks to their parent table block.
+     * Filter out blocks whose holders are inside a table cell or toggle-children container.
+     * Nested child blocks should not participate in nearest-block detection —
+     * the parent block should be found instead.
+     * This matches the direct-hit path which also resolves nested blocks to their parent.
      */
     const topLevelBlocks = blocks.filter(block =>
-      block.holder.closest('[data-blok-table-cell-blocks]') === null
+      block.holder.closest('[data-blok-table-cell-blocks], [data-blok-toggle-children]') === null
     );
 
     if (topLevelBlocks.length === 0) {

package/src/components/modules/uiControllers/handlers/touch.ts

@@ -71,15 +71,27 @@ export const createRedactorTouchHandler = (
      */
     if (!deps.Blok.ReadOnly.isEnabled && !deps.Blok.Toolbar.contains(initialTarget)) {
       /**
-       * When the clicked node is inside a table cell, resolve to the parent table block
-       * so moveAndOpen receives the table block (not undefined / the inner cell paragraph).
-       * Without this, moveAndOpen falls back to currentBlock (the cell paragraph), detects
-       * it's inside a table cell, and hides the plus button and settings toggler.
+       * When the clicked node is inside a table cell or toggle-children container,
+       * resolve to the parent block so moveAndOpen receives the correct parent block.
+       * Without this, moveAndOpen falls back to currentBlock (the nested child),
+       * and the parent's block tune settings become inaccessible.
+       *
+       * For child-toolbar containers (e.g. callout), the first child still resolves
+       * to the parent so the container's own controls (settings, drag) are accessible.
+       * Non-first children keep their own toolbar via the block argument being undefined.
        */
-      const tableCellContainer = clickedNode.closest?.('[data-blok-table-cell-blocks]');
-      const tableBlockWrapper = tableCellContainer?.closest('[data-blok-testid="block-wrapper"]');
-      const resolvedBlock = tableBlockWrapper
-        ? deps.Blok.BlockManager.getBlockByChildNode(tableBlockWrapper)
+      const alwaysResolve = clickedNode.closest?.('[data-blok-table-cell-blocks], [data-blok-toggle-children]:not([data-blok-child-toolbar])');
+      const childToolbar = !alwaysResolve
+        ? clickedNode.closest?.('[data-blok-child-toolbar]') ?? null
+        : null;
+      const closestBlockWrapper = clickedNode.closest?.('[data-blok-testid="block-wrapper"]') ?? null;
+      const isFirstChild = childToolbar !== null
+        && closestBlockWrapper !== null
+        && childToolbar.querySelector(':scope > [data-blok-testid="block-wrapper"]') === closestBlockWrapper;
+      const nestedContainer = alwaysResolve ?? (isFirstChild ? childToolbar : null);
+      const parentBlockWrapper = nestedContainer?.closest('[data-blok-testid="block-wrapper"]');
+      const resolvedBlock = parentBlockWrapper
+        ? deps.Blok.BlockManager.getBlockByChildNode(parentBlockWrapper)
         : undefined;
 
       deps.Blok.Toolbar.moveAndOpen(resolvedBlock, clickedNode);

package/src/components/tools/factory.ts

@@ -114,6 +114,10 @@ export class ToolsFactory {
       getEnglishTranslation: (key: string): string => {
         return baseApi.i18n.getEnglishTranslation(key);
       },
+
+      getLocale: (): string => {
+        return baseApi.i18n.getLocale();
+      },
     };
 
     return {

package/src/components/ui/toolbox.ts

@@ -226,6 +226,28 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     }
   }
 
+  /**
+   * Applies or clears callout background color on the popover's search input.
+   * When the toolbox opens inside a callout with a custom background, the search
+   * input container should match the callout background instead of its default.
+   *
+   * @param color - the callout background CSS value, or null to clear
+   */
+  public setCalloutBackground(color: string | null): void {
+    const popoverEl = this.popover?.getElement();
+
+    if (!popoverEl) {
+      return;
+    }
+
+    if (color) {
+      popoverEl.style.setProperty('--blok-search-input-bg', `light-dark(color-mix(in srgb, ${color} 70%, white), color-mix(in srgb, ${color} 85%, white))`);
+    } else {
+      popoverEl.style.removeProperty('--blok-search-input-bg');
+      popoverEl.style.removeProperty('--blok-search-input-border');
+    }
+  }
+
   /**
    * Returns root block settings element
    */
@@ -323,7 +345,9 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
      * instead of at the trigger element (which is outside the table).
      * Must be called after show() so the popover is in the DOM.
      */
-    if (this.isInsideTableCell && this.popover instanceof PopoverDesktop) {
+    const triggerHidden = this.triggerElement?.getBoundingClientRect().height === 0;
+
+    if ((this.isInsideTableCell || triggerHidden) && this.popover instanceof PopoverDesktop) {
       const caretRect = SelectionUtils.rect;
 
       this.popover.updatePosition(caretRect);
@@ -629,8 +653,13 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     /**
      * Check if the block contains only slash search text (e.g., "/head").
      * If so, treat it as empty and replace it with the new block.
+     *
+     * When opened without slash (via plus button), any text in the block
+     * is a search query, not user content — always replace.
      */
-    const shouldReplaceBlock = currentBlock.isEmpty || this.isBlockSlashSearchOnly(currentBlock.holder);
+    const shouldReplaceBlock = currentBlock.isEmpty
+      || this.isBlockSlashSearchOnly(currentBlock.holder)
+      || !this.openedWithSlash;
 
     /**
      * On mobile version, we see the Plus Button even near non-empty blocks,
@@ -721,7 +750,13 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     }
 
     this.currentBlockForSearch = currentBlock.holder;
-    this.currentContentEditable = this.currentBlockForSearch.querySelector('[contenteditable="true"]');
+
+    const activeEl = document.activeElement;
+
+    this.currentContentEditable = activeEl instanceof HTMLElement && activeEl.isContentEditable && this.currentBlockForSearch.contains(activeEl)
+      ? activeEl
+      : this.currentBlockForSearch.querySelector('[contenteditable="true"]');
+
     if (this.currentContentEditable instanceof HTMLElement) {
       this.currentContentEditable.setAttribute(DATA_ATTR.slashSearch, this.i18nLabels.slashSearchPlaceholder);
     }

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

@@ -10,6 +10,7 @@ import type { SearchableItem } from './components/search-input';
 import { SearchInput, SearchInputEvent, scoreSearchMatch } from './components/search-input';
 import { PopoverAbstract } from './popover-abstract';
 import { CSSVariables, css as popoverCss } from './popover.const';
+import { resolvePosition } from './popover-position';
 import { twMerge } from '../tw';
 
 import type { PopoverParams } from '@/types/utils/popover/popover';
@@ -224,12 +225,14 @@ export class PopoverDesktop extends PopoverAbstract {
     }
 
     if (this.trigger) {
-      const { top, left } = this.calculatePosition();
+      const { top, left, openTop, openLeft } = this.calculatePosition();
       this.nodes.popover.style.position = 'absolute';
       this.nodes.popover.style.top = `${top}px`;
       this.nodes.popover.style.left = `${left}px`;
       this.nodes.popover.style.setProperty(CSSVariables.PopoverTop, '0px');
       this.nodes.popover.style.setProperty(CSSVariables.PopoverLeft, '0px');
+      this.setOpenTop(openTop);
+      this.setOpenLeft(openLeft);
     }
 
     const measuredSize = this.size;
@@ -243,16 +246,27 @@ export class PopoverDesktop extends PopoverAbstract {
       this.nodes.popover.style.setProperty('--width', width + 'px');
     }
 
-    if (!this.trigger && !this.shouldOpenBottom) {
-      this.setOpenTop(true);
-      // Apply open-top positioning (moved from popover.css)
-      this.nodes.popover.style.setProperty(CSSVariables.PopoverTop, 'calc(-1 * (0.5rem + var(--popover-height)))');
-    }
+    if (!this.trigger) {
+      const containerRect = this.nodes.popoverContainer.getBoundingClientRect();
+      // offset: 0 because the visual gap is handled by CSS calc (0.5rem), not pixel positioning
+      const { openTop, openLeft } = resolvePosition({
+        anchor: containerRect,
+        popoverSize: measuredSize,
+        scopeBounds: this.scopeElement.getBoundingClientRect(),
+        viewportSize: { width: window.innerWidth, height: window.innerHeight },
+        scrollOffset: { x: window.scrollX, y: window.scrollY },
+        offset: 0,
+      });
+
+      if (openTop) {
+        this.setOpenTop(true);
+        this.nodes.popover.style.setProperty(CSSVariables.PopoverTop, 'calc(-1 * (0.5rem + var(--popover-height)))');
+      }
 
-    if (!this.trigger && !this.shouldOpenRight) {
-      this.setOpenLeft(true);
-      // Apply open-left positioning (moved from popover.css)
-      this.nodes.popover.style.setProperty(CSSVariables.PopoverLeft, 'calc(-1 * var(--width) + 100%)');
+      if (openLeft) {
+        this.setOpenLeft(true);
+        this.nodes.popover.style.setProperty(CSSVariables.PopoverLeft, 'calc(-1 * var(--width) + 100%)');
+      }
     }
 
     super.show();
@@ -294,45 +308,34 @@ export class PopoverDesktop extends PopoverAbstract {
 
     // Recalculate and apply position if already shown
     if (this.nodes.popover.hasAttribute('data-blok-popover-opened')) {
-      const { top, left } = this.calculatePosition();
+      const { top, left, openTop, openLeft } = this.calculatePosition();
 
       this.nodes.popover.style.top = `${top}px`;
       this.nodes.popover.style.left = `${left}px`;
+      this.setOpenTop(openTop);
+      this.setOpenLeft(openLeft);
     }
   }
 
   /**
    * Calculates position for the popover
    */
-  private calculatePosition(): { top: number; left: number } {
-    // Use provided position if available, otherwise fall back to trigger element
+  private calculatePosition(): { top: number; left: number; openTop: boolean; openLeft: boolean } {
     const rect = this.params.position ?? this.trigger?.getBoundingClientRect();
 
     if (!rect) {
-      return {
-        top: 0,
-        left: 0,
-      };
+      return { top: 0, left: 0, openTop: false, openLeft: false };
     }
 
-    const popoverRect = this.size;
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    const offset = 8;
-
-    const initialTop = rect.bottom + offset + window.scrollY;
-    const shouldFlipTop = (rect.bottom + offset + popoverRect.height > windowHeight + window.scrollY) &&
-      (rect.top - offset - popoverRect.height > window.scrollY);
-    const top = shouldFlipTop ? rect.top - offset - popoverRect.height + window.scrollY : initialTop;
-
-    const initialLeft = (this.leftAlignElement?.getBoundingClientRect().left ?? rect.left) + window.scrollX;
-    const shouldFlipLeft = initialLeft + popoverRect.width > windowWidth + window.scrollX;
-    const left = shouldFlipLeft ? Math.max(0, rect.right - popoverRect.width + window.scrollX) : initialLeft;
-
-    return {
-      top,
-      left,
-    };
+    return resolvePosition({
+      anchor: rect,
+      popoverSize: this.size,
+      scopeBounds: this.scopeElement.getBoundingClientRect(),
+      viewportSize: { width: window.innerWidth, height: window.innerHeight },
+      scrollOffset: { x: window.scrollX, y: window.scrollY },
+      offset: 8,
+      leftAlignRect: this.leftAlignElement?.getBoundingClientRect(),
+    });
   }
 
   /**
@@ -647,42 +650,6 @@ export class PopoverDesktop extends PopoverAbstract {
     nestedContainer.style.top = 'calc(var(--trigger-item-top) - var(--popover-height) / 2 + var(--item-height) / 2)';
   }
 
-  /**
-   * Checks if popover should be opened bottom.
-   * It should happen when there is enough space below or not enough space above
-   */
-  private get shouldOpenBottom(): boolean {
-    if (this.nodes.popover === undefined || this.nodes.popover === null) {
-      return false;
-    }
-    const popoverRect = this.nodes.popoverContainer.getBoundingClientRect();
-    const scopeElementRect = this.scopeElement.getBoundingClientRect();
-    const popoverHeight = this.size.height;
-    const popoverPotentialBottomEdge = popoverRect.top + popoverHeight;
-    const popoverPotentialTopEdge = popoverRect.top - popoverHeight;
-    const bottomEdgeForComparison = Math.min(window.innerHeight, scopeElementRect.bottom);
-
-    return popoverPotentialTopEdge < scopeElementRect.top || popoverPotentialBottomEdge <= bottomEdgeForComparison;
-  }
-
-  /**
-   * Checks if popover should be opened left.
-   * It should happen when there is enough space in the right or not enough space in the left
-   */
-  private get shouldOpenRight(): boolean {
-    if (this.nodes.popover === undefined || this.nodes.popover === null) {
-      return false;
-    }
-
-    const popoverRect = this.nodes.popover.getBoundingClientRect();
-    const scopeElementRect = this.scopeElement.getBoundingClientRect();
-    const popoverWidth = this.size.width;
-    const popoverPotentialRightEdge = popoverRect.right + popoverWidth;
-    const popoverPotentialLeftEdge = popoverRect.left - popoverWidth;
-    const rightEdgeForComparison = Math.min(window.innerWidth, scopeElementRect.right);
-
-    return popoverPotentialLeftEdge < scopeElementRect.left || popoverPotentialRightEdge <= rightEdgeForComparison;
-  }
 
   /**
    * Helps to calculate size of popover that is only resolved when popover is displayed on screen.
@@ -726,6 +693,13 @@ export class PopoverDesktop extends PopoverAbstract {
     return size;
   }
 
+  /**
+   * Invalidates the cached popover size so the next access to `size` re-measures.
+   */
+  public invalidateSizeCache(): void {
+    this._size = undefined;
+  }
+
   /**
    * Returns list of elements available for keyboard navigation.
    */
@@ -1047,6 +1021,9 @@ export class PopoverDesktop extends PopoverAbstract {
         item.toggleHidden(isHidden);
       });
 
+    // Invalidate size cache since item visibility changed
+    this._size = undefined;
+
     // Reorder top-level DOM elements to reflect ranking
     if (!isEmptyQuery && matchingTopLevel.length > 0) {
       this.reorderItemsByRank(matchingTopLevel);

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

@@ -0,0 +1,105 @@
+/**
+ * Input for popover position resolution.
+ * All rects/sizes are in viewport coordinates unless noted.
+ */
+export interface PositionInput {
+  /** Bounding rect of the anchor element (trigger or popover container) */
+  anchor: DOMRect;
+  /** Measured popover dimensions */
+  popoverSize: { width: number; height: number };
+  /** Bounding rect of the scope element that constrains the popover */
+  scopeBounds: DOMRect;
+  /** Viewport dimensions */
+  viewportSize: { width: number; height: number };
+  /** Current scroll offset */
+  scrollOffset: { x: number; y: number };
+  /** Gap between anchor and popover edge (default 8) */
+  offset?: number;
+  /** Element rect whose left edge overrides anchor's left for horizontal alignment */
+  leftAlignRect?: DOMRect;
+}
+
+export interface ResolvedPosition {
+  /** Final top coordinate in document (scroll-adjusted) coordinates */
+  top: number;
+  /** Final left coordinate in document (scroll-adjusted) coordinates */
+  left: number;
+  /** True if popover opens above the anchor */
+  openTop: boolean;
+  /** True if popover opens to the left of the anchor */
+  openLeft: boolean;
+}
+
+/**
+ * Determines whether the popover should flip to the alternate side.
+ * Returns true when the popover doesn't fit on the preferred side and the alternate side has more (or equal) space.
+ */
+function shouldFlip(popoverDimension: number, spaceOnPreferred: number, spaceOnAlternate: number): boolean {
+  if (popoverDimension <= spaceOnPreferred) {
+    return false;
+  }
+
+  if (popoverDimension <= spaceOnAlternate) {
+    return true;
+  }
+
+  return spaceOnAlternate > spaceOnPreferred;
+}
+
+/**
+ * Pure function that resolves popover position.
+ * Picks the direction with more available space when the popover doesn't fit on the preferred side.
+ * Clamps to scope/viewport boundaries on both edges.
+ */
+export function resolvePosition(input: PositionInput): ResolvedPosition {
+  const {
+    anchor,
+    popoverSize,
+    scopeBounds,
+    viewportSize,
+    scrollOffset,
+    offset = 8,
+    leftAlignRect,
+  } = input;
+
+  // --- Vertical ---
+  const boundaryBottom = Math.min(viewportSize.height, scopeBounds.bottom);
+  const boundaryTop = Math.max(0, scopeBounds.top);
+
+  const spaceBelow = boundaryBottom - anchor.bottom - offset;
+  const spaceAbove = anchor.top - offset - boundaryTop;
+
+  const openTop = shouldFlip(popoverSize.height, spaceBelow, spaceAbove);
+
+  const rawTop = openTop
+    ? anchor.top - offset - popoverSize.height + scrollOffset.y
+    : anchor.bottom + offset + scrollOffset.y;
+
+  // Clamp: ensure popover doesn't overflow above top boundary
+  const top = rawTop < boundaryTop + scrollOffset.y
+    ? boundaryTop + scrollOffset.y
+    : rawTop;
+
+  // --- Horizontal ---
+  const boundaryRight = Math.min(viewportSize.width, scopeBounds.right);
+  const boundaryLeft = Math.max(0, scopeBounds.left);
+
+  const alignLeft = (leftAlignRect?.left ?? anchor.left) + scrollOffset.x;
+  const alignRight = anchor.right + scrollOffset.x;
+
+  const spaceRight = boundaryRight + scrollOffset.x - alignLeft;
+  const spaceLeft = alignRight - boundaryLeft - scrollOffset.x;
+
+  const openLeft = shouldFlip(popoverSize.width, spaceRight, spaceLeft);
+
+  const rawLeft = openLeft
+    ? Math.max(boundaryLeft + scrollOffset.x, anchor.right - popoverSize.width + scrollOffset.x)
+    : alignLeft;
+
+  // Clamp: ensure popover doesn't overflow right boundary
+  const left = rawLeft + popoverSize.width > boundaryRight + scrollOffset.x
+    ? Math.max(boundaryLeft + scrollOffset.x, boundaryRight + scrollOffset.x - popoverSize.width)
+    : rawLeft;
+
+  return { top, left, openTop, openLeft };
+}

package/src/stories/MarkerColors.stories.ts

@@ -496,7 +496,14 @@ export const PickerNoActiveSwatch: Story = {
           expect(swatches?.length).toBe(10);
 
           swatches?.forEach((swatch) => {
-            expect(swatch.className).not.toContain('ring-swatch-ring-hover');
+            // Default swatch correctly shows active ring when no color is set
+            if (swatch.getAttribute('data-blok-testid')?.endsWith('-default')) {
+              return;
+            }
+
+            // Use classList.contains for exact token match — className.includes
+            // would false-positive on the hover:ring-swatch-ring-hover variant
+            expect(swatch.classList.contains('ring-swatch-ring-hover')).toBe(false);
           });
         },
         TIMEOUT_ACTION