diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 73c2d77f04..dc735a577d 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -7,6 +7,8 @@ on:
 jobs:
   gh-pages:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     strategy:
       matrix:
         node-version: [20.x]
diff --git a/package.json b/package.json
index 7d9f730e05..f261f8d7d0 100644
--- a/package.json
+++ b/package.json
@@ -134,6 +134,7 @@
     "@jsonjoy.com/util": "^1.4.0",
     "arg": "^5.0.2",
     "hyperdyperid": "^1.2.0",
+    "nano-css": "^5.6.2",
     "sonic-forest": "^1.0.3",
     "thingies": "^2.1.1",
     "tree-dump": "^1.0.2",
@@ -155,7 +156,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.18.0",
+    "nice-ui": "^1.25.0",
     "quill-delta": "^5.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts
index f779bda965..1738d5bbc7 100644
--- a/src/json-crdt-extensions/peritext/slice/constants.ts
+++ b/src/json-crdt-extensions/peritext/slice/constants.ts
@@ -62,11 +62,13 @@ export const enum SliceTypeCon {
   bg = -18, // <span style="background: ...">
   kbd = -19, // <kbd>
   hidden = -20, // <span style="color: transparent; background: black">
-  footnote = -21, // <sup> or <a> with href="#footnote-..." and title="Footnote ..."
-  ref = -22, // <a> with href="#ref-..." and title="Reference ..." (Reference to some element in the document)
-  iaside = -23, // Inline <aside>
-  iembed = -24, // inline embed (any media, dropdown, Google Docs-like chips: date, person, file, etc.)
-  bookmark = -25, // UI for creating a link to this slice
+  q = -21, // <q> (inline quote)
+  cite = -22, // <cite> (inline citation)
+  footnote = -23, // <sup> or <a> with href="#footnote-..." and title="Footnote ..."
+  ref = -24, // <a> with href="#ref-..." and title="Reference ..." (Reference to some element in the document)
+  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
 }
 
 /**
diff --git a/src/json-crdt-peritext-ui/README.md b/src/json-crdt-peritext-ui/README.md
index 8eb1050c38..47b8c87a1e 100644
--- a/src/json-crdt-peritext-ui/README.md
+++ b/src/json-crdt-peritext-ui/README.md
@@ -2,3 +2,16 @@
 
 CRDT-native UI for JSON CRDT `peritext` extension. Supports block-level and
 inline-level collaborative editing, with the ability to nest blocks.
+
+
+## Software architecture layers
+
+Below is the software architecture of the Peritext rich text editor. At the top
+is the most user-facing layer, and at the bottom is the most foundational layer.
+
+- Rendering surface plugins
+- React rendering surface `<PeritextFragment controller={DomController} />`
+- DOM event handlers, `new DomController(defaults: PeritextEventDefaults)`
+- Peritext events, `create(txt: Peritext): PeritextEventDefaults`
+- Peritext JSON CRDT extension, `Peritext`
+- JSON CRDT, `Model`
diff --git a/src/json-crdt-peritext-ui/__demos__/components/App.tsx b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
index 54287f61dc..a18adb959c 100644
--- a/src/json-crdt-peritext-ui/__demos__/components/App.tsx
+++ b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {Provider, GlobalCss} from 'nano-theme';
+import {NiceUiProvider} from 'nice-ui/lib/context';
 import {ModelWithExt, ext} from '../../../json-crdt-extensions';
 import {PeritextView} from '../../react';
 import {CursorPlugin} from '../../plugins/cursor';
@@ -26,11 +27,11 @@ export const App: React.FC = () => {
   }, []);
 
   return (
-    <Provider theme={'light'}>
+    <NiceUiProvider>
       <GlobalCss />
       <div style={{maxWidth: '690px', fontSize: '21px', lineHeight: '1.7em', margin: '32px auto'}}>
         <PeritextView peritext={peritext} plugins={plugins} />
       </div>
-    </Provider>
+    </NiceUiProvider>
   );
 };
diff --git a/src/json-crdt-peritext-ui/__demos__/main.tsx b/src/json-crdt-peritext-ui/__demos__/main.tsx
index 8a62579834..a0b5c2aa7e 100644
--- a/src/json-crdt-peritext-ui/__demos__/main.tsx
+++ b/src/json-crdt-peritext-ui/__demos__/main.tsx
@@ -7,7 +7,7 @@ document.body.appendChild(div);
 
 const root = createRoot(div);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <App />,
+  // </React.StrictMode>,
 );
diff --git a/src/json-crdt-peritext-ui/dom/DomController.ts b/src/json-crdt-peritext-ui/dom/DomController.ts
index ac4ccaa780..c2f40e3e92 100644
--- a/src/json-crdt-peritext-ui/dom/DomController.ts
+++ b/src/json-crdt-peritext-ui/dom/DomController.ts
@@ -2,16 +2,15 @@ import {printTree, type Printable} from 'tree-dump';
 import {InputController} from '../dom/InputController';
 import {CursorController} from '../dom/CursorController';
 import {RichTextController} from '../dom/RichTextController';
-import {PeritextEventDefaults} from '../events/PeritextEventDefaults';
-import {PeritextEventTarget} from '../events/PeritextEventTarget';
 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 {Peritext} from '../../json-crdt-extensions';
 
 export interface DomControllerOpts {
   source: HTMLElement;
-  txt: Peritext;
+  events: PeritextEventDefaults;
 }
 
 export class DomController implements UiLifeCycles, Printable {
@@ -23,10 +22,9 @@ export class DomController implements UiLifeCycles, Printable {
   public readonly richText: RichTextController;
 
   constructor(public readonly opts: DomControllerOpts) {
-    const {source, txt} = opts;
-    const et = (this.et = new PeritextEventTarget());
-    const defaults = new PeritextEventDefaults(txt, et);
-    et.defaults = defaults;
+    const {source, events} = opts;
+    const {txt} = events;
+    const et = (this.et = opts.events.et);
     const keys = (this.keys = new KeyController({source}));
     const comp = (this.comp = new CompositionController({et, source, txt}));
     this.input = new InputController({et, source, txt, comp});
diff --git a/src/json-crdt-peritext-ui/dom/types.ts b/src/json-crdt-peritext-ui/dom/types.ts
index 4ca14e080c..918702912d 100644
--- a/src/json-crdt-peritext-ui/dom/types.ts
+++ b/src/json-crdt-peritext-ui/dom/types.ts
@@ -5,4 +5,12 @@ export interface UiLifeCycles {
   stop(): void;
 }
 
+export interface UiLifeCyclesRender {
+  /**
+   * Called when UI component is mounted. Returns a function to be called when
+   * the component is removed from the screen.
+   */
+  start(): () => void;
+}
+
 export type Rect = Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 77a8e5c709..3c5b92a007 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -1,7 +1,7 @@
 import {CursorAnchor} from '../../json-crdt-extensions/peritext/slice/constants';
+import type {PeritextEventHandlerMap, PeritextEventTarget} from './PeritextEventTarget';
 import type {Peritext} from '../../json-crdt-extensions/peritext';
 import type {EditorSlices} from '../../json-crdt-extensions/peritext/editor/EditorSlices';
