@jackuait/blok 0.7.0-beta.4 → 0.7.0

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

@@ -262,6 +262,17 @@ export class YjsManager extends Module {
     this.documentStore.transact(fn, 'local');
   }
 
+  /**
+   * Execute Yjs operations without adding them to the undo history.
+   * Uses a non-tracked origin so the UndoManager ignores these changes.
+   * Use this for auto-repair operations (e.g. ensuring empty cells have a block)
+   * that should never be undoable by the user.
+   * @param fn - Function containing Yjs operations to execute
+   */
+  public transactWithoutCapture(fn: () => void): void {
+    this.documentStore.transactWithoutCapture(fn);
+  }
+
   // ========== Public API: Smart Grouping ==========
 
   /**

package/src/components/shared/color-picker.ts

@@ -64,7 +64,7 @@ export interface ColorPickerHandle {
 /**
  * Base Tailwind classes shared by tab buttons
  */
-const TAB_BASE_CLASSES = 'flex-1 py-1.5 text-xs text-center rounded-md cursor-pointer border-none transition-colors';
+const TAB_BASE_CLASSES = 'flex-1 py-1.5 text-xs text-center rounded-md cursor-pointer border-none outline-hidden transition-colors';
 
 /**
  * Neutral background for text-mode swatches so they render as visible buttons
@@ -139,7 +139,7 @@ export function createColorPicker(options: ColorPickerOptions): ColorPickerHandl
 
       swatch.setAttribute('data-blok-testid', `${testIdPrefix}-swatch-${preset.name}`);
       swatch.className = twMerge(
-        'w-8 h-8 rounded-md cursor-pointer border-none',
+        'w-8 h-8 rounded-md cursor-pointer border-none outline-hidden',
         'flex items-center justify-center text-sm font-semibold',
         'transition-shadow ring-inset hover:ring-2 hover:ring-black/10',
         isActive && 'ring-2 ring-black/30'
@@ -169,7 +169,7 @@ export function createColorPicker(options: ColorPickerOptions): ColorPickerHandl
   defaultBtn.setAttribute('data-blok-testid', `${testIdPrefix}-default-btn`);
   defaultBtn.className = twMerge(
     'w-full py-1.5 text-xs text-center rounded-md cursor-pointer',
-    'bg-transparent border-none hover:bg-item-hover-bg',
+    'bg-transparent border-none outline-hidden hover:bg-item-hover-bg',
     'mt-0.5 transition-colors'
   );
   defaultBtn.textContent = i18n.t('tools.marker.default');

package/src/components/tools/block.ts

@@ -53,22 +53,12 @@ export class BlockToolAdapter extends BaseToolAdapter<ToolType.Block, IBlockTool
    * @param readOnly - True if Blok is in read-only mode
    */
   public create(data: BlockToolData, block: BlockAPI, readOnly: boolean): IBlockTool {
-    const toolboxEntries = this.toolbox;
-
-    /**
-     * Inject merged toolbox entries into config so tools can use them in renderSettings().
-     * This allows tools like Header to show the same options in block settings as in the toolbox.
-     */
-    const configWithToolbox = toolboxEntries !== undefined
-      ? { ...this.settings, _toolboxEntries: toolboxEntries }
-      : this.settings;
-
     return new this.constructable({
       data,
       block,
       readOnly,
       api: this.api,
-      config: configWithToolbox,
+      config: this.settings,
     }) as IBlockTool;
   }
 

package/src/components/ui/toolbox.ts

@@ -587,6 +587,8 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       return;
     }
 
+    const currentBlockParentId: string | null = currentBlock.parentId ?? null;
+
     /**
      * 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.
@@ -605,14 +607,33 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       ? Object.assign(await this.api.blocks.composeBlockData(toolName), blockDataOverrides)
       : undefined;
 
-    const newBlock = this.api.blocks.insert(
-      toolName,
-      blockData,
-      undefined,
-      index,
-      undefined,
-      shouldReplaceBlock
-    );
+    /**
+     * When replacing a child block (e.g. inside a toggle), the parent-clear,
+     * insert, and parent-restore must be a single undo entry. Wrap them in
+     * a transaction so undo/redo treats the conversion atomically.
+     */
+    const performInsert = (): BlockAPI => {
+      if (shouldReplaceBlock && currentBlockParentId !== null) {
+        this.api.blocks.setBlockParent(currentBlock.id, null);
+      }
+
+      const inserted = this.api.blocks.insert(
+        toolName,
+        blockData,
+        undefined,
+        index,
+        undefined,
+        shouldReplaceBlock
+      );
+
+      if (currentBlockParentId !== null) {
+        this.api.blocks.setBlockParent(inserted.id, currentBlockParentId);
+      }
+
+      return inserted;
+    };
+
+    const newBlock = this.insertWithTransaction(performInsert, currentBlockParentId);
 
     this.api.caret.setToBlock(index);
 
