diff --git a/package.json b/package.json
index e44bd633e4..9276e163b8 100644
--- a/package.json
+++ b/package.json
@@ -16,48 +16,6 @@
   "engines": {
     "node": ">=10.0"
   },
-  "keywords": [
-    "collaborative",
-    "multiplayer",
-    "local-first",
-    "localfirst",
-    "crdt",
-    "rdt",
-    "ot",
-    "operational-transformation",
-    "replicated",
-    "sync",
-    "synchronization",
-    "distributed-state",
-    "marshaling",
-    "serializations",
-    "json-patch",
-    "json-binary",
-    "json-brand",
-    "json-cli",
-    "json-clone",
-    "json-crdt-patch",
-    "json-crdt-extensions",
-    "json-crdt-peritext-ui",
-    "json-crdt",
-    "json-equal",
-    "json-expression",
-    "json-hash",
-    "json-ot",
-    "json-pack",
-    "json-patch-multicore",
-    "json-patch-ot",
-    "json-patch",
-    "json-pointer",
-    "json-random",
-    "json-schema",
-    "json-size",
-    "json-stable",
-    "json-text",
-    "json-type",
-    "json-type-value",
-    "json-walk"
-  ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "typings": "lib/index.d.ts",
@@ -81,7 +39,7 @@
     "format": "biome format ./src",
     "format:fix": "biome format --write ./src",
     "lint": "biome lint ./src",
-    "lint:fix": "biome lint --apply ./src",
+    "lint:fix": "biome lint --write ./src",
     "clean": "npx rimraf@5.0.5 lib es6 es2019 es2020 esm typedocs coverage gh-pages yarn-error.log src/**/__bench__/node_modules src/**/__bench__/yarn-error.log",
     "build:es2020": "tsc --project tsconfig.build.json --module commonjs --target es2020 --outDir lib",
     "build:esm": "tsc --project tsconfig.build.json --module ESNext --target ESNEXT --outDir esm",
@@ -156,7 +114,7 @@
     "json-crdt-traces": "https://github.com/streamich/json-crdt-traces#ec825401dc05cbb74b9e0b3c4d6527399f54d54d",
     "json-logic-js": "^2.0.2",
     "nano-theme": "^1.4.3",
-    "nice-ui": "^1.25.0",
+    "nice-ui": "^1.28.0",
     "quill-delta": "^5.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -228,5 +186,47 @@
       "@semantic-release/npm",
       "@semantic-release/git"
     ]
-  }
+  },
+  "keywords": [
+    "collaborative",
+    "multiplayer",
+    "local-first",
+    "localfirst",
+    "crdt",
+    "rdt",
+    "ot",
+    "operational-transformation",
+    "replicated",
+    "sync",
+    "synchronization",
+    "distributed-state",
+    "marshaling",
+    "serializations",
+    "json-patch",
+    "json-binary",
+    "json-brand",
+    "json-cli",
+    "json-clone",
+    "json-crdt-patch",
+    "json-crdt-extensions",
+    "json-crdt-peritext-ui",
+    "json-crdt",
+    "json-equal",
+    "json-expression",
+    "json-hash",
+    "json-ot",
+    "json-pack",
+    "json-patch-multicore",
+    "json-patch-ot",
+    "json-patch",
+    "json-pointer",
+    "json-random",
+    "json-schema",
+    "json-size",
+    "json-stable",
+    "json-text",
+    "json-type",
+    "json-type-value",
+    "json-walk"
+  ]
 }
diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts
index 1738d5bbc7..5c36f219f4 100644
--- a/src/json-crdt-extensions/peritext/slice/constants.ts
+++ b/src/json-crdt-extensions/peritext/slice/constants.ts
@@ -69,6 +69,7 @@ export const enum SliceTypeCon {
   iaside = -25, // Inline <aside>
   iembed = -26, // inline embed (any media, dropdown, Google Docs-like chips: date, person, file, etc.)
   bookmark = -27, // UI for creating a link to this slice
+  overline = -28, // <span style="text-decoration: overline">
 }
 
 /**
@@ -131,6 +132,7 @@ export enum SliceTypeName {
   iaside = SliceTypeCon.iaside,
   iembed = SliceTypeCon.iembed,
   bookmark = SliceTypeCon.bookmark,
+  overline = SliceTypeCon.overline,
 }
 
 export enum SliceHeaderMask {
diff --git a/src/json-crdt-peritext-ui/dom/CursorController.ts b/src/json-crdt-peritext-ui/dom/CursorController.ts
index 7f231ce2a6..c6b48c0ea4 100644
--- a/src/json-crdt-peritext-ui/dom/CursorController.ts
+++ b/src/json-crdt-peritext-ui/dom/CursorController.ts
@@ -119,7 +119,7 @@ export class CursorController implements UiLifeCycles, Printable {
 
   public readonly focus = new ValueSyncStore<boolean>(false);
 
-  private readonly onFocus = (): void => {
+  private readonly onFocus = (event: Event): void => {
     this.focus.next(true);
   };
 
@@ -129,15 +129,16 @@ export class CursorController implements UiLifeCycles, Printable {
 
   private x = 0;
   private y = 0;
-  private mouseDown: boolean = false;
+  public readonly mouseDown = new ValueSyncStore<boolean>(false);
 
   private readonly onMouseDown = (ev: MouseEvent): void => {
+    if (!this.focus.value && this.opts.txt.editor.hasCursor()) return;
     const {clientX, clientY} = ev;
     this.x = clientX;
     this.y = clientY;
     switch (ev.detail) {
       case 1: {
-        this.mouseDown = false;
+        this.mouseDown.next(false);
         const at = this.posAtPoint(clientX, clientY);
         if (at === -1) return;
         this.selAnchor = at;
@@ -150,24 +151,24 @@ export class CursorController implements UiLifeCycles, Printable {
           ev.preventDefault();
           et.cursor({at, edge: 'new'});
         } else {
-          this.mouseDown = true;
+          this.mouseDown.next(true);
           ev.preventDefault();
           et.cursor({at});
         }
         break;
       }
       case 2:
-        this.mouseDown = false;
+        this.mouseDown.next(false);
         ev.preventDefault();
         this.opts.et.cursor({unit: 'word'});
         break;
       case 3:
-        this.mouseDown = false;
+        this.mouseDown.next(false);
         ev.preventDefault();
         this.opts.et.cursor({unit: 'block'});
         break;
       case 4:
-        this.mouseDown = false;
+        this.mouseDown.next(false);
         ev.preventDefault();
         this.opts.et.cursor({unit: 'all'});
         break;
@@ -175,7 +176,7 @@ export class CursorController implements UiLifeCycles, Printable {
   };
 
   private readonly onMouseMove = (ev: MouseEvent): void => {
-    if (!this.mouseDown) return;
+    if (!this.mouseDown.value) return;
     const at = this.selAnchor;
     if (at < 0) return;
     const {clientX, clientY} = ev;
@@ -190,7 +191,7 @@ export class CursorController implements UiLifeCycles, Printable {
   };
 
   private readonly onMouseUp = (ev: MouseEvent): void => {
-    this.mouseDown = false;
+    this.mouseDown.next(false);
   };
 
   private onKeyDown = (event: KeyboardEvent): void => {
@@ -242,6 +243,6 @@ export class CursorController implements UiLifeCycles, Printable {
   /** ----------------------------------------------------- {@link Printable} */
 
   public toString(tab?: string): string {
-    return `cursor { focus: ${this.focus.value}, x: ${this.x}, y: ${this.y}, mouseDown: ${this.mouseDown} }`;
+    return `cursor { focus: ${this.focus.value}, x: ${this.x}, y: ${this.y}, mouseDown: ${this.mouseDown.value} }`;
   }
 }