-import type {PeritextEventHandlerMap, PeritextEventTarget} from './PeritextEventTarget';
 import type * as events from './types';
 
 /**
@@ -13,8 +13,8 @@ import type * as events from './types';
  */
 export class PeritextEventDefaults implements PeritextEventHandlerMap {
   public constructor(
-    protected readonly txt: Peritext,
-    protected readonly et: PeritextEventTarget,
+    public readonly txt: Peritext,
+    public readonly et: PeritextEventTarget,
   ) {}
 
   public readonly change = (event: CustomEvent<events.ChangeDetail>) => {};
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
index 02f1c8d00c..f0266e7a48 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
@@ -1,4 +1,4 @@
-import {TypedEventTarget} from '../../util/events/TypedEventTarget';
+import {SubscriptionEventTarget} from '../../util/events/TypedEventTarget';
 import type {PeritextEventDetailMap, CursorDetail, FormatDetail, DeleteDetail, MarkerDetail} from './types';
 
 export type PeritextEventMap = {
@@ -11,7 +11,7 @@ export type PeritextEventHandlerMap = {
 
 let __id = 0;
 
-export class PeritextEventTarget extends TypedEventTarget<PeritextEventMap> {
+export class PeritextEventTarget extends SubscriptionEventTarget<PeritextEventMap> {
   public readonly id: number = __id++;
 
   public defaults: Partial<PeritextEventHandlerMap> = {};
diff --git a/src/json-crdt-peritext-ui/events/index.ts b/src/json-crdt-peritext-ui/events/index.ts
new file mode 100644
index 0000000000..c830e513bd
--- /dev/null
+++ b/src/json-crdt-peritext-ui/events/index.ts
@@ -0,0 +1,10 @@
+import {PeritextEventDefaults} from './PeritextEventDefaults';
+import {PeritextEventTarget} from './PeritextEventTarget';
+import type {Peritext} from '../../json-crdt-extensions';
+
+export const create = (txt: Peritext) => {
+  const et = new PeritextEventTarget();
+  const defaults = new PeritextEventDefaults(txt, et);
+  et.defaults = defaults;
+  return defaults;
+};
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderAnchor.tsx
index 260e5a7740..e5f64c8e82 100644
--- a/src/json-crdt-peritext-ui/plugins/cursor/RenderAnchor.tsx
+++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderAnchor.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {rule, keyframes} from 'nano-theme';
 import {DefaultRendererColors} from './constants';
 import {usePeritext} from '../../react';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStoreOpt} from '../../react/hooks';
 import type {AnchorViewProps} from '../../react/cursor/AnchorView';
 
 export const fadeInAnimation = keyframes({
@@ -42,7 +42,7 @@ export interface RenderAnchorProps extends AnchorViewProps {
 
 export const RenderAnchor: React.FC<RenderAnchorProps> = ({children}) => {
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
 
   const style = focus ? undefined : {background: DefaultRendererColors.InactiveCursor};
 
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx
index 5863a3013e..398c48280f 100644
--- a/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import useHarmonicIntervalFn from 'react-use/lib/useHarmonicIntervalFn';
 import {keyframes, rule} from 'nano-theme';
 import {usePeritext} from '../../react/context';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStore, useSyncStoreOpt} from '../../react/hooks';
 import {DefaultRendererColors} from './constants';
 import {CommonSliceType} from '../../../json-crdt-extensions';
 import {useCursorPlugin} from './context';
@@ -54,7 +54,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, children}) => {
   const [show, setShow] = React.useState(true);
   useHarmonicIntervalFn(() => setShow(Date.now() % (ms + ms) > ms), ms);
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
   const plugin = useCursorPlugin();
 
   const score = plugin.score.value;
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderFocus.tsx
index 3af2883aad..1f3d7ace52 100644
--- a/src/json-crdt-peritext-ui/plugins/cursor/RenderFocus.tsx
+++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderFocus.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {rule, drule, keyframes} from 'nano-theme';
 import {DefaultRendererColors} from './constants';
 import {usePeritext} from '../../react';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStoreOpt} from '../../react/hooks';
 import type {FocusViewProps} from '../../react/cursor/FocusView';
 
 const width = 0.14;
@@ -43,7 +43,7 @@ export interface RenderFocusProps extends FocusViewProps {
 
 export const RenderFocus: React.FC<RenderFocusProps> = ({left, italic, children}) => {
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
 
   const style: React.CSSProperties = focus ? {} : {background: DefaultRendererColors.InactiveCursor, animation: 'none'};
 
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderInline.tsx
index f44e679838..7effe83039 100644
--- a/src/json-crdt-peritext-ui/plugins/cursor/RenderInline.tsx
+++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderInline.tsx
@@ -1,7 +1,7 @@
 // biome-ignore lint: React is used for JSX
 import * as React from 'react';
 import {usePeritext} from '../../react';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStoreOpt} from '../../react/hooks';
 import {DefaultRendererColors} from './constants';
 import type {InlineViewProps} from '../../react/InlineView';
 
@@ -12,7 +12,7 @@ interface RenderInlineSelectionProps extends RenderInlineProps {
 const RenderInlineSelection: React.FC<RenderInlineSelectionProps> = (props) => {
   const {children, selection} = props;
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
 
   const [left, right] = selection;
   const style: React.CSSProperties = {
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx
index 2ea913c8a6..4c60dff79f 100644
--- a/src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx
+++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import {context, type CursorPluginContextValue} from './context';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import type {ChangeDetail} from '../../events/types';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 import type {CursorPlugin} from './CursorPlugin';
 
 export interface RenderPeritextProps extends PeritextViewProps {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
   plugin: CursorPlugin;
   children?: React.ReactNode;
 }
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/context.ts b/src/json-crdt-peritext-ui/plugins/cursor/context.ts
index f1a0754415..3fed180d5f 100644
--- a/src/json-crdt-peritext-ui/plugins/cursor/context.ts
+++ b/src/json-crdt-peritext-ui/plugins/cursor/context.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {PeritextSurfaceState} from '../../react';
 import type {ValueSyncStore} from '../../../util/events/sync-store';
 import type {CursorPlugin} from './CursorPlugin';
 
 export interface CursorPluginContextValue {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 
   plugin: CursorPlugin;
 
diff --git a/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
index b9fa9be9a9..66afd28757 100644
--- a/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
+++ b/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
@@ -3,8 +3,8 @@ import {drule, rule, useTheme} from 'nano-theme';
 import {context} from './context';
 import {Button} from '../../components/Button';
 import {Console} from './Console';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
 import {ValueSyncStore} from '../../../util/events/sync-store';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 
 const blockClass = rule({
   pos: 'relative',
@@ -29,7 +29,7 @@ const childrenDebugClass = rule({
 export interface RenderPeritextProps extends PeritextViewProps {
   enabled?: boolean;
   children?: React.ReactNode;
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 }
 
 export const RenderPeritext: React.FC<RenderPeritextProps> = ({enabled: enabledProp = true, ctx, children}) => {
diff --git a/src/json-crdt-peritext-ui/plugins/debug/context.ts b/src/json-crdt-peritext-ui/plugins/debug/context.ts
index 7e112061fe..2dba266b5c 100644
--- a/src/json-crdt-peritext-ui/plugins/debug/context.ts
+++ b/src/json-crdt-peritext-ui/plugins/debug/context.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type {ValueSyncStore} from '../../../util/events/sync-store';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {PeritextSurfaceState} from '../../react/state';
 
 export interface DebugRenderersContextValue {
   enabled: boolean;
@@ -10,7 +10,7 @@ export interface DebugRenderersContextValue {
     peritext: ValueSyncStore<boolean>;
     model: ValueSyncStore<boolean>;
   };
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 }
 
 export const context = React.createContext<DebugRenderersContextValue>(null!);
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
index 17d4de4c96..f16b5dea82 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
@@ -4,7 +4,7 @@ import {rule, keyframes} from 'nano-theme';
 import {Char} from '../../constants';
 import {DefaultRendererColors} from './constants';
 import {usePeritext} from '../../react';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStoreOpt} from '../../react/hooks';
 import type {AnchorViewProps} from '../../react/cursor/AnchorView';
 
 export const fadeInAnimation = keyframes({
@@ -42,7 +42,7 @@ export interface RenderAnchorProps extends AnchorViewProps {}
 
 export const RenderAnchor: React.FC<RenderAnchorProps> = () => {
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
 
   const style = focus ? undefined : {background: DefaultRendererColors.InactiveCursor};
 
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
index b0b129e042..b510dcf042 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import useHarmonicIntervalFn from 'react-use/lib/useHarmonicIntervalFn';
 import {keyframes, rule} from 'nano-theme';
 import {usePeritext} from '../../react/context';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStore, useSyncStoreOpt} from '../../react/hooks';
 import type {CaretViewProps} from '../../react/cursor/CaretView';
 import {DefaultRendererColors} from './constants';
 import {CommonSliceType} from '../../../json-crdt-extensions';
@@ -54,7 +54,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, children}) => {
   const [show, setShow] = React.useState(true);
   useHarmonicIntervalFn(() => setShow(Date.now() % (ms + ms) > ms), ms);
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
   const plugin = usePlugin();
 
   const score = plugin.score.value;
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
index cd71dc0fa5..b612317b6f 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {rule, drule, keyframes} from 'nano-theme';
 import {DefaultRendererColors} from './constants';
 import {usePeritext} from '../../react';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStoreOpt} from '../../react/hooks';
 import type {FocusViewProps} from '../../react/cursor/FocusView';
 
 const width = 0.14;
@@ -44,7 +44,7 @@ export interface RenderFocusProps extends FocusViewProps {
 
 export const RenderFocus: React.FC<RenderFocusProps> = ({left, italic, children}) => {
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
 
   const style: React.CSSProperties = focus ? {} : {background: DefaultRendererColors.InactiveCursor, animation: 'none'};
 
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
index 31383e0b37..385ef6aea8 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
@@ -1,7 +1,7 @@
 // biome-ignore lint: React is used for JSX
 import * as React from 'react';
 import {usePeritext} from '../../react';
-import {useSyncStore} from '../../react/hooks';
+import {useSyncStoreOpt} from '../../react/hooks';
 import {DefaultRendererColors} from './constants';
 import type {InlineViewProps} from '../../react/InlineView';
 import {CommonSliceType} from '../../../json-crdt-extensions';
@@ -13,7 +13,7 @@ interface RenderInlineSelectionProps extends RenderInlineProps {
 const RenderInlineSelection: React.FC<RenderInlineSelectionProps> = (props) => {
   const {children, selection} = props;
   const {dom} = usePeritext();
-  const focus = useSyncStore(dom.cursor.focus);
+  const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
 
   const [left, right] = selection;
   const style: React.CSSProperties = {
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
index f814ce88a6..4aa7139bbd 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
@@ -3,10 +3,10 @@ import {Chrome} from './Chrome';
 import {context, type MinimalPluginContextValue} from './context';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import type {ChangeDetail} from '../../events/types';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 
 export interface RenderPeritextProps extends PeritextViewProps {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
   children?: React.ReactNode;
 }
 
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 b1b1b130aa..5bc90ca28e 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -4,21 +4,23 @@ import {Button} from '../../../components/Button';
 import {CommonSliceType} from '../../../../json-crdt-extensions';
 import {ButtonGroup} from '../../../components/ButtonGroup';
 import {useSyncStore} from '../../../react/hooks';
-import type {PeritextSurfaceContextValue} from '../../../react';
 import {ButtonSeparator} from '../../../components/ButtonSeparator';
+import type {PeritextSurfaceState} from '../../../react';
 
 export interface TopToolbarProps {
-  ctx: PeritextSurfaceContextValue;
+  ctx: PeritextSurfaceState;
 }
 
 export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
   const pending = useSyncStore(ctx.peritext.editor.pending);
 
+  if (!ctx.dom) return null;
+
   const [complete] = ctx.peritext.overlay.stat(ctx.peritext.editor.cursor);
 
   const inlineGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button
-      onClick={() => ctx.dom.et.format(type)}
+      onClick={() => ctx.dom?.et.format(type)}
       onMouseDown={(e) => e.preventDefault()}
       active={(complete.has(type) && !pending.has(type)) || (!complete.has(type) && pending.has(type))}
     >
@@ -34,7 +36,7 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
 
   const blockGroupButtom = (type: string | number, name: React.ReactNode) => (
     <Button
-      onClick={() => ctx.dom.et.marker({action: 'tog', type})}
+      onClick={() => ctx.dom?.et.marker({action: 'tog', type})}
       onMouseDown={(e) => e.preventDefault()}
       active={(complete.has(type) && !pending.has(type)) || (!complete.has(type) && pending.has(type))}
     >
@@ -60,14 +62,14 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
       {inlineGroupButton(CommonSliceType.bookmark, 'Bookmark')}
       <ButtonSeparator />
       {button('Blue', () => {
-        ctx.dom.et.format(CommonSliceType.col, 'one', '#07f');
+        ctx.dom?.et.format(CommonSliceType.col, 'one', '#07f');
       })}
       <ButtonSeparator />
       {button('Erase', () => {
-        ctx.dom.et.format({behavior: 'erase'});
+        ctx.dom?.et.format({behavior: 'erase'});
       })}
       {button('Clear', () => {
-        ctx.dom.et.format({behavior: 'clear'});
+        ctx.dom?.et.format({behavior: 'clear'});
       })}
       <ButtonSeparator />
       {blockGroupButtom(CommonSliceType.p, 'Paragraph')}
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/context.ts b/src/json-crdt-peritext-ui/plugins/minimal/context.ts
index fce1972841..eb20831a3a 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/context.ts
+++ b/src/json-crdt-peritext-ui/plugins/minimal/context.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {PeritextSurfaceState} from '../../react';
 import type {ValueSyncStore} from '../../../util/events/sync-store';
 
 export interface MinimalPluginContextValue {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 
   /** Current score. */
   score: ValueSyncStore<number>;
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx
index 86570c6118..67109b4d74 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/CaretToolbar/index.tsx
@@ -3,7 +3,777 @@ 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: () => {},
+      },
+    ],
+  };
+};
+
+export const secondBrain = (): MenuItem => {
+  return {
+    sepBefore: true,
+    name: 'Second brain',
+    display: () => (
+      <>
+        <span style={{color: 'purple'}}>Second brain</span>
+        {/* &nbsp;
+        <span style={{opacity: .3}}>AI</span> */}
+      </>
+    ),
+    right: () => <Sidetip small>{'AI'}</Sidetip>,
+    icon: () => <Iconista style={{color: 'purple'}} width={16} height={16} set="tabler" icon="brain" />,
+    children: [
+      {
+        name: 'Ask question',
+      },
+      {
+        name: 'Action',
+        children: [
+          {
+            name: 'Make shorter',
+            icon: () => <Iconista width={16} height={16} set="tabler" icon="viewport-short" />,
+            onClick: () => {},
+          },
+          {
+            name: 'Make longer',
+            icon: () => <Iconista width={16} height={16} set="tabler" icon="viewport-tall" />,
+            onClick: () => {},
+          },
+          {name: 'Add humor'},
+          {name: 'Make more professional'},
+          {name: 'Make it: ...'},
+        ],
+      },
+      {
+        name: 'Translate',
+        children: [
+          {
+            name: 'Afrikaans',
+            onClick: () => {},
+          },
+          {
+            name: 'Arabic',
+            onClick: () => {},
+          },
+          {
+            name: 'Bengali',
+            onClick: () => {},
+          },
+          {
+            name: 'Bulgarian',
+            onClick: () => {},
+          },
+          {
+            name: 'Catalan',
+            onClick: () => {},
+          },
+          {
+            name: 'Cantonese',
+            onClick: () => {},
+          },
+          {
+            name: 'Croatian',
+            onClick: () => {},
+          },
+          {
+            name: 'Czech',
+            onClick: () => {},
+          },
+          {
+            name: 'Danish',
+            onClick: () => {},
+          },
+          {
+            name: 'Dutch',
+            onClick: () => {},
+          },
+          {
+            name: 'Lithuanian',
+            onClick: () => {},
+          },
+          {
+            name: 'Malay',
+            onClick: () => {},
+          },
+          {
+            name: 'Malayalam',
+            onClick: () => {},
+          },
+          {
+            name: 'Panjabi',
+            onClick: () => {},
+          },
+          {
+            name: 'Tamil',
+            onClick: () => {},
+          },
+          {
+            name: 'English',
+            onClick: () => {},
+          },
+          {
+            name: 'Finnish',
+            onClick: () => {},
+          },
+          {
+            name: 'French',
+            onClick: () => {},
+          },
+          {
+            name: 'German',
+            onClick: () => {},
+          },
+          {
+            name: 'Greek',
+            onClick: () => {},
+          },
+          {
+            name: 'Hebrew',
+            onClick: () => {},
+          },
+          {
+            name: 'Hindi',
+            onClick: () => {},
+          },
+          {
+            name: 'Hungarian',
+            onClick: () => {},
+          },
+          {
+            name: 'Indonesian',
+            onClick: () => {},
+          },
+          {
+            name: 'Italian',
+            onClick: () => {},
+          },
+          {
+            name: 'Japanese',
+            onClick: () => {},
+          },
+          {
+            name: 'Javanese',
+            onClick: () => {},
+          },
+          {
+            name: 'Korean',
+            onClick: () => {},
+          },
+          {
+            name: 'Norwegian',
+            onClick: () => {},
+          },
+          {
+            name: 'Polish',
+            onClick: () => {},
+          },
+          {
+            name: 'Portuguese',
+            onClick: () => {},
+          },
+          {
+            name: 'Romanian',
+            onClick: () => {},
+          },
+          {
+            name: 'Russian',
+            onClick: () => {},
+          },
+          {
+            name: 'Serbian',
+            onClick: () => {},
+          },
+          {
+            name: 'Slovak',
+            onClick: () => {},
+          },
+          {
+            name: 'Slovene',
+            onClick: () => {},
+          },
+          {
+            name: 'Spanish',
+            onClick: () => {},
+          },
+          {
+            name: 'Swedish',
+            onClick: () => {},
+          },
+          {
+            name: 'Thai',
+            onClick: () => {},
+          },
+          {
+            name: 'Turkish',
+            onClick: () => {},
+          },
+          {
+            name: 'Ukrainian',
+            onClick: () => {},
+          },
+          {
+            name: 'Vietnamese',
+            onClick: () => {},
+          },
+        ],
+      },
+    ],
+  };
+};
+
+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(),
+    {
+      name: 'Style separator',
+      sep: true,
+    },
+    {
+      name: 'Typesetting',
+      expand: 4,
+      openOnTitleHov: true,
+      icon: () => <Iconista width={16} height={16} set="tabler" icon="typography" />,
+      onClick: () => {},
+      children: [
+        {
+          name: 'Sans-serif',
+          iconBig: () => <FontStyleButton kind={'sans'} />,
+          onClick: () => {},
+        },
+        {
+          name: 'Serif',
+          iconBig: () => <FontStyleButton kind={'serif'} />,
+          onClick: () => {},
+        },
+        {
+          name: 'Slab',
+          icon: () => <FontStyleButton kind={'slab'} size={16} />,
+          iconBig: () => <FontStyleButton kind={'slab'} />,
+          onClick: () => {},
+        },
+        {
+          name: 'Monospace',
+          iconBig: () => <FontStyleButton kind={'mono'} />,
+          onClick: () => {},
+        },
+        // {
+        //   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" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Text size',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="font-size" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Letter spacing',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Word spacing',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="letter-spacing" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Caps separator',
+              sep: true,
+            },
+            {
+              name: 'Large caps',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-uppercase" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Small caps',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="letter-case-lowercase" />,
+              onClick: () => {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'Modify separator',
+      sep: true,
+    },
+    {
+      name: 'Modify',
+      expand: 3,
+      onClick: () => {},
+      children: [
+        {
+          name: 'Pick layer',
+          right: () => (
+            <Code size={-1} gray>
+              9+
+            </Code>
+          ),
+          more: true,
+          icon: () => <Iconista width={15} height={15} set="radix" icon="layers" />,
+          onClick: () => {},
+        },
+        {
+          name: 'Erase formatting',
+          danger: true,
+          icon: () => <Iconista width={16} height={16} set="tabler" icon="eraser" />,
+          onClick: () => {},
+        },
+        {
+          name: 'Delete all in range',
+          danger: true,
+          more: true,
+          icon: () => <Iconista width={16} height={16} set="tabler" icon="trash" />,
+          onClick: () => {},
+        },
+      ],
+    },
+    {
+      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" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Copy text only',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
+              onClick: () => {},
+            },
+            {
+              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: () => {},
+            },
+            {
+              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: () => {},
+            },
+          ],
+        },
+        {
+          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" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Cut text only',
+              danger: true,
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
+              onClick: () => {},
+            },
+            {
+              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: () => {},
+            },
+            {
+              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: () => {},
+            },
+          ],
+        },
+        {
+          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" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Paste text only',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Paste formatting',
+              icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
+              onClick: () => {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      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" />,
+              onClick: () => {},
+            },
+            {
+              name: 'AI chip',
+              icon: () => <Iconista style={{color: 'purple'}} width={16} height={16} set="tabler" icon="brain" />,
+              onClick: () => {},
+            },
+            {
+              name: 'Solana wallet',
+              icon: () => <Iconista width={16} height={16} set="tabler" icon="wallet" />,
+              onClick: () => {},
+            },
+            {
+              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" />,
+                  onClick: () => {},
+                },
+                {
+                  name: 'Document dropdowns separator',
+                  sep: true,
+                },
+                {
+                  name: 'Document dropdowns',
+                  expand: 8,
+                  onClick: () => {},
+                  children: [
+                    {
+                      name: 'Configuration 1',
+                      icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                      onClick: () => {},
+                    },
+                    {
+                      name: 'Configuration 2',
+                      icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                      onClick: () => {},
+                    },
+                  ],
+                },
+                {
+                  name: 'Presets dropdowns separator',
+                  sep: true,
+                },
+                {
+                  name: 'Presets dropdowns',
+                  expand: 8,
+                  onClick: () => {},
+                  children: [
+                    {
+                      name: 'Project status',
+                      icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                      onClick: () => {},
+                    },
+                    {
+                      name: 'Review status',
+                      icon: () => <Iconista width={15} height={15} set="radix" icon="dropdown-menu" />,
+                      onClick: () => {},
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          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: 'Reference',
+          icon: () => <Iconista width={15} height={15} set="radix" icon="sewing-pin" />,
+          onClick: () => {},
+        },
+        {
+          name: 'File',
+          icon: () => <Iconista width={15} height={15} set="radix" icon="file" />,
+          onClick: () => {},
+        },
+        {
+          name: 'Template',
+          text: 'building blocks',
+          icon: () => <Iconista width={16} height={16} set="tabler" icon="template" />,
+          children: [
+            {
+              name: 'Meeting notes',
+              onClick: () => {},
+            },
+            {
+              name: 'Email draft (created by AI)',
+              onClick: () => {},
+            },
+            {
+              name: 'Product roadmap',
+              onClick: () => {},
+            },
+            {
+              name: 'Review tracker',
+              onClick: () => {},
+            },
+            {
+              name: 'Project assets',
+              onClick: () => {},
+            },
+            {
+              name: 'Content launch tracker',
+              onClick: () => {},
+            },
+          ],
+        },
+        {
+          name: 'On-screen keyboard',
+          icon: () => <Iconista width={15} height={15} set="radix" icon="keyboard" />,
+          onClick: () => {},
+        },
+        {
+          name: 'Emoji',
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="smile-plus" />,
+          onClick: () => {},
+        },
+        {
+          name: 'Special characters',
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="omega" />,
+          onClick: () => {},
+        },
+        {
+          name: 'Variable',
+          icon: () => <Iconista width={16} height={16} set="lucide" icon="variable" />,
+          onClick: () => {},
+        },
+      ],
+    },
+    {
+      name: 'Developer tools',
+      danger: true,
+      icon: () => <Iconista width={16} height={16} set="lucide" icon="square-chevron-right" />,
+      onClick: () => {},
+    },
+  ],
+};
 
 const introAnimation = keyframes({
   from: {
@@ -23,47 +793,52 @@ export type CaretToolbarProps = {};
 
 export const CaretToolbar: React.FC<CaretToolbarProps> = () => {
   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>
+    // <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/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx
index 41028b3791..fb97defa25 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import {rule} from 'nano-theme';
 import {TopToolbar} from '../TopToolbar';
-import {useDefaultPlugin} from '../context';
+import {useToolbarPlugin} from '../context';
 
 const blockClass = rule({
   bg: 'white',
@@ -20,11 +20,11 @@ export interface ChromeProps {
 }
 
 export const Chrome: React.FC<ChromeProps> = ({children}) => {
-  const {ctx} = useDefaultPlugin();
+  const ctx = useToolbarPlugin();
 
   return (
     <div className={blockClass}>
-      {!!ctx && <TopToolbar ctx={ctx} />}
+      {!!ctx && <TopToolbar ctx={ctx.surface} />}
       {children}
     </div>
   );
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/InlineToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/InlineToolbar/index.tsx
new file mode 100644
index 0000000000..c65ee696e3
--- /dev/null
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/InlineToolbar/index.tsx
@@ -0,0 +1,39 @@
+// 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 {keyframes, rule} from 'nano-theme';
+
+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 InlineToolbarProps = {};
+
+export const InlineToolbar: React.FC<InlineToolbarProps> = () => {
+  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>
+      </Flex>
+    </Paper>
+  );
+};
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
index 0e4b3cd96f..f89f2a97be 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 import {rule} from 'nano-theme';
 import {CaretToolbar} from './CaretToolbar';
 import type {CaretViewProps} from '../../react/cursor/CaretView';
+import {useToolbarPlugin} from './context';
+import type {PeritextEventDetailMap} from '../../events/types';
 
 const height = 1.9;
 
@@ -20,6 +22,10 @@ const overClass = rule({
   l: 0,
   isolation: 'isolate',
   us: 'none',
+  transform: 'translateX(calc(-50% + 0px))',
+  // w: '1px',
+  // h: '1px',
+  // bd: '1px solid red',
 });
 
 export interface RenderCaretProps extends CaretViewProps {
@@ -27,11 +33,17 @@ export interface RenderCaretProps extends CaretViewProps {
 }
 
 export const RenderCaret: React.FC<RenderCaretProps> = ({children}) => {
+  const {toolbar} = useToolbarPlugin()!;
+
+  const lastEventIsCaretPositionChange =
+    toolbar.lastEvent?.type === 'cursor' &&
+    typeof (toolbar.lastEvent?.detail as PeritextEventDetailMap['cursor']).at === 'number';
+
   return (
     <span className={blockClass}>
       {children}
       <span className={overClass} contentEditable={false}>
-        <CaretToolbar />
+        {lastEventIsCaretPositionChange && <CaretToolbar />}
       </span>
     </span>
   );
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderPeritext.tsx
index 0438130f8b..aaf93ec379 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderPeritext.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderPeritext.tsx
@@ -1,15 +1,22 @@
 import * as React from 'react';
 import {Chrome} from './Chrome';
-import {context, type DefaultPluginContextValue} from './context';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
+import {context, type ToolbarPluginContextValue} from './context';
+import {ToolbarState} from './state';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 
 export interface RenderPeritextProps extends PeritextViewProps {
-  ctx?: PeritextSurfaceContextValue;
+  surface: PeritextSurfaceState;
   children?: React.ReactNode;
 }
 
-export const RenderPeritext: React.FC<RenderPeritextProps> = ({ctx, children}) => {
-  const value: DefaultPluginContextValue = React.useMemo(() => ({ctx}), [ctx]);
+export const RenderPeritext: React.FC<RenderPeritextProps> = ({surface, children}) => {
+  const value: ToolbarPluginContextValue = React.useMemo(
+    () => ({surface, toolbar: new ToolbarState(surface)}),
+    [surface],
+  );
+  const toolbar = value.toolbar;
+
+  React.useLayoutEffect(() => toolbar.start(), [toolbar]);
 
   return (
     <context.Provider value={value}>
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts b/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
index 83d7c73f41..d36394952e 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
@@ -15,8 +15,8 @@ export class ToolbarPlugin implements PeritextPlugin {
 
   public readonly block: PeritextPlugin['block'] = (props, children) => h(RenderBlock, props as any, children);
 
-  public readonly peritext: PeritextPlugin['peritext'] = (props, children, ctx) =>
-    h(RenderPeritext, {...props, children, ctx});
+  public readonly peritext: PeritextPlugin['peritext'] = (props, children, surface) =>
+    h(RenderPeritext, {...props, children, surface});
 
   public readonly caret: PeritextPlugin['caret'] = (props, children) => h(RenderCaret, <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 2192839b24..d1cec236f1 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
@@ -5,20 +5,21 @@ import {CommonSliceType} from '../../../../json-crdt-extensions';
 import {ButtonGroup} from '../../../components/ButtonGroup';
 import {useSyncStore} from '../../../react/hooks';
 import {ButtonSeparator} from '../../../components/ButtonSeparator';
-import type {PeritextSurfaceContextValue} from '../../../react';
+import type {PeritextSurfaceState} from '../../../react';
 
 export interface TopToolbarProps {
-  ctx: PeritextSurfaceContextValue;
+  ctx: PeritextSurfaceState;
 }
 
 export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
   const pending = useSyncStore(ctx.peritext.editor.pending);
 
+  if (!ctx.dom) return null;
   const [complete] = ctx.peritext.overlay.stat(ctx.peritext.editor.cursor);
 
   const inlineGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button
-      onClick={() => ctx.dom.et.format(type)}
+      onClick={() => ctx.dom?.et.format(type)}
       onMouseDown={(e) => e.preventDefault()}
       active={(complete.has(type) && !pending.has(type)) || (!complete.has(type) && pending.has(type))}
     >
@@ -34,7 +35,7 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
 
   const blockGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button
-      onClick={() => ctx.dom.et.marker({action: 'tog', type})}
+      onClick={() => ctx.dom?.et.marker({action: 'tog', type})}
       onMouseDown={(e) => e.preventDefault()}
       active={(complete.has(type) && !pending.has(type)) || (!complete.has(type) && pending.has(type))}
     >
@@ -60,14 +61,14 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
       {inlineGroupButton(CommonSliceType.bookmark, 'Bookmark')}
       <ButtonSeparator />
       {button('Blue', () => {
-        ctx.dom.et.format(CommonSliceType.col, 'one', '#07f');
+        ctx.dom?.et.format(CommonSliceType.col, 'one', '#07f');
       })}
       <ButtonSeparator />
       {button('Erase', () => {
-        ctx.dom.et.format({behavior: 'erase'});
+        ctx.dom?.et.format({behavior: 'erase'});
       })}
       {button('Clear', () => {
-        ctx.dom.et.format({behavior: 'clear'});
+        ctx.dom?.et.format({behavior: 'clear'});
       })}
       <ButtonSeparator />
       {blockGroupButton(CommonSliceType.p, 'Paragraph')}
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/context.ts b/src/json-crdt-peritext-ui/plugins/toolbar/context.ts
index 2c52e0b1a8..c0f8195786 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/context.ts
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/context.ts
@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {ToolbarState} from './state';
+import type {PeritextSurfaceState} from '../../react';
 
-export interface DefaultPluginContextValue {
-  ctx?: PeritextSurfaceContextValue;
+export interface ToolbarPluginContextValue {
+  surface: PeritextSurfaceState;
+  toolbar: ToolbarState;
 }
 
-export const context = React.createContext<DefaultPluginContextValue>(null!);
+export const context = React.createContext<ToolbarPluginContextValue | null>(null);
 
-export const useDefaultPlugin = () => React.useContext(context);
+export const useToolbarPlugin = () => React.useContext(context);
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state.ts b/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
new file mode 100644
index 0000000000..f716163125
--- /dev/null
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
@@ -0,0 +1,21 @@
+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/react/BlockView.tsx b/src/json-crdt-peritext-ui/react/BlockView.tsx
index 55b93bafa3..f8a4658593 100644
--- a/src/json-crdt-peritext-ui/react/BlockView.tsx
+++ b/src/json-crdt-peritext-ui/react/BlockView.tsx
@@ -19,8 +19,7 @@ export interface BlockViewProps {
 export const BlockView: React.FC<BlockViewProps> = React.memo(
   (props) => {
     const {block, el} = props;
-    const {renderers} = usePeritext();
-
+    const {plugins} = usePeritext();
     const elements: React.ReactNode[] = [];
     if (block instanceof LeafBlock) {
       for (const inline of block.texts()) {
@@ -75,9 +74,11 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
     }
 
     let children: React.ReactNode = (
-      <div ref={(element) => el?.(element)}>{elements.length ? elements : Char.ZeroLengthSpace}</div>
+      <div ref={(element) => el?.(element)} style={{position: 'relative'}}>
+        {elements.length ? elements : Char.ZeroLengthSpace}
+      </div>
     );
-    for (const map of renderers) children = map.block?.(props, children) ?? children;
+    for (const map of plugins) children = map.block?.(props, children) ?? children;
     return children;
   },
   (prev, next) => prev.hash === next.hash,
diff --git a/src/json-crdt-peritext-ui/react/InlineView.tsx b/src/json-crdt-peritext-ui/react/InlineView.tsx
index 6dad76767a..c76c514a61 100644
--- a/src/json-crdt-peritext-ui/react/InlineView.tsx
+++ b/src/json-crdt-peritext-ui/react/InlineView.tsx
@@ -47,7 +47,7 @@ export interface InlineViewProps {
 export const InlineView: React.FC<InlineViewProps> = (props) => {
   const {inline} = props;
   const ctx = usePeritext();
-  const {renderers} = ctx;
+  const {plugins} = ctx;
   const ref = React.useRef<HTMLSpanElement | null>(null);
   const text = inline.text();
 
@@ -61,8 +61,8 @@ export const InlineView: React.FC<InlineViewProps> = (props) => {
       if (span) (span as any)[ElementAttr.InlineOffset] = inline;
     },
   };
-  for (const map of renderers) attr = map.text?.(attr, inline, ctx) ?? attr;
+  for (const map of plugins) attr = map.text?.(attr, inline, ctx) ?? attr;
   let children: React.ReactNode = <span {...attr}>{text}</span>;
-  for (const map of renderers) children = map.inline?.(props, children) ?? children;
+  for (const map of plugins) children = map.inline?.(props, children) ?? children;
   return children;
 };
diff --git a/src/json-crdt-peritext-ui/react/PeritextView.tsx b/src/json-crdt-peritext-ui/react/PeritextView.tsx
index 4761cece18..00cb36b7d8 100644
--- a/src/json-crdt-peritext-ui/react/PeritextView.tsx
+++ b/src/json-crdt-peritext-ui/react/PeritextView.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import {put} from 'nano-theme';
-import {context, type PeritextSurfaceContextValue} from './context';
+import {context} from './context';
 import {CssClass} from '../constants';
 import {BlockView} from './BlockView';
 import {DomController} from '../dom/DomController';
 import {CursorPlugin} from '../plugins/cursor';
 import {defaultPlugin} from '../plugins/minimal';
+import {PeritextSurfaceState} from './state';
+import {create} from '../events';
 import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
 import type {PeritextPlugin} from './types';
 
@@ -52,6 +54,11 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
     if (onRender) onRender();
   }, [peritext]);
 
+  const state: PeritextSurfaceState = React.useMemo(
+    () => new PeritextSurfaceState(peritext, create(peritext), rerender, plugins),
+    [peritext, plugins, rerender],
+  );
+
   // biome-ignore lint: lint/correctness/useExhaustiveDependencies
   const ref = React.useCallback(
     (el: null | HTMLDivElement) => {
@@ -59,22 +66,19 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
         if (dom) {
           dom.stop();
           dom.et.removeEventListener('change', rerender);
+          state.dom = void 0;
           setDom(undefined);
         }
         return;
       }
       if (dom && dom.opts.source === el) return;
-      const ctrl = new DomController({source: el, txt: peritext});
+      const ctrl = new DomController({source: el, events: state.events});
       ctrl.start();
+      state.dom = ctrl;
       setDom(ctrl);
       ctrl.et.addEventListener('change', rerender);
     },
-    [peritext],
-  );
-
-  const ctx: undefined | PeritextSurfaceContextValue = React.useMemo(
-    () => (dom ? {peritext, dom, renderers: plugins, rerender} : undefined),
-    [peritext, dom, plugins, rerender],
+    [peritext, state],
   );
 
   const block = peritext.blocks.root;
@@ -83,14 +87,14 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
   let children: React.ReactNode = (
     <div ref={ref} className={CssClass.Editor}>
       {!!dom && (
-        <context.Provider value={ctx!}>
+        <context.Provider value={state}>
           <BlockView hash={block.hash} block={block} />
         </context.Provider>
       )}
     </div>
   );
 
-  for (const map of plugins) children = map.peritext?.(props, children, ctx) ?? children;
+  for (const map of plugins) children = map.peritext?.(props, children, state) ?? children;
 
   return children;
 });
diff --git a/src/json-crdt-peritext-ui/react/context.ts b/src/json-crdt-peritext-ui/react/context.ts
index e3569c47e8..539e9847e0 100644
--- a/src/json-crdt-peritext-ui/react/context.ts
+++ b/src/json-crdt-peritext-ui/react/context.ts
@@ -1,14 +1,5 @@
 import * as React from 'react';
-import type {PeritextPlugin} from './types';
-import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
-import type {DomController} from '../dom/DomController';
+import type {PeritextSurfaceState} from './state';
 
-export interface PeritextSurfaceContextValue {
-  peritext: Peritext;
-  renderers: PeritextPlugin[];
-  dom: DomController;
-  rerender: () => void;
-}
-
-export const context = React.createContext<PeritextSurfaceContextValue | null>(null);
+export const context = React.createContext<PeritextSurfaceState | null>(null);
 export const usePeritext = () => React.useContext(context)!;
diff --git a/src/json-crdt-peritext-ui/react/cursor/AnchorView.tsx b/src/json-crdt-peritext-ui/react/cursor/AnchorView.tsx
index 714d997203..66f26ad6bd 100644
--- a/src/json-crdt-peritext-ui/react/cursor/AnchorView.tsx
+++ b/src/json-crdt-peritext-ui/react/cursor/AnchorView.tsx
@@ -7,11 +7,11 @@ import {Char} from '../../constants';
 export type AnchorViewProps = {};
 
 export const AnchorView: React.FC<AnchorViewProps> = (props) => {
-  const {renderers} = usePeritext();
+  const {plugins} = usePeritext();
 
   // This zero-width non-breaking space prevents word wrapping at position where
   // anchor is inserted.
   let children: React.ReactNode = Char.ZeroLengthSpace;
-  for (const map of renderers) children = map.anchor?.(props, children) ?? children;
+  for (const map of plugins) children = map.anchor?.(props, children) ?? children;
   return children;
 };
diff --git a/src/json-crdt-peritext-ui/react/cursor/CaretView.tsx b/src/json-crdt-peritext-ui/react/cursor/CaretView.tsx
index 99f6e2fe86..a837536900 100644
--- a/src/json-crdt-peritext-ui/react/cursor/CaretView.tsx
+++ b/src/json-crdt-peritext-ui/react/cursor/CaretView.tsx
@@ -8,9 +8,9 @@ export interface CaretViewProps {
 }
 
 export const CaretView: React.FC<CaretViewProps> = (props) => {
-  const {renderers} = usePeritext();
+  const {plugins} = usePeritext();
 
   let children: React.ReactNode = <Caret />;
-  for (const map of renderers) children = map.caret?.(props, children) ?? children;
+  for (const map of plugins) children = map.caret?.(props, children) ?? children;
   return children;
 };
diff --git a/src/json-crdt-peritext-ui/react/cursor/FocusView.tsx b/src/json-crdt-peritext-ui/react/cursor/FocusView.tsx
index 7346f75207..6f826068e3 100644
--- a/src/json-crdt-peritext-ui/react/cursor/FocusView.tsx
+++ b/src/json-crdt-peritext-ui/react/cursor/FocusView.tsx
@@ -9,9 +9,9 @@ export interface FocusViewProps {
 }
 
 export const FocusView: React.FC<FocusViewProps> = (props) => {
-  const {renderers} = usePeritext();
+  const {plugins} = usePeritext();
 
   let children: React.ReactNode = <Caret />;
-  for (const map of renderers) children = map.focus?.(props, children) ?? children;
+  for (const map of plugins) children = map.focus?.(props, children) ?? children;
   return children;
 };
diff --git a/src/json-crdt-peritext-ui/react/hooks.ts b/src/json-crdt-peritext-ui/react/hooks.ts
index bd9d5f7b3d..0b62d5c3ce 100644
--- a/src/json-crdt-peritext-ui/react/hooks.ts
+++ b/src/json-crdt-peritext-ui/react/hooks.ts
@@ -9,3 +9,11 @@ export const useBrowserLayoutEffect =
 
 export const useSyncStore = <T>(store: SyncStore<T>): T =>
   React.useSyncExternalStore(store.subscribe, store.getSnapshot);
+
+const emptySyncStore: SyncStore<undefined> = {
+  getSnapshot: () => undefined,
+  subscribe: () => () => {},
+};
+
+export const useSyncStoreOpt = <T>(store: SyncStore<T | undefined> = emptySyncStore): T | undefined =>
+  React.useSyncExternalStore(store.subscribe, store.getSnapshot);
diff --git a/src/json-crdt-peritext-ui/react/index.ts b/src/json-crdt-peritext-ui/react/index.ts
index 21995d7ac4..44d7837f88 100644
--- a/src/json-crdt-peritext-ui/react/index.ts
+++ b/src/json-crdt-peritext-ui/react/index.ts
@@ -1,2 +1,3 @@
+export type {PeritextSurfaceState} from './state';
 export * from './context';
 export * from './PeritextView';
diff --git a/src/json-crdt-peritext-ui/react/state.ts b/src/json-crdt-peritext-ui/react/state.ts
new file mode 100644
index 0000000000..c743368e80
--- /dev/null
+++ b/src/json-crdt-peritext-ui/react/state.ts
@@ -0,0 +1,15 @@
+import type {PeritextPlugin} from './types';
+import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
+import type {DomController} from '../dom/DomController';
+import type {PeritextEventDefaults} from '../events/PeritextEventDefaults';
+
+export class PeritextSurfaceState {
+  public dom?: DomController = void 0;
+
+  constructor(
+    public readonly peritext: Peritext,
+    public readonly events: PeritextEventDefaults,
+    public readonly rerender: () => void,
+    public readonly plugins: PeritextPlugin[],
+  ) {}
+}
diff --git a/src/json-crdt-peritext-ui/react/types.ts b/src/json-crdt-peritext-ui/react/types.ts
index d81825d0db..d6ba4ed362 100644
--- a/src/json-crdt-peritext-ui/react/types.ts
+++ b/src/json-crdt-peritext-ui/react/types.ts
@@ -5,23 +5,19 @@ import type {AnchorViewProps} from './cursor/AnchorView';
 import type {InlineViewProps} from './InlineView';
 import type {BlockViewProps} from './BlockView';
 import type {PeritextViewProps} from './PeritextView';
-import type {PeritextSurfaceContextValue} from './context';
+import type {PeritextSurfaceState} from './state';
 import type {Inline} from '../../json-crdt-extensions/peritext/block/Inline';
 
 export interface PeritextPlugin {
   // --------------------------------------------------- Block-level formatting
 
-  peritext?: (
-    props: PeritextViewProps,
-    children: React.ReactNode,
-    ctx?: PeritextSurfaceContextValue,
-  ) => React.ReactNode;
+  peritext?: (props: PeritextViewProps, children: React.ReactNode, surface: PeritextSurfaceState) => React.ReactNode;
   block?: (props: BlockViewProps, children: React.ReactNode) => React.ReactNode;
 
   // -------------------------------------------------------- Inline formatting
 
-  text?: (props: SpanProps, inline: Inline, ctx: PeritextSurfaceContextValue) => SpanProps | undefined;
   inline?: (props: InlineViewProps, children: React.ReactNode) => React.ReactNode;
+  text?: (props: SpanProps, inline: Inline, surface: PeritextSurfaceState) => SpanProps | undefined;
 
   // ------------------------------------------------------------------ Cursors
 
diff --git a/src/json-crdt/__demos__/issue-801.ts b/src/json-crdt/__demos__/issue-801.ts
new file mode 100644
index 0000000000..dbe0da902a
--- /dev/null
+++ b/src/json-crdt/__demos__/issue-801.ts
@@ -0,0 +1,44 @@
+/* tslint:disable no-console */
+
+/**
+ * Run this demo with:
+ *
+ *     npx nodemon -q -x ts-node src/json-crdt/__demos__/issue-801.ts
+ *
+ * @see issue: https://github.com/streamich/json-joy/issues/801
+ */
+
+// Original source:
+//
+// interface SimpleObjectI {
+//   text: string
+// }
+// const SimpleObjectSchema = s.obj({
+//   text: s.con(''),
+// })
+// const model = Model.create().setSchema(SimpleObjectSchema)
+// const root: SimpleObjectI = {
+//   text: 'foo'
+// }
+// model.api.root(root)
+// type SimpleObjectNodeType =  ObjNode<{
+//   text: ConNode<string>
+// }>
+// function foo(_node: ObjApi<SimpleObjectNodeType>) {}
+// foo(model.api.node)
+
+import {type JsonNodeView, Model} from '..';
+import {s} from '../../json-crdt-patch';
+import type {SchemaToJsonNode} from '../schema/types';
+
+const SimpleObjectSchema = s.obj({
+  text: s.con<string>('foo'),
+});
+
+const model = Model.create(SimpleObjectSchema);
+
+type SimpleObjectNodeType = SchemaToJsonNode<typeof SimpleObjectSchema>;
+type SimpleObjectI = JsonNodeView<SimpleObjectNodeType>;
+// type SimpleObjectI = ReturnType<(typeof model)['view']>;
+
+console.log(model + '');
diff --git a/src/util/events/TypedEventTarget.ts b/src/util/events/TypedEventTarget.ts
index 96449b1a97..4950e8d704 100644
--- a/src/util/events/TypedEventTarget.ts
+++ b/src/util/events/TypedEventTarget.ts
@@ -57,3 +57,10 @@ export interface TypedEventTarget<EventMap> {
     options?: EventListenerOptions | boolean,
   ): void;
 }
+
+export class SubscriptionEventTarget<EventMap> extends TypedEventTarget<EventMap> {
+  public subscribe<K extends keyof EventMap>(type: K, listener: (ev: EventMap[K]) => void): () => void {
+    this.addEventListener(type, listener);
+    return () => this.removeEventListener(type, listener);
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index a69dd3d13d..2a642cc898 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2181,7 +2181,6 @@ dunder-proto@^1.0.1:
 
 "editing-traces@https://github.com/streamich/editing-traces#6494020428530a6e382378b98d1d7e31334e2d7b":
   version "0.0.0"
-  uid "6494020428530a6e382378b98d1d7e31334e2d7b"
   resolved "https://github.com/streamich/editing-traces#6494020428530a6e382378b98d1d7e31334e2d7b"
 
 ee-first@1.1.1:
@@ -3530,7 +3529,6 @@ jsesc@^3.0.2:
 
 "json-crdt-traces@https://github.com/streamich/json-crdt-traces#ec825401dc05cbb74b9e0b3c4d6527399f54d54d":
   version "0.0.1"
-  uid ec825401dc05cbb74b9e0b3c4d6527399f54d54d
   resolved "https://github.com/streamich/json-crdt-traces#ec825401dc05cbb74b9e0b3c4d6527399f54d54d"
 
 json-logic-js@^2.0.2:
@@ -3995,7 +3993,7 @@ 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.18.0:
+nice-ui@^1.25.0:
   version "1.25.0"
   resolved "https://registry.yarnpkg.com/nice-ui/-/nice-ui-1.25.0.tgz#7b0bf1187ff04c76acb764dc88d3e6af4b393db9"
   integrity sha512-gFC7zWYe8By9TMjIS34WHVSc/9dTW4FVljSqh7zvWyqnzUf33DzGoJGZs5f+5GpdkQEbAwIJBCrs8Z2gno3S2Q==