@@ -627,6 +648,29 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.api.toolbar.close({ setExplicitlyClosed: false });
   }
 
+  /**
+   * Runs a block-insert callback inside a transaction when the block has a parent,
+   * so that parent-clear + insert + parent-restore form a single undo entry.
+   * When there is no parent (or transact is unavailable), runs the callback directly.
+   *
+   * @param fn - synchronous callback that performs the insert and returns the new BlockAPI
+   * @param parentId - the current block's parentId, or null if none
+   * @returns the BlockAPI returned by fn
+   */
+  private insertWithTransaction(fn: () => BlockAPI, parentId: string | null): BlockAPI {
+    const result: { block: BlockAPI | undefined } = { block: undefined };
+
+    if (parentId !== null && this.api.blocks.transact !== undefined) {
+      this.api.blocks.transact(() => {
+        result.block = fn();
+      });
+    } else {
+      result.block = fn();
+    }
+
+    return result.block as BlockAPI;
+  }
+
   /**
    * Starts listening to input events on the current block for inline slash search.
    * When the user types after "/", the toolbox filters based on the typed text.

package/src/components/utils/blocks.ts

@@ -73,6 +73,22 @@ export const getConvertibleToolsForBlock = async (block: BlockAPI, allBlockTools
       return result;
     }
 
+    /**
+     * Collect all data property names that appear in any toolbox entry for this tool.
+     * This lets us compare toolbox items against the current block using ALL distinguishing
+     * properties, not just the ones in a single entry.
+     *
+     * Example: header tool has entries with { level } and { level, isToggleable }.
+     * The union of keys is { level, isToggleable }, so regular headings and toggle
+     * headings are correctly treated as different block variants.
+     */
+    const allToolboxDataKeys = new Set(
+      tool.toolbox
+        .map(item => item.data)
+        .filter((data): data is BlockToolData => data !== undefined)
+        .flatMap(data => Object.keys(data))
+    );
+
     /** Filter out invalid toolbox entries */
     const actualToolboxItems = tool.toolbox.filter((toolboxItem) => {
       /**
@@ -86,10 +102,22 @@ export const getConvertibleToolsForBlock = async (block: BlockAPI, allBlockTools
 
       /**
        * When a tool has several toolbox entries, we need to make sure we do not add
-       * toolbox item with the same data to the resulting array. This helps exclude duplicates
+       * toolbox item with the same data to the resulting array. This helps exclude duplicates.
+       *
+       * We compare ALL distinguishing data properties (union of keys across all toolbox entries)
+       * to correctly differentiate variants like regular heading vs toggle heading.
        */
-      if (hasToolboxData && toolboxItem.data !== undefined && isSameBlockData(toolboxItem.data, blockData)) {
-        return false;
+      if (hasToolboxData && toolboxItem.data !== undefined) {
+        const wouldProduceSameBlock = [...allToolboxDataKeys].every(key => {
+          const toolboxValue = toolboxItem.data !== undefined ? toolboxItem.data[key] : undefined;
+          const blockValue = blockData[key];
+
+          return equals(toolboxValue, blockValue);
+        });
+
+        if (wouldProduceSameBlock) {
+          return false;
+        }
       }
 
       if (!hasToolboxData && tool.name === block.name) {
@@ -99,10 +127,12 @@ export const getConvertibleToolsForBlock = async (block: BlockAPI, allBlockTools
       return true;
     });
 
-    result.push({
-      ...tool,
-      toolbox: actualToolboxItems,
-    } as BlockToolAdapter);
+    if (actualToolboxItems.length > 0) {
+      result.push({
+        ...tool,
+        toolbox: actualToolboxItems,
+      } as BlockToolAdapter);
+    }
 
     return result;
   }, [] as BlockToolAdapter[]);

package/src/components/utils/mutations.ts

@@ -7,9 +7,9 @@ export const isMutationBelongsToElement = (mutationRecord: MutationRecord, eleme
   const { type, target, addedNodes, removedNodes } = mutationRecord;
 
   /**
-   * Skip own technical mutations, for example, data-blok-empty attribute changes
+   * Skip own technical mutations, for example, data-blok-empty or data-blok-toggle-open attribute changes
    */
-  if (mutationRecord.type === 'attributes' && mutationRecord.attributeName === 'data-blok-empty') {
+  if (mutationRecord.type === 'attributes' && (mutationRecord.attributeName === 'data-blok-empty' || mutationRecord.attributeName === 'data-blok-toggle-open')) {
     return false;
   }
 

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

@@ -38,7 +38,7 @@ export const CSS = {
     '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 last:ml-2.5',
+  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]',
   input: twJoin(

package/src/components/utils/placeholder.ts

@@ -119,8 +119,10 @@ const handleEmptyElement = (element: HTMLElement): void => {
 
 /**
  * Set up placeholder behavior for a contenteditable element.
- * Adds focus and input event listeners to handle caret positioning
- * when the element is empty.
+ * Adds a focus event listener to position the caret at the start
+ * when the element is empty. Does NOT handle caret positioning on
+ * input events — doing so would race with the browser's own editing
+ * model and destroy content mid-typing (e.g. "Hello world" → "He").
  *
  * @param element - The contenteditable element
  * @param placeholder - Optional placeholder text to set
@@ -134,10 +136,7 @@ export const setupPlaceholder = (
   // Always set the attribute, even if empty (for consistency and testing)
   element.setAttribute(attributeName, placeholder ?? '');
 
-  const handler = (): void => handleEmptyElement(element);
-
-  element.addEventListener('focus', handler);
-  element.addEventListener('input', handler);
+  element.addEventListener('focus', () => handleEmptyElement(element));
 };
 
 /**

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

@@ -4,5 +4,5 @@
 export const css = {
   root: 'flex items-center mb-2 mt-1',
   text: 'text-lg font-semibold text-text-primary',
-  backButton: 'border-0 bg-transparent w-9 h-9 text-text-primary cursor-pointer [&_svg]:block [&_svg]:w-7 [&_svg]:h-7',
+  backButton: 'border-0 bg-transparent w-9 h-9 text-text-primary cursor-pointer outline-hidden [&_svg]:block [&_svg]:w-7 [&_svg]:h-7',
 };

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-[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: '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 disabled state
@@ -21,7 +21,7 @@ export const css = {
   /**
    * Icon container styles
    */
-  icon: 'flex items-center justify-center w-[26px] h-[26px] shrink-0 rounded-lg [&_svg]:w-icon [&_svg]:h-icon',
+  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',
 
   /**
    * Focused state class for DomIterator/Flipper keyboard navigation.
@@ -37,7 +37,7 @@ export const cssInline = {
   /**
    * Item in inline context - more compact styling
    */
-  item: 'rounded-sm p-1',
+  item: 'rounded p-1',
 };
 
 /**
@@ -47,5 +47,5 @@ export const cssNestedInline = {
   /**
    * Nested item - back to desktop popover styling
    */
-  item: 'rounded-md p-[3px] mobile:p-1',
+  item: 'rounded p-[3px] mobile:p-1',
 };

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 whitespace-nowrap text-sm font-medium leading-5'
-        : 'mr-auto whitespace-nowrap text-sm font-medium leading-5';
+        ? 'grow whitespace-nowrap text-[13px] font-medium leading-5'
+        : 'mr-auto whitespace-nowrap text-[13px] 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 shrink-0 flex items-center whitespace-nowrap pl-20 text-[11px] font-medium tracking-wide text-text-secondary/50';
+      secondaryEl.className = 'ml-auto shrink-0 flex items-center whitespace-nowrap pl-20 font-mono text-[13px] tracking-wide text-text-secondary/60';
       secondaryEl.setAttribute(DATA_ATTR.popoverItemSecondaryTitle, '');
       secondaryEl.setAttribute('data-blok-testid', 'popover-item-secondary-title');
       secondaryEl.textContent = params.secondaryLabel;
@@ -326,7 +326,7 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
-      !isInline && !isNestedInline && 'pl-2 pr-4',
+      !isInline && !isNestedInline && 'pl-2 pr-3',
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
@@ -342,8 +342,7 @@ export class PopoverItemDefault extends PopoverItem {
       isInline && 'w-auto h-auto [&_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 && 'bg-icon-bg',
-      iconWithGap && isInline && 'shadow-none bg-transparent mr-0!',
+      iconWithGap && isInline && 'shadow-none mr-0!',
       iconWithGap && isNestedInline && 'mr-2!',
       isWobbling && 'animate-wobble'
     );
@@ -355,6 +354,7 @@ export class PopoverItemDefault extends PopoverItem {
   private getChevronClass(isInline: boolean): string {
     return twMerge(
       css.icon,
+      'w-5 h-5 bg-transparent',
       isInline && 'rotate-90'
     );
   }

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

@@ -2,9 +2,9 @@
  * Tailwind CSS classes for popover separator component
  */
 export const css = {
-  container: 'py-1 px-[3px] transition-[opacity,max-height,padding] duration-150 max-h-4 overflow-hidden',
+  container: 'py-1.5 px-2 transition-[opacity,max-height,padding] duration-150 max-h-5 overflow-hidden',
   containerHidden: 'opacity-0 max-h-0! py-0!',
-  line: 'h-px w-full bg-popover-border',
+  line: 'h-px w-full bg-popover-border/60',
 };
 
 /**

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

@@ -2,7 +2,7 @@
  * CSS class names to be used in popover search input class
  */
 export const css = {
-  wrapper: 'bg-[#F8F8F8] border border-[rgba(226,226,229,0.20)] rounded-lg p-0.5 grid grid-cols-[auto_auto_1fr] grid-rows-[auto] transition-colors duration-150 focus-within:bg-white focus-within:border-[rgba(56,138,229,0.3)]',
+  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)]',
   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 placeholder:font-medium",
+  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",
 };

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

@@ -5,7 +5,7 @@ import { Listeners } from '../../../listeners';
 
 import { css } from './search-input.const';
 import type { SearchInputEventMap, SearchableItem } from './search-input.types';
-import { SearchInputEvent, matchesSearchQuery } from './search-input.types';
+import { SearchInputEvent, scoreSearchMatch } from './search-input.types';
 
 
 /**
@@ -167,17 +167,13 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
   }
 
   /**
-   * Returns list of found items for the current search query
+   * Returns list of found items for the current search query, sorted by relevance
    */
   private get foundItems(): SearchableItem[] {
-    return this.items.filter(item => this.checkItem(item));
-  }
-
-  /**
-   * Contains logic for checking whether passed item conforms the search query.
-   * @param item - item to be checked
-   */
-  private checkItem(item: SearchableItem): boolean {
-    return matchesSearchQuery(item, this.searchQuery);
+    return this.items
+      .map(item => ({ item, score: scoreSearchMatch(item, this.searchQuery) }))
+      .filter(({ score }) => score > 0)
+      .sort((a, b) => b.score - a.score)
+      .map(({ item }) => item);
   }
 }

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

@@ -18,24 +18,163 @@ export interface SearchableItem {
   searchTerms?: string[];
 }
 
+/**
+ * Standard Levenshtein distance using single-row optimization.
+ * @param a - first string
+ * @param b - second string
+ * @returns edit distance between a and b
+ */
+const levenshteinDistance = (a: string, b: string): number => {
+  if (a.length === 0) {
+    return b.length;
+  }
+  if (b.length === 0) {
+    return a.length;
+  }
+
+  /**
+   * Two-row DP approach: prevRow holds distances for the previous character of `a`,
+   * currRow is computed for the current character, then they swap.
+   */
+  const prevRow = Array.from({ length: b.length + 1 }, (_, i) => i);
+  const currRow = new Array<number>(b.length + 1);
+
+  for (const [idx, char] of [...a].entries()) {
+    currRow[0] = idx + 1;
+
+    for (const [jIdx, bChar] of [...b].entries()) {
+      const j = jIdx + 1;
+      const cost = char === bChar ? 0 : 1;
+
+      currRow[j] = Math.min(
+        prevRow[j] + 1,        // deletion
+        currRow[j - 1] + 1,    // insertion
+        prevRow[j - 1] + cost   // substitution
+      );
+    }
+
+    /** Copy currRow into prevRow for the next iteration */
+    prevRow.splice(0, prevRow.length, ...currRow);
+  }
+
+  return prevRow[b.length];
+};
+
+/**
+ * Checks if query characters appear in order in target (subsequence match).
+ * @param target - string to search in
+ * @param query - characters to find in order
+ * @returns true if query is a subsequence of target
+ */
+const isSubsequence = (target: string, query: string): boolean => {
+  const matched = [...target].reduce(
+    (qi, char) => (qi < query.length && char === query[qi] ? qi + 1 : qi),
+    0
+  );
+
+  return matched === query.length;
+};
+
+/**
+ * Checks if query characters match at word boundaries in target.
+ * Word boundaries are: start of string, after space, hyphen, or underscore.
+ * @param target - string to search in
+ * @param query - characters to match at word boundaries
+ * @returns true if each query char matches a word-boundary character in order
+ */
+const matchesWordBoundaries = (target: string, query: string): boolean => {
+  const matched = [...target].reduce(
+    (qi, char, ti) => {
+      const isWordBoundary = ti === 0 || target[ti - 1] === ' ' || target[ti - 1] === '-' || target[ti - 1] === '_';
+
+      return qi < query.length && isWordBoundary && char === query[qi] ? qi + 1 : qi;
+    },
+    0
+  );
+
+  return matched === query.length;
+};
+
+/**
+ * Scores how well a single string matches a lowercased query.
+ * @param target - string to score against (already lowercased)
+ * @param lowerQuery - search query (already lowercased)
+ * @returns score: 100 (exact) > 90 (prefix) > 75 (substring) > 55 (word-boundary) > 35 (subsequence) > 15 (typo) > 0
+ */
+const scoreString = (target: string, lowerQuery: string): number => {
+  if (target === lowerQuery) {
+    return 100;
+  }
+  if (target.startsWith(lowerQuery)) {
+    return 90;
+  }
+  if (target.includes(lowerQuery)) {
+    return 75;
+  }
+  if (lowerQuery.length >= 2 && matchesWordBoundaries(target, lowerQuery)) {
+    return 55;
+  }
+  if (lowerQuery.length >= 2 && isSubsequence(target, lowerQuery)) {
+    return 35;
+  }
+  if (lowerQuery.length >= 3) {
+    const maxDist = Math.floor(lowerQuery.length / 3);
+    const dist = levenshteinDistance(target, lowerQuery);
+
+    if (dist <= maxDist) {
+      return 15;
+    }
+  }
+
+  return 0;
+};
+
+/**
+ * Scores how well an item matches a search query.
+ * Returns the best score across title, englishTitle, and searchTerms.
+ * @param item - item to score
+ * @param query - search query (case-insensitive)
+ * @returns score from 0 (no match) to 100 (exact match). Empty query returns 100.
+ */
+export const scoreSearchMatch = (item: SearchableItem, query: string): number => {
+  if (query === '') {
+    return 100;
+  }
+
+  const lowerQuery = query.toLowerCase();
+  const candidates: string[] = [];
+
+  if (item.title !== undefined) {
+    candidates.push(item.title.toLowerCase());
+  }
+  if (item.englishTitle !== undefined) {
+    candidates.push(item.englishTitle.toLowerCase());
+  }
+  if (item.searchTerms !== undefined) {
+    for (const term of item.searchTerms) {
+      candidates.push(term.toLowerCase());
+    }
+  }
+
+  const best = candidates.reduce((max, candidate) => {
+    const score = scoreString(candidate, lowerQuery);
+
+    return score > max ? score : max;
+  }, 0);
+
+  return best;
+};
+
 /**
  * Checks if an item matches a search query.
+ * Uses fuzzy matching: exact, prefix, substring, subsequence, and typo-tolerant (Levenshtein).
  * Matches against: displayed title, English title, and search term aliases.
  * @param item - item to check
  * @param query - search query (case-insensitive)
  * @returns true if the item matches the query
  */
 export const matchesSearchQuery = (item: SearchableItem, query: string): boolean => {
-  const lowerQuery = query.toLowerCase();
-  const title = item.title?.toLowerCase() ?? '';
-  const englishTitle = item.englishTitle?.toLowerCase() ?? '';
-  const searchTerms = item.searchTerms ?? [];
-
-  return (
-    title.includes(lowerQuery) ||
-    englishTitle.includes(lowerQuery) ||
-    searchTerms.some(term => term.toLowerCase().includes(lowerQuery))
-  );
+  return scoreSearchMatch(item, query) > 0;
 };
 
 /**

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

@@ -452,7 +452,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     // Set CSS variables
     popover.style.setProperty('--width', this.params.width ?? 'auto');
     popover.style.setProperty('--item-padding', '4px');
-    popover.style.setProperty('--item-height', 'calc(1.25rem + 2 * var(--item-padding))');
+    popover.style.setProperty('--item-height', 'calc(1.75rem + 2 * var(--item-padding))');
     popover.style.setProperty('--popover-top', 'calc(100% + 0.5rem)');
     popover.style.setProperty('--popover-left', '0');
     popover.style.setProperty('--nested-popover-overlap', '0.25rem');
@@ -461,13 +461,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.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-sm leading-5 font-medium whitespace-nowrap overflow-hidden text-ellipsis text-gray-text px-3 py-3 text-center',
+      'cursor-default text-[13px] leading-5 font-normal whitespace-nowrap overflow-hidden text-ellipsis text-gray-text/70 px-3 py-4 text-center',
       'hidden'
     );
     nothingFoundMessage.setAttribute('data-blok-testid', 'popover-nothing-found');