diff --git a/src/json-crdt-peritext-ui/dom/DomController.ts b/src/json-crdt-peritext-ui/dom/DomController.ts
index c2f40e3e92..c499d28068 100644
--- a/src/json-crdt-peritext-ui/dom/DomController.ts
+++ b/src/json-crdt-peritext-ui/dom/DomController.ts
@@ -6,14 +6,14 @@ import {KeyController} from '../dom/KeyController';
 import {CompositionController} from '../dom/CompositionController';
 import type {PeritextEventDefaults} from '../events/PeritextEventDefaults';
 import type {PeritextEventTarget} from '../events/PeritextEventTarget';
-import type {UiLifeCycles} from '../dom/types';
+import type {PeritextRenderingSurfaceApi, UiLifeCycles} from '../dom/types';
 
 export interface DomControllerOpts {
   source: HTMLElement;
   events: PeritextEventDefaults;
 }
 
-export class DomController implements UiLifeCycles, Printable {
+export class DomController implements UiLifeCycles, Printable, PeritextRenderingSurfaceApi {
   public readonly et: PeritextEventTarget;
   public readonly keys: KeyController;
   public readonly comp: CompositionController;
@@ -50,6 +50,12 @@ export class DomController implements UiLifeCycles, Printable {
     this.richText.stop();
   }
 
+  /** ----------------------------------- {@link PeritextRenderingSurfaceApi} */
+
+  public focus(): void {
+    this.opts.source.focus();
+  }
+
   /** ----------------------------------------------------- {@link Printable} */
 
   public toString(tab?: string): string {
diff --git a/src/json-crdt-peritext-ui/dom/types.ts b/src/json-crdt-peritext-ui/dom/types.ts
index 918702912d..dcd5ef2503 100644
--- a/src/json-crdt-peritext-ui/dom/types.ts
+++ b/src/json-crdt-peritext-ui/dom/types.ts
@@ -14,3 +14,10 @@ export interface UiLifeCyclesRender {
 }
 
 export type Rect = Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
+
+export interface PeritextRenderingSurfaceApi {
+  /**
+   * Focuses the rendering surface, so that it can receive keyboard input.
+   */
+  focus(): void;
+}
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index 5bc90ca28e..9261cabf98 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -12,11 +12,13 @@ export interface TopToolbarProps {
 }
 
 export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
-  const pending = useSyncStore(ctx.peritext.editor.pending);
+  const peritext = ctx.peritext;
+  const editor = peritext.editor;
+  const pending = useSyncStore(editor.pending);
 
   if (!ctx.dom) return null;
 
-  const [complete] = ctx.peritext.overlay.stat(ctx.peritext.editor.cursor);
+  const [complete] = editor.hasCursor() ? peritext.overlay.stat(editor.cursor) : [new Set()];
 
   const inlineGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
index f89f2a97be..93ef2d2537 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
@@ -1,18 +1,17 @@
-// biome-ignore lint: React is used for JSX
 import * as React from 'react';
 import {rule} from 'nano-theme';
-import {CaretToolbar} from './CaretToolbar';
-import type {CaretViewProps} from '../../react/cursor/CaretView';
+import {CaretToolbar} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
 import {useToolbarPlugin} from './context';
-import type {PeritextEventDetailMap} from '../../events/types';
+import {useSyncStore, useSyncStoreOpt, useTimeout} from '../../react/hooks';
+import {AfterTimeout} from '../../react/util/AfterTimeout';
+import type {CaretViewProps} from '../../react/cursor/CaretView';
 
-const height = 1.9;
+const height = 1.8;
 
 const blockClass = rule({
   pos: 'relative',
   w: '0px',
   h: '100%',
-  bg: 'black',
   va: 'bottom',
 });
 
@@ -23,9 +22,6 @@ const overClass = rule({
   isolation: 'isolate',
   us: 'none',
   transform: 'translateX(calc(-50% + 0px))',
-  // w: '1px',
-  // h: '1px',
-  // bd: '1px solid red',
 });
 
 export interface RenderCaretProps extends CaretViewProps {
@@ -34,17 +30,36 @@ export interface RenderCaretProps extends CaretViewProps {
 
 export const RenderCaret: React.FC<RenderCaretProps> = ({children}) => {
   const {toolbar} = useToolbarPlugin()!;
+  const showInlineToolbar = toolbar.showInlineToolbar;
+  const [showCaretToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
+  const focus = useSyncStoreOpt(toolbar.surface.dom?.cursor.focus) || false;
+  const doHideForCoolDown = toolbarVisibilityChangeTime + 500 > Date.now();
+  const enableAfterCoolDown = useTimeout(500, [doHideForCoolDown]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: showInlineToolbar.next do not need to memoize
+  const handleClose = React.useCallback(() => {
+    setTimeout(() => {
+      if (showInlineToolbar.value) showInlineToolbar.next([false, Date.now()]);
+    }, 5);
+  }, []);
+
+  let toolbarElement = (
+    <CaretToolbar disabled={!enableAfterCoolDown} menu={toolbar.getCaretMenu()} onPopupClose={handleClose} />
+  );
 
-  const lastEventIsCaretPositionChange =
-    toolbar.lastEvent?.type === 'cursor' &&
-    typeof (toolbar.lastEvent?.detail as PeritextEventDetailMap['cursor']).at === 'number';
+  if (doHideForCoolDown) {
+    toolbarElement = <AfterTimeout ms={500}>{toolbarElement}</AfterTimeout>;
+  }
 
   return (
     <span className={blockClass}>
       {children}
-      <span className={overClass} contentEditable={false}>
-        {lastEventIsCaretPositionChange && <CaretToolbar />}
-      </span>
+      {/* <span
+        className={overClass}
+        contentEditable={false}
+      >
+        {(showCaretToolbarValue && focus) && (toolbarElement)}
+      </span> */}
     </span>
   );
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderFocus.tsx
new file mode 100644
index 0000000000..bf32f94fa2
--- /dev/null
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderFocus.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {rule} from 'nano-theme';
+import {CaretToolbar} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
+import {useToolbarPlugin} from './context';
+import {useSyncStore, useSyncStoreOpt, useTimeout} from '../../react/hooks';
+import type {CaretViewProps} from '../../react/cursor/CaretView';
+
+const height = 1.8;
+
+const blockClass = rule({
+  pos: 'relative',
+  w: '0px',
+  h: '100%',
+  va: 'bottom',
+});
+
+const overClass = rule({
+  pos: 'absolute',
+  b: `${height}em`,
+  l: 0,
+  isolation: 'isolate',
+  us: 'none',
+  transform: 'translateX(calc(-50% + 0px))',
+});
+
+export interface RenderFocusProps extends CaretViewProps {
+  children: React.ReactNode;
+}
+
+export const RenderFocus: React.FC<RenderFocusProps> = ({children}) => {
+  const {toolbar} = useToolbarPlugin()!;
+  const showInlineToolbar = toolbar.showInlineToolbar;
+  const [showInlineToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
+  const enableAfterCoolDown = useTimeout(500, [toolbarVisibilityChangeTime]);
+  const isScrubbing = useSyncStoreOpt(toolbar.surface.dom?.cursor.mouseDown) || false;
+
+  const handleClose = React.useCallback(() => {
+    //   toolbar.surface.dom?.focus();
+    //   // if (showInlineToolbar.value) showInlineToolbar.next(false);
+  }, []);
+
+  let toolbarElement: React.ReactNode = null;
+
+  if (showInlineToolbarValue && !isScrubbing)
+    toolbarElement = (
+      <CaretToolbar disabled={!enableAfterCoolDown} menu={toolbar.getSelectionMenu()} onPopupClose={handleClose} />
+    );
+
+  return (
+    <span className={blockClass}>
+      {children}
+      <span className={overClass} contentEditable={false}>
+        {toolbarElement}
+      </span>
+    </span>
+  );
+};
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts b/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
index d36394952e..8d1043b77b 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
@@ -4,6 +4,7 @@ import {RenderPeritext} from './RenderPeritext';
 import {text} from '../minimal/text';
 import {RenderBlock} from './RenderBlock';
 import {RenderCaret} from './RenderCaret';
+import {RenderFocus} from './RenderFocus';
 import type {PeritextPlugin} from '../../react/types';
 
 const h = React.createElement;
@@ -19,4 +20,5 @@ export class ToolbarPlugin implements PeritextPlugin {
     h(RenderPeritext, {...props, children, surface});
 
   public readonly caret: PeritextPlugin['caret'] = (props, children) => h(RenderCaret, <any>props, children);
+  public readonly focus: PeritextPlugin['focus'] = (props, children) => h(RenderFocus, <any>props, children);
 }
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
index d1cec236f1..e087ed218d 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
@@ -12,10 +12,13 @@ export interface TopToolbarProps {
 }
 
 export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
-  const pending = useSyncStore(ctx.peritext.editor.pending);
+  const peritext = ctx.peritext;
+  const editor = peritext.editor;
+  const pending = useSyncStore(editor.pending);
 
   if (!ctx.dom) return null;
-  const [complete] = ctx.peritext.overlay.stat(ctx.peritext.editor.cursor);
+
+  const [complete] = editor.hasCursor() ? peritext.overlay.stat(editor.cursor) : [new Set()];
 
   const inlineGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state.ts b/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
deleted file mode 100644
index f716163125..0000000000
--- a/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {UiLifeCyclesRender} from '../../dom/types';
-import type {PeritextEventDetailMap} from '../../events/types';
-import type {PeritextSurfaceState} from '../../react';
-
-export class ToolbarState implements UiLifeCyclesRender {
-  public lastEvent: PeritextEventDetailMap['change']['ev'] | undefined = void 0;
-
-  constructor(public readonly surface: PeritextSurfaceState) {}
-
-  /** -------------------------------------------------- {@link UiLifeCyclesRender} */
-
-  public start() {
-    const et = this.surface.events.et;
-    const changeUnsubscribe = et.subscribe('change', (ev) => {
-      this.lastEvent = ev.detail.ev;
-    });
-    return () => {
-      changeUnsubscribe();
-    };
-  }
-}
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx
new file mode 100644
index 0000000000..70da3959e5
--- /dev/null
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx
@@ -0,0 +1,1048 @@
+import * as React from 'react';
+import {Sidetip} from 'nice-ui/lib/1-inline/Sidetip';
+import {Iconista} from 'nice-ui/lib/icons/Iconista';
+import {ValueSyncStore} from '../../../../util/events/sync-store';
+import {secondBrain} from './menus';
+import {Code} from 'nice-ui/lib/1-inline/Code';
+import {FontStyleButton} from 'nice-ui/lib/2-inline-block/FontStyleButton';
+import type {UiLifeCyclesRender} from '../../../dom/types';
+import type {PeritextEventDetailMap} from '../../../events/types';
+import type {PeritextSurfaceState} from '../../../react';
+import type {MenuItem} from '../types';
+import {CommonSliceType} from '../../../../json-crdt-extensions';
+
+export class ToolbarState implements UiLifeCyclesRender {
+  public lastEvent: PeritextEventDetailMap['change']['ev'] | undefined = void 0;
+  public lastEventTs: number = 0;
+  public readonly showInlineToolbar = new ValueSyncStore<[show: boolean, time: number]>([false, 0]);
+
+  constructor(public readonly surface: PeritextSurfaceState) {}
+
+  /** ------------------------------------------- {@link UiLifeCyclesRender} */
+
+  public start() {
+    const {surface, showInlineToolbar} = this;
+    const {dom, events} = surface;
+    const {et} = events;
+    const mouseDown = dom!.cursor.mouseDown;
+    const source = dom!.opts.source;
+
+    const changeUnsubscribe = et.subscribe('change', (ev) => {
+      const lastEvent = ev.detail.ev;
+      this.setLastEv(lastEvent);
+      // const lastEventIsCaretPositionChange =
+      //   lastEvent?.type === 'cursor' &&
+      //   typeof (lastEvent?.detail as PeritextEventDetailMap['cursor']).at === 'number';
+      // this.showInlineToolbar.next(this.doShowInlineToolbar());
+    });
+
+    const unsubscribeMouseDown = mouseDown?.subscribe(() => {
+      // if (mouseDown.value) showInlineToolbar.next(false);
+    });
+
+    const mouseDownListener = (event: MouseEvent) => {
+      // showInlineToolbar.next(false);
+      // if (showInlineToolbar.value[0])
+      //   showInlineToolbar.next([false, Date.now()]);
+    };
+    const mouseUpListener = (event: MouseEvent) => {
+      if (!showInlineToolbar.value[0]) showInlineToolbar.next([true, Date.now()]);
+    };
+
+    source?.addEventListener('mousedown', mouseDownListener);
+    source?.addEventListener('mouseup', mouseUpListener);
+
+    return () => {
+      changeUnsubscribe();
+      unsubscribeMouseDown?.();
+      source?.removeEventListener('mousedown', mouseDownListener);
+      source?.removeEventListener('mouseup', mouseUpListener);
+    };
+  }
+
+  private setLastEv(lastEvent: PeritextEventDetailMap['change']['ev']) {
+    this.lastEvent = lastEvent;
+    this.lastEventTs = Date.now();
+  }
+
+  private doShowInlineToolbar(): boolean {
+    const {surface, lastEvent} = this;
+    if (surface.dom!.cursor.mouseDown.value) return false;
+    if (!lastEvent) return false;
+    const lastEventIsCursorEvent = lastEvent?.type === 'cursor';
+    if (!lastEventIsCursorEvent) return false;
+    if (!surface.peritext.editor.cursorCount()) return false;
+    return true;
+  }
+
+  // -------------------------------------------------------------------- Menus
+
+  public readonly getFormattingMenu = (): MenuItem => {
+    const et = this.surface.events.et;
+    return {
+      name: 'Formatting',
+      expandChild: 0,
+      children: [
+        {
+          name: 'Common',
+          expand: 8,
+          children: [
+            {
+              name: 'Bold',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="font-bold" />,
+              // icon: () => <Iconista width={16} height={16} set="lucide" icon="bold" />,
+              right: () => <Sidetip small>⌘ B</Sidetip>,
+              keys: ['⌘', 'b'],
+              onSelect: () => {
+                et.format(CommonSliceType.b);
+              },
+            },
+            {
+              name: 'Italic',
+              // icon: () => <Iconista width={15} height={15} set="radix" icon="font-italic" />,
+              // icon: () => <Iconista width={16} height={16} set="lucide" icon="italic" />,
+              icon: () => <Iconista width={14} height={14} set="lucide" icon="italic" />,
+              right: () => <Sidetip small>⌘ I</Sidetip>,
+              keys: ['⌘', 'i'],
+              onSelect: () => {
+                et.format(CommonSliceType.i);
+              },
+            },
+            {
+              name: 'Underline',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="underline" />,
+              right: () => <Sidetip small>⌘ U</Sidetip>,
+              keys: ['⌘', 'u'],
+              onSelect: () => {
+                et.format(CommonSliceType.u);
+              },
+            },
+            {
+              name: 'Strikethrough',
+              // icon: () => <Iconista width={15} height={15} set="radix" icon="strikethrough" />,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="strikethrough" />,
+              onSelect: () => {
+                et.format(CommonSliceType.s);
+              },
+            },
+            {
+              name: 'Overline',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="overline" />,
+              onSelect: () => {
+                et.format(CommonSliceType.overline);
+              },
+            },
+            {
+              name: 'Highlight',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="highlight" />,
+              onSelect: () => {
+                et.format(CommonSliceType.mark);
+              },
+            },
+            {
+              name: 'Classified',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="lock-password" />,
+              onSelect: () => {
+                et.format(CommonSliceType.hidden);
+              },
+            },
+          ],
+        },
+        {
+          name: 'Technical separator',
+          sep: true,
+        },
+        {
+          name: 'Technical',
+          expand: 8,
+          children: [
+            {
+              name: 'Code',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="code" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Math',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="math-integral-x" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Superscript',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="superscript" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Subscript',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="subscript" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Keyboard key',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="keyboard" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Insertion',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="pencil-plus" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Deletion',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="pencil-minus" />,
+              onSelect: () => {},
+            },
+          ],
+        },
+        {
+          name: 'Artistic separator',
+          sep: true,
+        },
+        {
+          name: 'Artistic',
+          expand: 8,
+          children: [
+            {
+              name: 'Color',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="paintbrush" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Background',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="paint-bucket" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Border',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="border-left" />,
+              onSelect: () => {},
+            },
+          ],
+        },
+      ],
+    };
+  };
+
+  public readonly annotationsMenu = (): MenuItem => {
+    return {
+      name: 'Annotations',
+      expand: 2,
+      sepBefore: true,
+      children: [
+        {
+          name: 'Link',
+          // icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
+          icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
+          onSelect: () => {},
+        },
+        // {
+        //   name: 'Comment',
+        //   icon: () => <Iconista width={16} height={16} set="lineicons" icon="comment-1-text" />,
+        //   onSelect: () => {},
+        // },
+        // {
+        //   name: 'Bookmark',
+        //   icon: () => <Iconista width={16} height={16} set="lineicons" icon="flag-2" />,
+        //   onSelect: () => {},
+        // },
+        // {
+        //   name: 'Footnote',
+        //   icon: () => <Iconista width={16} height={16} set="lucide" icon="footprints" />,
+        //   onSelect: () => {},
+        // },
+        {
+          name: 'Aside',
+          icon: () => <Iconista width={16} height={16} set="tabler" icon="box-align-right" />,
+          onSelect: () => {},
+        },
+      ],
+    };
+  };
+
+  public readonly getCaretMenu = (): MenuItem => {
+    return {
+      name: 'Inline text',
+      maxToolbarItems: 4,
+      children: [
+        this.getFormattingMenu(),
+        secondBrain(),
+        {
+          name: 'Annotations separator',
+          sep: true,
+        },
+        this.annotationsMenu(),
+        {
+          name: 'Style separator',
+          sep: true,
+        },
+        {
+          name: 'Typesetting',
+          expand: 4,
+          openOnTitleHov: true,
+          icon: () => <Iconista width={16} height={16} set="tabler" icon="typography" />,
+          onSelect: () => {},
+          children: [
+            {
+              name: 'Sans-serif',
+              iconBig: () => <FontStyleButton kind={'sans'} />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Serif',
+              iconBig: () => <FontStyleButton kind={'serif'} />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Slab',
+              icon: () => <FontStyleButton kind={'slab'} size={16} />,
+              iconBig: () => <FontStyleButton kind={'slab'} />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Monospace',
+              iconBig: () => <FontStyleButton kind={'mono'} />,
+              onSelect: () => {},
+            },
+            // {
+            //   name: 'Custom typeface separator',
+            //   sep: true,
+            // },
+            {
+              name: 'Custom typeface',
+              expand: 10,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="font-style" />,
+              children: [
+                {
+                  name: 'Typeface',
+                  // icon: () => <Iconista width={15} height={15} set="radix" icon="font-style" />,
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="font-family" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Text size',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="font-size" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Letter spacing',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Word spacing',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Caps separator',
+                  sep: true,
+                },
+                {
+                  name: 'Large caps',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-uppercase" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Small caps',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-lowercase" />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Modify separator',
+          sep: true,
+        },
+        {
+          name: 'Modify',
+          expand: 3,
+          onSelect: () => {},
+          children: [
+            {
+              name: 'Pick layer',
+              right: () => (
+                <Code size={-1} gray>
+                  9+
+                </Code>
+              ),
+              more: true,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="layers" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Erase formatting',
+              danger: true,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="eraser" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Delete all in range',
+              danger: true,
+              more: true,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="trash" />,
+              onSelect: () => {},
+            },
+          ],
+        },
+        {
+          name: 'Clipboard separator',
+          sep: true,
+        },
+        {
+          name: 'Copy, cut, and paste',
+          // icon: () => <Iconista width={15} height={15} set="radix" icon="copy" />,
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="copy" />,
+          expand: 0,
+          children: [
+            {
+              id: 'copy-menu',
+              name: 'Copy',
+              // icon: () => <Iconista width={15} height={15} set="radix" icon="copy" />,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+              expand: 5,
+              children: [
+                {
+                  name: 'Copy',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Copy text only',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Copy as Markdown',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  right: () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Copy as HTML',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  right: () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+            {
+              name: 'Cut separator',
+              sep: true,
+            },
+            {
+              id: 'cut-menu',
+              name: 'Cut',
+              // icon: () => <Iconista width={15} height={15} set="radix" icon="copy" />,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+              expand: 5,
+              children: [
+                {
+                  name: 'Cut',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Cut text only',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Cut as Markdown',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  right: () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Cut as HTML',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  right: () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+            {
+              name: 'Paste separator',
+              sep: true,
+            },
+            {
+              id: 'paste-menu',
+              name: 'Paste',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+              expand: 5,
+              children: [
+                {
+                  name: 'Paste',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Paste text only',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Paste formatting',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Insert',
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="between-vertical-end" />,
+          children: [
+            {
+              name: 'Smart chip',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="button" />,
+              children: [
+                {
+                  name: 'Date',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="calendar" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'AI chip',
+                  icon: () => <Iconista style={{color: 'purple'}} width={16} height={16} set="tabler" icon="brain" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Solana wallet',
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="wallet" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Dropdown',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                  children: [
+                    {
+                      name: 'Create new',
+                      icon: () => <Iconista width={15} height={15} set="radix" icon="plus" />,
+                      onSelect: () => {},
+                    },
+                    {
+                      name: 'Document dropdowns separator',
+                      sep: true,
+                    },
+                    {
+                      name: 'Document dropdowns',
+                      expand: 8,
+                      onSelect: () => {},
+                      children: [
+                        {
+                          name: 'Configuration 1',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                        {
+                          name: 'Configuration 2',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                      ],
+                    },
+                    {
+                      name: 'Presets dropdowns separator',
+                      sep: true,
+                    },
+                    {
+                      name: 'Presets dropdowns',
+                      expand: 8,
+                      onSelect: () => {},
+                      children: [
+                        {
+                          name: 'Project status',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                        {
+                          name: 'Review status',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              name: 'Link',
+              // icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Reference',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="sewing-pin" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'File',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="file" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Template',
+              text: 'building blocks',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="template" />,
+              children: [
+                {
+                  name: 'Meeting notes',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Email draft (created by AI)',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Product roadmap',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Review tracker',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Project assets',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Content launch tracker',
+                  onSelect: () => {},
+                },
+              ],
+            },
+            {
+              name: 'On-screen keyboard',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="keyboard" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Emoji',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="smile-plus" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Special characters',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="omega" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Variable',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="variable" />,
+              onSelect: () => {},
+            },
+          ],
+        },
+        {
+          name: 'Developer tools',
+          danger: true,
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="square-chevron-right" />,
+          onSelect: () => {},
+        },
+      ],
+    };
+  };
+
+  public readonly getSelectionMenu = (): MenuItem => {
+    return {
+      name: 'Inline text',
+      maxToolbarItems: 4,
+      children: [
+        this.getFormattingMenu(),
+        this.annotationsMenu(),
+        /*
+        secondBrain(),
+        {
+          name: 'Annotations separator',
+          sep: true,
+        },
+        {
+          name: 'Style separator',
+          sep: true,
+        },
+        {
+          name: 'Typesetting',
+          expand: 4,
+          openOnTitleHov: true,
+          icon: () => <Iconista width={16} height={16} set="tabler" icon="typography" />,
+          onSelect: () => {},
+          children: [
+            {
+              name: 'Sans-serif',
+              iconBig: () => <FontStyleButton kind={'sans'} />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Serif',
+              iconBig: () => <FontStyleButton kind={'serif'} />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Slab',
+              icon: () => <FontStyleButton kind={'slab'} size={16} />,
+              iconBig: () => <FontStyleButton kind={'slab'} />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Monospace',
+              iconBig: () => <FontStyleButton kind={'mono'} />,
+              onSelect: () => {},
+            },
+            // {
+            //   name: 'Custom typeface separator',
+            //   sep: true,
+            // },
+            {
+              name: 'Custom typeface',
+              expand: 10,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="font-style" />,
+              children: [
+                {
+                  name: 'Typeface',
+                  // icon: () => <Iconista width={15} height={15} set="radix" icon="font-style" />,
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="font-family" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Text size',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="font-size" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Letter spacing',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Word spacing',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Caps separator',
+                  sep: true,
+                },
+                {
+                  name: 'Large caps',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-uppercase" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Small caps',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-lowercase" />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Modify separator',
+          sep: true,
+        },
+        {
+          name: 'Modify',
+          expand: 3,
+          onSelect: () => {},
+          children: [
+            {
+              name: 'Pick layer',
+              right: () => (
+                <Code size={-1} gray>
+                  9+
+                </Code>
+              ),
+              more: true,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="layers" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Erase formatting',
+              danger: true,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="eraser" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Delete all in range',
+              danger: true,
+              more: true,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="trash" />,
+              onSelect: () => {},
+            },
+          ],
+        },
+        {
+          name: 'Clipboard separator',
+          sep: true,
+        },
+        {
+          name: 'Copy, cut, and paste',
+          // icon: () => <Iconista width={15} height={15} set="radix" icon="copy" />,
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="copy" />,
+          expand: 0,
+          children: [
+            {
+              id: 'copy-menu',
+              name: 'Copy',
+              // icon: () => <Iconista width={15} height={15} set="radix" icon="copy" />,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+              expand: 5,
+              children: [
+                {
+                  name: 'Copy',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Copy text only',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Copy as Markdown',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  right: () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Copy as HTML',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+                  right: () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+            {
+              name: 'Cut separator',
+              sep: true,
+            },
+            {
+              id: 'cut-menu',
+              name: 'Cut',
+              // icon: () => <Iconista width={15} height={15} set="radix" icon="copy" />,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+              expand: 5,
+              children: [
+                {
+                  name: 'Cut',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Cut text only',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Cut as Markdown',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  right: () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Cut as HTML',
+                  danger: true,
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+                  right: () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+            {
+              name: 'Paste separator',
+              sep: true,
+            },
+            {
+              id: 'paste-menu',
+              name: 'Paste',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+              expand: 5,
+              children: [
+                {
+                  name: 'Paste',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Paste text only',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Paste formatting',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+                  onSelect: () => {},
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Insert',
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="between-vertical-end" />,
+          children: [
+            {
+              name: 'Smart chip',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="button" />,
+              children: [
+                {
+                  name: 'Date',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="calendar" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'AI chip',
+                  icon: () => <Iconista style={{color: 'purple'}} width={16} height={16} set="tabler" icon="brain" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Solana wallet',
+                  icon: () => <Iconista width={16} height={16} set="tabler" icon="wallet" />,
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Dropdown',
+                  icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                  children: [
+                    {
+                      name: 'Create new',
+                      icon: () => <Iconista width={15} height={15} set="radix" icon="plus" />,
+                      onSelect: () => {},
+                    },
+                    {
+                      name: 'Document dropdowns separator',
+                      sep: true,
+                    },
+                    {
+                      name: 'Document dropdowns',
+                      expand: 8,
+                      onSelect: () => {},
+                      children: [
+                        {
+                          name: 'Configuration 1',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                        {
+                          name: 'Configuration 2',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                      ],
+                    },
+                    {
+                      name: 'Presets dropdowns separator',
+                      sep: true,
+                    },
+                    {
+                      name: 'Presets dropdowns',
+                      expand: 8,
+                      onSelect: () => {},
+                      children: [
+                        {
+                          name: 'Project status',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                        {
+                          name: 'Review status',
+                          icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                          onSelect: () => {},
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              name: 'Link',
+              // icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
+              icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Reference',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="sewing-pin" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'File',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="file" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Template',
+              text: 'building blocks',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="template" />,
+              children: [
+                {
+                  name: 'Meeting notes',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Email draft (created by AI)',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Product roadmap',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Review tracker',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Project assets',
+                  onSelect: () => {},
+                },
+                {
+                  name: 'Content launch tracker',
+                  onSelect: () => {},
+                },
+              ],
+            },
+            {
+              name: 'On-screen keyboard',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="keyboard" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Emoji',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="smile-plus" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Special characters',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="omega" />,
+              onSelect: () => {},
+            },
+            {
+              name: 'Variable',
+              icon: () => <Iconista width={16} height={16} set="lucide" icon="variable" />,
+              onSelect: () => {},
+            },
+          ],
+        },
+        {
+          name: 'Developer tools',
+          danger: true,
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="square-chevron-right" />,
+          onSelect: () => {},
+        },
+        */
+      ],
+    };
+  };
+}
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/state/menus.tsx
similarity index 50%
rename from src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx
rename to src/json-crdt-peritext-ui/plugins/toolbar/state/menus.tsx
index 67109b4d74..da82d1922f 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/state/menus.tsx
@@ -1,50 +1,9 @@
-// biome-ignore lint: React is used for JSX
 import * as React from 'react';
-import {Paper} from 'nice-ui/lib/4-card/Paper';
-import {Flex} from 'nice-ui/lib/3-list-item/Flex';
-import {BasicButton} from '../../../components/BasicButton';
 import {Sidetip} from 'nice-ui/lib/1-inline/Sidetip';
 import {Code} from 'nice-ui/lib/1-inline/Code';
 import {Iconista} from 'nice-ui/lib/icons/Iconista';
-import {ToolbarMenu} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu';
 import {FontStyleButton} from 'nice-ui/lib/2-inline-block/FontStyleButton';
-import {keyframes, rule} from 'nano-theme';
-import type {MenuItem} from 'nice-ui/lib/4-card/StructuralMenu/types';
-
-export const annotations = (): MenuItem => {
-  return {
-    name: 'Annotations',
-    expand: 2,
-    children: [
-      {
-        name: 'Link',
-        // icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
-        icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
-        onClick: () => {},
-      },
-      {
-        name: 'Comment',
-        icon: () => <Iconista width={16} height={16} set="lineicons" icon="comment-1-text" />,
-        onClick: () => {},
-      },
-      {
-        name: 'Bookmark',
-        icon: () => <Iconista width={16} height={16} set="lineicons" icon="flag-2" />,
-        onClick: () => {},
-      },
-      {
-        name: 'Footnote',
-        icon: () => <Iconista width={16} height={16} set="lucide" icon="footprints" />,
-        onClick: () => {},
-      },
-      {
-        name: 'Aside',
-        icon: () => <Iconista width={16} height={16} set="tabler" icon="box-align-right" />,
-        onClick: () => {},
-      },
-    ],
-  };
-};
+import type {MenuItem} from '../types';
 
 export const secondBrain = (): MenuItem => {
   return {
@@ -69,12 +28,12 @@ export const secondBrain = (): MenuItem => {
           {
             name: 'Make shorter',
             icon: () => <Iconista width={16} height={16} set="tabler" icon="viewport-short" />,
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Make longer',
             icon: () => <Iconista width={16} height={16} set="tabler" icon="viewport-tall" />,
-            onClick: () => {},
+            onSelect: () => {},
           },
           {name: 'Add humor'},
           {name: 'Make more professional'},
@@ -86,171 +45,171 @@ export const secondBrain = (): MenuItem => {
         children: [
           {
             name: 'Afrikaans',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Arabic',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Bengali',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Bulgarian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Catalan',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Cantonese',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Croatian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Czech',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Danish',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Dutch',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Lithuanian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Malay',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Malayalam',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Panjabi',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Tamil',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'English',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Finnish',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'French',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'German',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Greek',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Hebrew',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Hindi',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Hungarian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Indonesian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Italian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Japanese',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Javanese',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Korean',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Norwegian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Polish',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Portuguese',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Romanian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Russian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Serbian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Slovak',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Slovene',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Spanish',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Swedish',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Thai',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Turkish',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Ukrainian',
-            onClick: () => {},
+            onSelect: () => {},
           },
           {
             name: 'Vietnamese',
-            onClick: () => {},
+            onSelect: () => {},
           },
         ],
       },
@@ -262,139 +221,12 @@ export const inlineText: MenuItem = {
   name: 'Inline text',
   maxToolbarItems: 4,
   children: [
-    {
-      name: 'Formatting',
-      expandChild: 0,
-      children: [
-        {
-          name: 'Common',
-          expand: 8,
-          children: [
-            {
-              name: 'Bold',
-              icon: () => <Iconista width={15} height={15} set="radix" icon="font-bold" />,
-              // icon: () => <Iconista width={16} height={16} set="lucide" icon="bold" />,
-              right: () => <Sidetip small>⌘ B</Sidetip>,
-              keys: ['⌘', 'b'],
-              onClick: () => {},
-            },
-            {
-              name: 'Italic',
-              // icon: () => <Iconista width={15} height={15} set="radix" icon="font-italic" />,
-              // icon: () => <Iconista width={16} height={16} set="lucide" icon="italic" />,
-              icon: () => <Iconista width={14} height={14} set="lucide" icon="italic" />,
-              right: () => <Sidetip small>⌘ I</Sidetip>,
-              keys: ['⌘', 'i'],
-              onClick: () => {},
-            },
-            {
-              name: 'Underline',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="underline" />,
-              right: () => <Sidetip small>⌘ U</Sidetip>,
-              keys: ['⌘', 'u'],
-              onClick: () => {},
-            },
-            {
-              name: 'Strikethrough',
-              // icon: () => <Iconista width={15} height={15} set="radix" icon="strikethrough" />,
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="strikethrough" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Overline',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="overline" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Highlight',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="highlight" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Classified',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="lock-password" />,
-              onClick: () => {},
-            },
-          ],
-        },
-        {
-          name: 'Technical separator',
-          sep: true,
-        },
-        {
-          name: 'Technical',
-          expand: 8,
-          children: [
-            {
-              name: 'Code',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="code" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Math',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="math-integral-x" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Superscript',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="superscript" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Subscript',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="subscript" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Keyboard key',
-              icon: () => <Iconista width={16} height={16} set="lucide" icon="keyboard" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Insertion',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="pencil-plus" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Deletion',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="pencil-minus" />,
-              onClick: () => {},
-            },
-          ],
-        },
-        {
-          name: 'Artistic separator',
-          sep: true,
-        },
-        {
-          name: 'Artistic',
-          expand: 8,
-          children: [
-            {
-              name: 'Color',
-              icon: () => <Iconista width={16} height={16} set="lucide" icon="paintbrush" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Background',
-              icon: () => <Iconista width={16} height={16} set="lucide" icon="paint-bucket" />,
-              onClick: () => {},
-            },
-            {
-              name: 'Border',
-              icon: () => <Iconista width={16} height={16} set="tabler" icon="border-left" />,
-              onClick: () => {},
-            },
-          ],
-        },
-      ],
-    },
     secondBrain(),
     {
       name: 'Annotations separator',
       sep: true,
     },
-    annotations(),
+    // annotations(),
     {
       name: 'Style separator',
       sep: true,
@@ -404,28 +236,28 @@ export const inlineText: MenuItem = {
       expand: 4,
       openOnTitleHov: true,
       icon: () => <Iconista width={16} height={16} set="tabler" icon="typography" />,
-      onClick: () => {},
+      onSelect: () => {},
       children: [
         {
           name: 'Sans-serif',
           iconBig: () => <FontStyleButton kind={'sans'} />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Serif',
           iconBig: () => <FontStyleButton kind={'serif'} />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Slab',
           icon: () => <FontStyleButton kind={'slab'} size={16} />,
           iconBig: () => <FontStyleButton kind={'slab'} />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Monospace',
           iconBig: () => <FontStyleButton kind={'mono'} />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         // {
         //   name: 'Custom typeface separator',
@@ -440,22 +272,22 @@ export const inlineText: MenuItem = {
               name: 'Typeface',
               // icon: () => <Iconista width={15} height={15} set="radix" icon="font-style" />,
               icon: () => <Iconista width={15} height={15} set="radix" icon="font-family" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Text size',
               icon: () => <Iconista width={15} height={15} set="radix" icon="font-size" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Letter spacing',
               icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Word spacing',
               icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Caps separator',
@@ -464,12 +296,12 @@ export const inlineText: MenuItem = {
             {
               name: 'Large caps',
               icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-uppercase" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Small caps',
               icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-lowercase" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
           ],
         },
@@ -482,7 +314,7 @@ export const inlineText: MenuItem = {
     {
       name: 'Modify',
       expand: 3,
-      onClick: () => {},
+      onSelect: () => {},
       children: [
         {
           name: 'Pick layer',
@@ -493,20 +325,20 @@ export const inlineText: MenuItem = {
           ),
           more: true,
           icon: () => <Iconista width={15} height={15} set="radix" icon="layers" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Erase formatting',
           danger: true,
           icon: () => <Iconista width={16} height={16} set="tabler" icon="eraser" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Delete all in range',
           danger: true,
           more: true,
           icon: () => <Iconista width={16} height={16} set="tabler" icon="trash" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
       ],
     },
@@ -530,24 +362,24 @@ export const inlineText: MenuItem = {
             {
               name: 'Copy',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Copy text only',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Copy as Markdown',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
               right: () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Copy as HTML',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
               right: () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />,
-              onClick: () => {},
+              onSelect: () => {},
             },
           ],
         },
@@ -566,27 +398,27 @@ export const inlineText: MenuItem = {
               name: 'Cut',
               danger: true,
               icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Cut text only',
               danger: true,
               icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Cut as Markdown',
               danger: true,
               icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
               right: () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Cut as HTML',
               danger: true,
               icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
               right: () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />,
-              onClick: () => {},
+              onSelect: () => {},
             },
           ],
         },
@@ -603,17 +435,17 @@ export const inlineText: MenuItem = {
             {
               name: 'Paste',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Paste text only',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Paste formatting',
               icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
           ],
         },
@@ -630,17 +462,17 @@ export const inlineText: MenuItem = {
             {
               name: 'Date',
               icon: () => <Iconista width={15} height={15} set="radix" icon="calendar" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'AI chip',
               icon: () => <Iconista style={{color: 'purple'}} width={16} height={16} set="tabler" icon="brain" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Solana wallet',
               icon: () => <Iconista width={16} height={16} set="tabler" icon="wallet" />,
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Dropdown',
@@ -649,7 +481,7 @@ export const inlineText: MenuItem = {
                 {
                   name: 'Create new',
                   icon: () => <Iconista width={15} height={15} set="radix" icon="plus" />,
-                  onClick: () => {},
+                  onSelect: () => {},
                 },
                 {
                   name: 'Document dropdowns separator',
@@ -658,17 +490,17 @@ export const inlineText: MenuItem = {
                 {
                   name: 'Document dropdowns',
                   expand: 8,
-                  onClick: () => {},
+                  onSelect: () => {},
                   children: [
                     {
                       name: 'Configuration 1',
                       icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
-                      onClick: () => {},
+                      onSelect: () => {},
                     },
                     {
                       name: 'Configuration 2',
                       icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
-                      onClick: () => {},
+                      onSelect: () => {},
                     },
                   ],
                 },
@@ -679,17 +511,17 @@ export const inlineText: MenuItem = {
                 {
                   name: 'Presets dropdowns',
                   expand: 8,
-                  onClick: () => {},
+                  onSelect: () => {},
                   children: [
                     {
                       name: 'Project status',
                       icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
-                      onClick: () => {},
+                      onSelect: () => {},
                     },
                     {
                       name: 'Review status',
                       icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
-                      onClick: () => {},
+                      onSelect: () => {},
                     },
                   ],
                 },
@@ -701,17 +533,17 @@ export const inlineText: MenuItem = {
           name: 'Link',
           // icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
           icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Reference',
           icon: () => <Iconista width={15} height={15} set="radix" icon="sewing-pin" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'File',
           icon: () => <Iconista width={15} height={15} set="radix" icon="file" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Template',
@@ -720,49 +552,49 @@ export const inlineText: MenuItem = {
           children: [
             {
               name: 'Meeting notes',
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Email draft (created by AI)',
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Product roadmap',
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Review tracker',
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Project assets',
-              onClick: () => {},
+              onSelect: () => {},
             },
             {
               name: 'Content launch tracker',
-              onClick: () => {},
+              onSelect: () => {},
             },
           ],
         },
         {
           name: 'On-screen keyboard',
           icon: () => <Iconista width={15} height={15} set="radix" icon="keyboard" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Emoji',
           icon: () => <Iconista width={16} height={16} set="lucide" icon="smile-plus" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Special characters',
           icon: () => <Iconista width={16} height={16} set="lucide" icon="omega" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
         {
           name: 'Variable',
           icon: () => <Iconista width={16} height={16} set="lucide" icon="variable" />,
-          onClick: () => {},
+          onSelect: () => {},
         },
       ],
     },
@@ -770,75 +602,7 @@ export const inlineText: MenuItem = {
       name: 'Developer tools',
       danger: true,
       icon: () => <Iconista width={16} height={16} set="lucide" icon="square-chevron-right" />,
-      onClick: () => {},
+      onSelect: () => {},
     },
   ],
 };
-
-const introAnimation = keyframes({
-  from: {
-    tr: 'scale(.9)',
-  },
-  to: {
-    tr: 'scale(1)',
-  },
-});
-
-const blockClass = rule({
-  an: introAnimation + ' .1s forwards',
-});
-
-// biome-ignore lint: empty interface
-export type CaretToolbarProps = {};
-
-export const CaretToolbar: React.FC<CaretToolbarProps> = () => {
-  return (
-    // <div style={{transform: 'translate(-50%,0)'}}>
-    <ToolbarMenu menu={inlineText} />
-    // </div>
-  );
-  // return (
-  //   <Paper hoverElevate level={3} className={blockClass}>
-  //     <Flex style={{alignItems: 'center', columnGap: 4, rowGap: 4, padding: 4, color: 'black'}}>
-  //       <BasicButton size={32} width={30} radius={5} onClick={() => {}}>
-  //         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  //           <path
-  //             d="M5.10505 12C4.70805 12 4.4236 11.912 4.25171 11.736C4.0839 11.5559 4 11.2715 4 10.8827V4.11733C4 3.72033 4.08595 3.43588 4.25784 3.26398C4.43383 3.08799 4.71623 3 5.10505 3C6.42741 3 8.25591 3 9.02852 3C10.1373 3 11.0539 3.98153 11.0539 5.1846C11.0539 6.08501 10.6037 6.81855 9.70327 7.23602C10.8657 7.44851 11.5176 8.62787 11.5176 9.48128C11.5176 10.5125 10.9902 12 9.27734 12C8.77742 12 6.42626 12 5.10505 12ZM8.37891 8.00341H5.8V10.631H8.37891C8.9 10.631 9.6296 10.1211 9.6296 9.29877C9.6296 8.47643 8.9 8.00341 8.37891 8.00341ZM5.8 4.36903V6.69577H8.17969C8.53906 6.69577 9.27734 6.35939 9.27734 5.50002C9.27734 4.64064 8.48047 4.36903 8.17969 4.36903H5.8Z"
-  //             fill="currentColor"
-  //           />
-  //         </svg>
-  //       </BasicButton>
-  //       <BasicButton size={32} width={30} radius={5} onClick={() => {}}>
-  //         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  //           <path
-  //             d="M5.67494 3.50017C5.67494 3.25164 5.87641 3.05017 6.12494 3.05017H10.6249C10.8735 3.05017 11.0749 3.25164 11.0749 3.50017C11.0749 3.7487 10.8735 3.95017 10.6249 3.95017H9.00587L7.2309 11.05H8.87493C9.12345 11.05 9.32493 11.2515 9.32493 11.5C9.32493 11.7486 9.12345 11.95 8.87493 11.95H4.37493C4.1264 11.95 3.92493 11.7486 3.92493 11.5C3.92493 11.2515 4.1264 11.05 4.37493 11.05H5.99397L7.76894 3.95017H6.12494C5.87641 3.95017 5.67494 3.7487 5.67494 3.50017Z"
-  //             fill="currentColor"
-  //             fillRule="evenodd"
-  //             clipRule="evenodd"
-  //           />
-  //         </svg>
-  //       </BasicButton>
-  //       <BasicButton size={32} width={30} radius={5} onClick={() => {}}>
-  //         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  //           <path
-  //             d="M5.00001 2.75C5.00001 2.47386 4.77615 2.25 4.50001 2.25C4.22387 2.25 4.00001 2.47386 4.00001 2.75V8.05C4.00001 9.983 5.56702 11.55 7.50001 11.55C9.43301 11.55 11 9.983 11 8.05V2.75C11 2.47386 10.7762 2.25 10.5 2.25C10.2239 2.25 10 2.47386 10 2.75V8.05C10 9.43071 8.88072 10.55 7.50001 10.55C6.1193 10.55 5.00001 9.43071 5.00001 8.05V2.75ZM3.49998 13.1001C3.27906 13.1001 3.09998 13.2791 3.09998 13.5001C3.09998 13.721 3.27906 13.9001 3.49998 13.9001H11.5C11.7209 13.9001 11.9 13.721 11.9 13.5001C11.9 13.2791 11.7209 13.1001 11.5 13.1001H3.49998Z"
-  //             fill="currentColor"
-  //             fillRule="evenodd"
-  //             clipRule="evenodd"
-  //           />
-  //         </svg>
-  //       </BasicButton>
-  //       <BasicButton size={32} width={30} radius={5} onClick={() => {}}>
-  //         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  //           <path
-  //             d="M1.03791 9.98075C0.934777 9.6583 1.11603 9.37719 1.40005 9.24871C1.68408 9.12022 2.09463 9.13412 2.27071 9.45426C2.85393 10.5147 3.64599 10.7282 4.48665 10.7282C5.52721 10.7282 6.29659 10.2615 6.29659 9.45426C6.29659 8.8047 5.9119 8.46416 4.87134 8.14253L4.15872 7.92181C2.64518 7.44883 1.88842 6.69206 1.88842 5.45601C1.88842 3.79743 3.27583 2.6875 5.24342 2.6875C6.91733 2.6875 7.97409 3.33536 8.43833 4.31065C8.57087 4.58909 8.57614 4.91294 8.22794 5.19114C7.87974 5.46934 7.52351 5.34799 7.23327 5.03839C6.47215 4.22653 5.99545 4.04968 5.25604 4.04968C4.1398 4.04968 3.547 4.63618 3.547 5.27943C3.547 5.86592 3.96322 6.23169 4.94702 6.5344L5.67856 6.76143C7.22994 7.23441 7.97409 7.95964 7.97409 9.17047C7.97409 10.7723 6.69389 12.0903 4.46143 12.0903C2.86612 12.0903 1.40005 11.1131 1.03791 9.98075ZM11.8491 8.77985C10.661 8.39543 10.1649 7.86114 10.1649 6.98805C10.1649 5.86736 11.1636 5.04639 12.6128 5.04639C13.8546 5.04639 14.6629 5.63345 14.9778 6.6346C15.0443 6.84599 14.9593 6.98006 14.7475 7.0491C14.5394 7.11697 14.3176 7.09974 14.238 6.89611C13.9356 6.12273 13.352 5.76311 12.5998 5.76311C11.6467 5.76311 11.0135 6.25178 11.0135 6.91638C11.0135 7.45066 11.3464 7.75038 12.2473 8.04358L12.8348 8.23254C14.062 8.62999 14.5516 9.13821 14.5516 10.0178C14.5516 11.1972 13.481 12.0442 11.9927 12.0442C10.6439 12.0442 9.65644 11.2809 9.41979 10.3361C9.36535 10.1188 9.41192 10.0287 9.70039 9.96184C9.98886 9.89499 10.0714 9.89918 10.1715 10.1369C10.4555 10.8114 11.1531 11.3275 12.0318 11.3275C12.9914 11.3275 13.6834 10.7802 13.6834 10.0634C13.6834 9.53567 13.3961 9.28807 12.4366 8.97532L11.8491 8.77985Z"
-  //             fill="currentColor"
-  //             fillRule="evenodd"
-  //             clipRule="evenodd"
-  //           />
-  //         </svg>
-  //       </BasicButton>
-  //     </Flex>
-  //   </Paper>
-  // );
-};
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/types.ts b/src/json-crdt-peritext-ui/plugins/toolbar/types.ts
new file mode 100644
index 0000000000..7e961ef72c
--- /dev/null
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/types.ts
@@ -0,0 +1,3 @@
+import type {MenuItem} from 'nice-ui/lib/4-card/StructuralMenu/types';
+
+export type {MenuItem};
diff --git a/src/json-crdt-peritext-ui/react/hooks.ts b/src/json-crdt-peritext-ui/react/hooks.ts
index 0b62d5c3ce..57e894dca0 100644
--- a/src/json-crdt-peritext-ui/react/hooks.ts
+++ b/src/json-crdt-peritext-ui/react/hooks.ts
@@ -17,3 +17,22 @@ const emptySyncStore: SyncStore<undefined> = {
 
 export const useSyncStoreOpt = <T>(store: SyncStore<T | undefined> = emptySyncStore): T | undefined =>
   React.useSyncExternalStore(store.subscribe, store.getSnapshot);
+
+export const useTimeout = (ms: number, deps: React.DependencyList = [ms]) => {
+  const [ready, setReady] = React.useState(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ready do not need to memoize it
+  React.useEffect(() => {
+    if (ready) setReady(false);
+
+    const timer = setTimeout(() => {
+      setReady(true);
+    }, ms);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, deps);
+
+  return ready;
+};
diff --git a/src/json-crdt-peritext-ui/react/util/AfterTimeout.tsx b/src/json-crdt-peritext-ui/react/util/AfterTimeout.tsx
new file mode 100644
index 0000000000..159f66ac3b
--- /dev/null
+++ b/src/json-crdt-peritext-ui/react/util/AfterTimeout.tsx
@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import {useTimeout} from '../hooks';
+
+export interface IAfterTimeoutProps {
+  ms?: number;
+  children?: React.ReactNode;
+}
+
+export const AfterTimeout: React.FC<IAfterTimeoutProps> = ({ms = 200, children}) => {
+  const ready = useTimeout(ms);
+
+  return ready ? children : null;
+};
diff --git a/src/util/events/sync-store.ts b/src/util/events/sync-store.ts
index 3c6b98aa6f..3f75e632a4 100644
--- a/src/util/events/sync-store.ts
+++ b/src/util/events/sync-store.ts
@@ -23,7 +23,8 @@ export class ValueSyncStore<V> implements SyncStore<V> {
 
   public readonly getSnapshot: () => V = () => this.value;
 
-  public next(value: V): void {
+  public next(value: V, force = false): void {
+    if (!force && this.value === value) return;
     this.value = value;
     this.fanout.emit();
   }
diff --git a/yarn.lock b/yarn.lock
index 2b592663e8..e6cc85dc22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3993,10 +3993,10 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-nice-ui@^1.25.0:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/nice-ui/-/nice-ui-1.27.0.tgz#ff93546f12ca58fecd1f64affd225f6db1bbf747"
-  integrity sha512-uI7ScKR1pm5ymNphfyVvPBLXFV6bSrB5Vu1CodxuhqXl/VtypPu/BMAShJkNkdLUjZGliisK4DaU31bAJMPlrg==
+nice-ui@^1.28.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/nice-ui/-/nice-ui-1.28.0.tgz#906fb08a9556aba06089741c29936e1a8cca83bd"
+  integrity sha512-P5ooBHzfTjY1hvwJrF3UJAmxcf+WdFfr7trGWeGg7fGCSrhfC747W6jedXWzZ6HOrO0t832AFKe1vM54U8Osdw==
   dependencies:
     "@material-ui/core" "^4.12.4"
     clipboard-copy "^4.0.1"