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

package/src/tools/table/index.ts

@@ -71,6 +71,7 @@ const WRAPPER_EDIT_CLASSES = [
   'after:left-0',
   'after:right-0',
   'after:h-10',
+  'after:pointer-events-none',
 ];
 
 /**
@@ -405,9 +406,7 @@ export class Table implements BlockTool {
     applyCellColors(gridEl, this.model.snapshot().content);
 
     if (this.isNewTable) {
-      const firstEditable = gridEl.querySelector<HTMLElement>('[contenteditable="true"]');
-
-      firstEditable?.focus();
+      this.cellSelection?.selectRange({ minRow: 0, maxRow: 0, minCol: 0, maxCol: 0 });
     }
   }
 

package/src/tools/table/table-add-controls.ts

@@ -79,6 +79,7 @@ export class TableAddControls {
   private dragState: DragState | null = null;
 
   private boundMouseMove: (e: MouseEvent) => void;
+  private boundDocumentMouseMove: (e: MouseEvent) => void;
   private boundMouseLeave: () => void;
   private boundAddRowClick: () => void;
   private boundAddColClick: () => void;
@@ -110,6 +111,7 @@ export class TableAddControls {
     this.onDragEnd = options.onDragEnd;
     this.getNewColumnWidth = options.getNewColumnWidth;
     this.boundMouseMove = this.handleMouseMove.bind(this);
+    this.boundDocumentMouseMove = this.handleDocumentMouseMove.bind(this);
     this.boundMouseLeave = this.handleMouseLeave.bind(this);
     this.boundPointerMove = this.handlePointerMove.bind(this);
     this.boundPointerUp = this.handlePointerUp.bind(this);
@@ -126,10 +128,10 @@ export class TableAddControls {
 
     this.wrapper.addEventListener('mousemove', this.boundMouseMove);
     this.wrapper.addEventListener('mouseleave', this.boundMouseLeave);
+    document.addEventListener('mousemove', this.boundDocumentMouseMove);
 
     this.addRowBtn.addEventListener('pointerdown', this.boundRowPointerDown);
     this.addColBtn.addEventListener('pointerdown', this.boundColPointerDown);
-
   }
 
   /**
@@ -212,6 +214,7 @@ export class TableAddControls {
   public destroy(): void {
     this.wrapper.removeEventListener('mousemove', this.boundMouseMove);
     this.wrapper.removeEventListener('mouseleave', this.boundMouseLeave);
+    document.removeEventListener('mousemove', this.boundDocumentMouseMove);
     this.addRowBtn.removeEventListener('pointerdown', this.boundRowPointerDown);
     this.addColBtn.removeEventListener('pointerdown', this.boundColPointerDown);
 
@@ -399,6 +402,31 @@ export class TableAddControls {
     this.scheduleHideCol();
   }
 
+  /**
+   * Document-level mousemove handler.
+   * Catches mouse movements outside the wrapper (e.g. in the ::after
+   * pseudo-element zone below the grid, which has pointer-events-none).
+   * Only delegates to handleMouseMove when the cursor is within the
+   * proximity zone around the grid to avoid unnecessary work.
+   */
+  private handleDocumentMouseMove(e: MouseEvent): void {
+    if (this.wrapper.contains(e.target as Node)) {
+      return;
+    }
+
+    const gridRect = this.grid.getBoundingClientRect();
+    const margin = PROXIMITY_PX;
+    const nearGrid =
+      e.clientX >= gridRect.left - margin &&
+      e.clientX <= gridRect.right + margin &&
+      e.clientY >= gridRect.top - margin &&
+      e.clientY <= gridRect.bottom + margin;
+
+    if (nearGrid) {
+      this.handleMouseMove(e);
+    }
+  }
+
   private showRow(): void {
     this.clearRowTimeout();
 

package/src/tools/table/table-cell-blocks.ts

@@ -86,6 +86,9 @@ export class TableCellBlocks {
   /** Events deferred during structural operations, replayed or discarded afterward. */
   private deferredEvents: Array<unknown> = [];
 
+  /** When true, handleBlockMutation skips claiming so exitTableForward's new block stays outside the grid. */
+  private isExitingTable = false;
+
   constructor(options: TableCellBlocksOptions) {
     this.api = options.api;
     this.gridElement = options.gridElement;
@@ -140,6 +143,12 @@ export class TableCellBlocks {
 
       return;
     }
+
+    // ArrowDown at last row -> exit table
+    if (event.key === 'ArrowDown' && position.row === this.getRowCount() - 1) {
+      event.preventDefault();
+      this.exitTableForward();
+    }
   }
 
   /**
@@ -161,7 +170,12 @@ export class TableCellBlocks {
 
     if (nextRow < this.getRowCount()) {
       this.navigateToCell({ row: nextRow, col: 0 });
+
+      return;
     }
+
+    // At the very last cell — exit the table by focusing or creating a block below
+    this.exitTableForward();
   }
 
   /**
@@ -182,7 +196,82 @@ export class TableCellBlocks {
 
     if (prevRow >= 0) {
       this.navigateToCell({ row: prevRow, col: this.getColumnCount() - 1 }, true);
+
+      return;
     }
+
+    // At the very first cell — exit the table by focusing the block above
+    this.exitTableBackward();
+  }
+
+  /**
+   * Exit the table by focusing the first block after it, or creating one if none exists.
+   */
+  private exitTableForward(): void {
+    const tableIndex = this.api.blocks.getBlockIndex(this.tableBlockId);
+
+    if (tableIndex === undefined) {
+      return;
+    }
+
+    const blockAfterTable = this.findFirstBlockAfterTable(tableIndex);
+
+    if (blockAfterTable !== null) {
+      this.api.caret.setToBlock(blockAfterTable.id, 'start');
+
+      return;
+    }
+
+    /**
+     * No block after the table — create a new default block.
+     * Set isExitingTable so handleBlockMutation does not claim the new block
+     * into a cell (the block-added event fires synchronously during insert).
+     */
+    this.isExitingTable = true;
+
+    try {
+      const totalBlocks = this.api.blocks.getBlocksCount();
+      const newBlock = this.api.blocks.insert(undefined, {}, {}, totalBlocks, true);
+
+      this.api.caret.setToBlock(newBlock.id, 'start');
+    } finally {
+      this.isExitingTable = false;
+    }
+  }
+
+  /**
+   * Exit the table backward by focusing the block before the table.
+   * If no block exists before the table, do nothing.
+   */
+  private exitTableBackward(): void {
+    const tableIndex = this.api.blocks.getBlockIndex(this.tableBlockId);
+
+    if (tableIndex === undefined || tableIndex === 0) {
+      return;
+    }
+
+    // The block immediately before the table in the flat array
+    const blockBefore = this.api.blocks.getBlockByIndex(tableIndex - 1);
+
+    if (blockBefore) {
+      this.api.caret.setToBlock(blockBefore.id, 'end');
+    }
+  }
+
+  /**
+   * Scan the flat block array starting after the table block, skipping all blocks
+   * whose holder is inside the table grid, and return the first non-child block.
+   * Returns null if no such block exists.
+   */
+  private findFirstBlockAfterTable(tableIndex: number): { id: string } | null {
+    const totalBlocks = this.api.blocks.getBlocksCount();
+    const candidates = Array.from({ length: totalBlocks - tableIndex - 1 }, (_, offset) =>
+      this.api.blocks.getBlockByIndex(tableIndex + 1 + offset)
+    );
+
+    return candidates.find(block =>
+      block !== null && block !== undefined && !this.gridElement.contains(block.holder)
+    ) ?? null;
   }
 
   /**
@@ -481,6 +570,10 @@ export class TableCellBlocks {
       return;
     }
 
+    if (this.isExitingTable) {
+      return;
+    }
+
     if (!this.isBlockMutationEvent(data)) {
       return;
     }

package/src/tools/toggle/constants.ts

@@ -32,12 +32,12 @@ export const TOGGLE_WRAPPER_STYLES = 'flex items-start';
 /**
  * Styles for the toggle arrow button
  */
-export const ARROW_STYLES = 'flex-shrink-0 w-6 h-6 flex items-center justify-center cursor-pointer select-none rounded hover:bg-black/5 transition-all duration-200 ease-in-out mt-px';
+export const ARROW_STYLES = 'flex-shrink-0 w-6 h-6 flex items-center justify-center cursor-pointer select-none rounded hover:bg-black/5 transition-all duration-200 ease-in-out mt-px focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none';
 
 /**
  * SVG icon for the toggle arrow
  */
-export const ARROW_ICON = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 2.5L8.5 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+export const ARROW_ICON = '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 2.5L8.5 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
 /**
  * Data attributes specific to the toggle tool

package/src/tools/toggle/dom-builder.ts

@@ -70,20 +70,40 @@ export const buildToggleItem = (context: ToggleDOMBuilderContext): ToggleBuildRe
   return { wrapper, arrowElement, contentElement };
 };
 
+/**
+ * Options for building arrow element
+ */
+export interface BuildArrowOptions {
+  /** Set contentEditable="false" on the arrow (used by Header to prevent caret entering arrow) */
+  contentEditableFalse?: boolean;
+}
+
 /**
  * Build the arrow element for toggling open/closed state.
  *
  * @param isOpen - Whether the toggle is currently open
  * @param onArrowClick - Callback when arrow is clicked
+ * @param options - Optional configuration
  * @returns The arrow element
  */
-const buildArrow = (isOpen: boolean, onArrowClick: () => void): HTMLElement => {
-  const arrow = document.createElement('div');
+export const buildArrow = (
+  isOpen: boolean,
+  onArrowClick: () => void,
+  options: BuildArrowOptions = {}
+): HTMLElement => {
+  const arrow = document.createElement('span');
   arrow.className = ARROW_STYLES;
   arrow.setAttribute(TOGGLE_ATTR.toggleArrow, '');
+  arrow.setAttribute(DATA_ATTR.mutationFree, 'true');
   arrow.setAttribute('role', 'button');
-  arrow.setAttribute('tabindex', '-1');
-  arrow.setAttribute('aria-label', 'Toggle');
+  arrow.setAttribute('tabindex', '0');
+  arrow.setAttribute('aria-label', isOpen ? 'Collapse' : 'Expand');
+  arrow.setAttribute('aria-expanded', String(isOpen));
+
+  if (options.contentEditableFalse === true) {
+    arrow.contentEditable = 'false';
+  }
+
   arrow.innerHTML = ARROW_ICON;
 
   if (isOpen) {
@@ -95,6 +115,14 @@ const buildArrow = (isOpen: boolean, onArrowClick: () => void): HTMLElement => {
     onArrowClick();
   });
 
+  arrow.addEventListener('keydown', (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      onArrowClick();
+    }
+  });
+
   return arrow;
 };
 

package/src/tools/toggle/index.ts

@@ -13,6 +13,7 @@ import type {
   ConversionConfig,
   ToolSanitizerConfig,
   PasteConfig,
+  PasteEvent,
 } from '../../../types';
 import type { MenuConfig } from '../../../types/tools/menu-config';
 
@@ -115,6 +116,26 @@ export class ToggleItem implements BlockTool {
     );
   }
 
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if (!('data' in detail)) {
+      return;
+    }
+
+    const content = detail.data as HTMLElement;
+    const summary = content.querySelector('summary');
+    const text = summary !== null ? summary.innerHTML : content.innerHTML;
+
+    this._data = { text };
+
+    const contentEl = this.getContentElement();
+
+    if (contentEl !== null) {
+      contentEl.innerHTML = text;
+    }
+  }
+
   public setData(newData: ToggleItemData): boolean {
     const result = setToggleItemData(
       this._data,
@@ -124,6 +145,8 @@ export class ToggleItem implements BlockTool {
 
     this._data = result.newData;
 
+    this.updateChildrenVisibility();
+
     return result.inPlace;
   }
 
@@ -191,6 +214,8 @@ export class ToggleItem implements BlockTool {
 
     if (event.key === 'Backspace') {
       void this.handleBackspace(event);
+
+      return;
     }
   }
 
@@ -225,10 +250,6 @@ export class ToggleItem implements BlockTool {
     }
   }
 
-  public static get shortcut(): string {
-    return 'CMD+ALT+7';
-  }
-
   public static get toolbox(): ToolboxConfig {
     return {
       icon: IconToggleList,
@@ -236,6 +257,7 @@ export class ToggleItem implements BlockTool {
       titleKey: 'toggleList',
       name: TOOL_NAME,
       searchTerms: ['toggle', 'collapse', 'expand', 'accordion'],
+      shortcut: '>',
     };
   }
 

package/src/tools/toggle/toggle-keyboard.ts

@@ -28,10 +28,13 @@ export interface ToggleKeyboardContext {
 /**
  * Handle Enter key - sync content from DOM and split the block at the caret position.
  *
+ * When the toggle is open and the caret is at the end of the content,
+ * creates a child paragraph inside the toggle instead of splitting.
+ *
  * @param context - The toggle keyboard context
  */
 export const handleToggleEnter = async (context: ToggleKeyboardContext): Promise<void> => {
-  const { api, blockId, data, getContentElement, syncContentFromDOM } = context;
+  const { api, blockId, data, getContentElement, syncContentFromDOM, isOpen } = context;
 
   syncContentFromDOM();
 
@@ -51,6 +54,18 @@ export const handleToggleEnter = async (context: ToggleKeyboardContext): Promise
 
   const currentBlockIndex = api.blocks.getBlockIndex(blockId) ?? api.blocks.getCurrentBlockIndex();
 
+  /**
+   * When toggle is open and caret is at the end (no content after caret),
+   * create a child paragraph inside the toggle rather than a sibling toggle.
+   */
+  if (isOpen && afterContent === '') {
+    const newBlock = api.blocks.insert('paragraph', { text: '' }, {}, currentBlockIndex + 1, true);
+
+    api.blocks.setBlockParent(newBlock.id, blockId);
+
+    return;
+  }
+
   api.blocks.splitBlock(
     blockId,
     { text: beforeContent },
@@ -76,7 +91,9 @@ export const handleToggleBackspace = async (
   context: ToggleKeyboardContext,
   event: KeyboardEvent
 ): Promise<void> => {
-  const { api, blockId, data, getContentElement } = context;
+  const { api, blockId, data, getContentElement, syncContentFromDOM } = context;
+
+  syncContentFromDOM();
 
   if (blockId === undefined) {
     return;

package/src/tools/toggle/toggle-lifecycle.ts

@@ -56,6 +56,7 @@ export const updateArrowState = (arrowEl: HTMLElement, wrapper: HTMLElement, isO
 
   style.transform = isOpen ? 'rotate(90deg)' : '';
   arrowEl.setAttribute('aria-label', isOpen ? 'Collapse' : 'Expand');
+  arrowEl.setAttribute('aria-expanded', String(isOpen));
   wrapper.setAttribute(TOGGLE_ATTR.toggleOpen, String(isOpen));
 };
 

package/src/tools/toggle/toggle-shortcuts.ts

@@ -1,16 +1,17 @@
 /**
  * Toggle Shortcuts - Manages the collapse/expand-all keyboard shortcut (CMD+ALT+T).
  *
- * Iterates all blocks in the editor and toggles all toggle blocks:
- * - If any toggle is collapsed, expands all
- * - If all toggles are expanded, collapses all
+ * Iterates all blocks in the editor and toggles all collapsible blocks
+ * (toggle blocks and toggle headings):
+ * - If any collapsible block is collapsed, expands all
+ * - If all collapsible blocks are expanded, collapses all
  */
 
 import type { API } from '../../../types';
 
 import { Shortcuts } from '../../components/utils/shortcuts';
 
-import { TOGGLE_ATTR, TOOL_NAME } from './constants';
+import { TOGGLE_ATTR } from './constants';
 
 const COLLAPSE_EXPAND_ALL_SHORTCUT = 'CMD+ALT+T';
 
@@ -29,12 +30,16 @@ export class ToggleShortcuts {
 
   /**
    * Register the CMD+ALT+T shortcut on the document.
+   * Pre-clears any stale registration to handle cases where a previous editor
+   * instance was not fully destroyed (e.g. Storybook story switching).
    */
   public register(): void {
     if (this.registered) {
       return;
     }
 
+    Shortcuts.remove(document, COLLAPSE_EXPAND_ALL_SHORTCUT);
+
     Shortcuts.add({
       name: COLLAPSE_EXPAND_ALL_SHORTCUT,
       on: document,
@@ -73,8 +78,8 @@ export class ToggleShortcuts {
   }
 
   /**
-   * Toggle all toggle blocks.
-   * If any toggle is collapsed, expand all. If all are expanded, collapse all.
+   * Toggle all collapsible blocks (toggle blocks and toggle headings).
+   * If any is collapsed, expand all. If all are expanded, collapse all.
    */
   private toggleAll(): void {
     const blockCount = this.api.blocks.getBlocksCount();
@@ -83,12 +88,17 @@ export class ToggleShortcuts {
     for (const i of Array.from({ length: blockCount }, (_, idx) => idx)) {
       const block = this.api.blocks.getBlockByIndex(i);
 
-      if (block === undefined || block.name !== TOOL_NAME) {
+      if (block === undefined) {
         continue;
       }
 
       const toggleWrapper = block.holder.querySelector(`[${TOGGLE_ATTR.toggleOpen}]`);
-      const isOpen = toggleWrapper?.getAttribute(TOGGLE_ATTR.toggleOpen) === 'true';
+
+      if (toggleWrapper === null) {
+        continue;
+      }
+
+      const isOpen = toggleWrapper.getAttribute(TOGGLE_ATTR.toggleOpen) === 'true';
 
       toggleBlocks.push({ call: (method: string) => block.call(method), isOpen });
     }

package/types/utils/popover/popover.d.ts

@@ -78,6 +78,14 @@ export interface PopoverParams {
    * Use 'auto' to fit content width.
    */
   width?: string;
+
+  /**
+   * Optional element whose left edge should be used for horizontal positioning.
+   * When provided, the popover's left position uses this element's left coordinate
+   * instead of the trigger's left. Useful for aligning the toolbox popover to the
+   * block content area rather than to the plus button.
+   */
+  leftAlignElement?: HTMLElement;
 }
 
 

package/dist/chunks/index-CZmRzRIX.mjs

@@ -1,78 +0,0 @@
-import { ae as s, t as f } from "./inline-tool-convert-CvFW2iie.mjs";
-const a = {
-  wrapper: s(
-    "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: s(
-    "relative w-[230px] mt-[15px] py-[13px] px-4",
-    "bg-white shadow-notify rounded-[5px]",
-    "text-sm leading-[1.4em] wrap-break-word",
-    '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"
-  ),
-  crossBtn: s(
-    "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',
-    "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",
-  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: s(
-    "max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]",
-    "text-[13px] text-[#656b7c] outline-hidden",
-    "placeholder:text-[#656b7c] focus:placeholder:text-[rgba(101,107,124,0.3)]"
-  ),
-  successNotification: s(
-    "bg-[#fafffe]!",
-    "before:bg-[#41ffb1]!"
-  ),
-  errorNotification: s(
-    "bg-[#fffbfb]!",
-    "before:bg-[#fb5d5d]!"
-  )
-}, d = (e) => {
-  const t = document.createElement("DIV"), o = document.createElement("DIV"), r = e.message, n = e.style, c = () => n === "success" ? a.successNotification : n === "error" ? a.errorNotification : "";
-  return t.className = f(a.notification, c()), n ? t.setAttribute("data-blok-testid", `notification-${n}`) : t.setAttribute("data-blok-testid", "notification"), t.innerHTML = r, o.className = a.crossBtn, o.setAttribute("data-blok-testid", "notification-cross"), o.addEventListener("click", () => t.remove()), t.appendChild(o), t;
-}, p = (e) => {
-  const t = d(e), o = document.createElement("div"), r = document.createElement("button"), n = document.createElement("button"), c = t.querySelector('[data-blok-testid="notification-cross"]'), i = e.cancelHandler, l = e.okHandler;
-  return o.className = a.btnsWrapper, o.setAttribute("data-blok-testid", "notification-buttons-wrapper"), r.innerHTML = e.okText || "Confirm", n.innerHTML = e.cancelText || "Cancel", r.className = s(a.btn, a.okBtn), n.className = s(a.btn, a.cancelBtn), r.setAttribute("data-blok-testid", "notification-confirm-button"), n.setAttribute("data-blok-testid", "notification-cancel-button"), i && typeof i == "function" && n.addEventListener("click", i), i && typeof i == "function" && c && c.addEventListener("click", i), l && typeof l == "function" && r.addEventListener("click", l), r.addEventListener("click", () => t.remove()), n.addEventListener("click", () => t.remove()), o.appendChild(r), o.appendChild(n), t.appendChild(o), t;
-}, b = (e) => {
-  const t = d(e), o = document.createElement("div"), r = document.createElement("button"), n = document.createElement("input"), c = t.querySelector('[data-blok-testid="notification-cross"]'), i = e.cancelHandler, l = e.okHandler;
-  return o.className = a.btnsWrapper, r.innerHTML = e.okText || "Ok", r.className = s(a.btn, a.okBtn), n.className = a.input, n.setAttribute("data-blok-testid", "notification-input"), e.placeholder && n.setAttribute("placeholder", e.placeholder), e.default && (n.value = e.default), e.inputType && (n.type = e.inputType), i && typeof i == "function" && c && c.addEventListener("click", i), l && typeof l == "function" && r.addEventListener("click", () => {
-    l(n.value);
-  }), r.addEventListener("click", () => t.remove()), o.appendChild(n), o.appendChild(r), t.appendChild(o), t;
-}, u = () => {
-  const e = document.createElement("DIV");
-  return e.className = a.wrapper, e.setAttribute("data-blok-testid", "notifier-container"), e;
-}, m = 8e3, x = () => {
-  const e = document.querySelector('[data-blok-testid="notifier-container"]');
-  if (e)
-    return e;
-  const t = u();
-  return document.body.appendChild(t), t;
-}, k = (e) => {
-  if (!e.message)
-    return;
-  const t = x(), o = e.time || m, r = (() => {
-    const n = e.type;
-    if (n === "confirm")
-      return p(e);
-    if (n === "prompt")
-      return b(e);
-    const c = d(e);
-    return window.setTimeout(() => {
-      c.remove();
-    }, o), c;
-  })();
-  t && r && (t.appendChild(r), r.className = `${r.className} animate-notify-bounce-in`, r.setAttribute("data-blok-bounce-in", "true"));
-}, h = {
-  show: k
-};
-export {
-  h as Notifier,
-  k as show
-};