@openeditor/native 0.0.34 → 0.0.35

package/README.md

@@ -9,9 +9,10 @@ lightweight state/revision events; document JSON only crosses it when the host
 explicitly calls `getDocument()` or `flushDocument()`.
 
 On iOS, the host hides WKWebView's default previous/next/Done accessory bar so
-the OpenEditor toolbar is the only bar above the software keyboard. The toolbar
-is mounted only while the editable WebView is focused and the software keyboard
-is visible. Consumers can opt back into the system bar with
+the OpenEditor toolbar is the only bar above the software keyboard. The SDK
+sticks that toolbar to the keyboard, reserves its document inset, and enables
+interactive keyboard dismissal while the editor scrolls. Consumers can opt
+back into the system bar with
 `webViewProps={{ hideKeyboardAccessoryView: false }}`.
 
 The `theme` prop accepts the same OpenEditor theme-token contract used by the
@@ -19,8 +20,36 @@ web React surface.
 
 ## Host integration
 
-Install the `react-native-webview` peer dependency. The self-contained offline
-runtime is packaged with the component, so Metro asset customization is not required:
+Install the native peer dependencies:
+
+```sh
+pnpm add expo-glass-effect react-native-keyboard-controller react-native-reanimated react-native-svg react-native-webview
+```
+
+For Expo, install the SDK plugin so iOS WebViews receive interactive keyboard
+dismissal:
+
+```json
+{
+  "expo": {
+    "plugins": ["@openeditor/native/plugin"]
+  }
+}
+```
+
+Rebuild the native application after adding the plugin or a native dependency.
+Mount the SDK provider once at the app root:
+
+```tsx
+import { OpenEditorNativeProvider } from "@openeditor/native";
+
+export default function RootLayout() {
+  return <OpenEditorNativeProvider>{/* app routes */}</OpenEditorNativeProvider>;
+}
+```
+
+The self-contained offline runtime is packaged with the component, so Metro
+asset customization is not required:
 
 ```tsx
 const editor = useRef<OpenEditorNativeController>(null);
@@ -46,6 +75,18 @@ const editor = useRef<OpenEditorNativeController>(null);
 />
 ```
 
+The default toolbar is a keyboard-sticky, inset pill that meets the keyboard
+edge without a synthetic spacer. It uses native iOS glass and a theme-aware
+material fallback elsewhere. A custom `renderToolbar` returns only the toolbar
+content; the SDK still owns its glass surface and positioning, so do not add
+another `KeyboardStickyView` or outer background. Use `toolbarContentInset`
+when the custom toolbar needs more than the default 76-point document clearance,
+and `toolbarOffset` only when the keyboard edge itself needs a different gap.
+
+The editor host must reach the screen's bottom edge. Do not wrap the editor in
+a bottom-padding `SafeAreaView`; the keyboard owns that edge while editing, and
+reserving the home-indicator inset there creates a visible toolbar gap.
+
 The block picker derives its available page, image, and attachment commands
 from the supplied effect handlers. If the application cannot upload media to a
 durable URL, omit the corresponding picker effect rather than returning a

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { OpenEditorNative, type OpenEditorNativeContentInsets, type OpenEditorNativeProps, type OpenEditorNativeTheme, } from "./native-editor.js";
+export { OpenEditorNativeProvider, type OpenEditorNativeProviderProps, } from "./native-provider.js";
 export { type OpenEditorNativeController, type OpenEditorNativeControllerEvent, type OpenEditorNativeEffectHandlers, } from "./controller.js";
 export { OpenEditorNativeToolbar, defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, type OpenEditorNativeToolbarItem, type OpenEditorNativeToolbarProps, } from "./toolbar-host.js";
+export { resolveOpenEditorNativeTheme, type OpenEditorNativeColorScheme, type ResolvedOpenEditorNativeTheme, } from "./theme.js";
 export type { OpenEditorRuntimeCommand, OpenEditorRuntimeState } from "@openeditor/embedded-runtime";

package/dist/index.js

@@ -1,2 +1,4 @@
 export { OpenEditorNative, } from "./native-editor.js";
+export { OpenEditorNativeProvider, } from "./native-provider.js";
 export { OpenEditorNativeToolbar, defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-host.js";
+export { resolveOpenEditorNativeTheme, } from "./theme.js";

package/dist/native-editor.d.ts

@@ -1,21 +1,20 @@
-import type { OpenEditorDocument } from "@openeditor/core";
+import type { OpenEditorDocument, OpenEditorPageSnapshot } from "@openeditor/core";
+import type { GlassColorScheme } from "expo-glass-effect";
 import { type OpenEditorRuntimeState, type OpenEditorNativeEffectName, type OpenEditorTheme } from "@openeditor/embedded-runtime";
 import { type ReactNode, type RefAttributes } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 import { type WebViewProps } from "react-native-webview";
 import { type OpenEditorNativeController, type OpenEditorNativeEffectHandlers } from "./controller.js";
 import { type OpenEditorNativeToolbarItem } from "./toolbar-host.js";
+import { type OpenEditorNativeContentInsets } from "./native-layout.js";
+export type { OpenEditorNativeContentInsets } from "./native-layout.js";
 export type OpenEditorNativeTheme = Partial<OpenEditorTheme>;
-export type OpenEditorNativeContentInsets = {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};
 type EdgeInsets = OpenEditorNativeContentInsets;
 type OwnedWebViewProps = "source" | "onMessage" | "style" | "scrollEnabled" | "nestedScrollEnabled";
 export type OpenEditorNativeProps = {
     initialDocument: OpenEditorDocument;
+    /** Page metadata rendered inside the shared, scroll-owned document surface. */
+    page?: OpenEditorPageSnapshot;
     editable?: boolean;
     placeholder?: string;
     theme?: OpenEditorNativeTheme;
@@ -24,7 +23,9 @@ export type OpenEditorNativeProps = {
     toolbarItems?: readonly OpenEditorNativeToolbarItem[];
     renderToolbar?: (context: {
         availableNativeEffects: readonly OpenEditorNativeEffectName[];
+        blockHandlesVisible: boolean;
         controller: OpenEditorNativeController;
+        setBlockHandlesVisible: (visible: boolean) => void;
         state: OpenEditorRuntimeState;
     }) => ReactNode;
     nativeEffects?: OpenEditorNativeEffectHandlers;
@@ -34,10 +35,14 @@ export type OpenEditorNativeProps = {
     }) => void;
     onReady?: (controller: OpenEditorNativeController) => void;
     onError?: (error: Error) => void;
-    keyboardVerticalOffset?: number;
-    keyboardAvoidanceEnabled?: boolean;
+    toolbarContentInset?: number;
+    toolbarOffset?: {
+        closed?: number;
+        opened?: number;
+    };
+    toolbarColorScheme?: GlassColorScheme;
+    toolbarContainerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     webViewProps?: Omit<WebViewProps, OwnedWebViewProps>;
 };
 export declare const OpenEditorNative: import("react").ForwardRefExoticComponent<OpenEditorNativeProps & RefAttributes<OpenEditorNativeController>>;
-export {};

package/dist/native-editor.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getOpenEditorThemeEntries, openEditorThemeCssName, openEditorThemeTokenNames, } from "@openeditor/embedded-runtime";
 import { openEditorEmbeddedSurfaceHtml } from "@openeditor/embedded-surface/html";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, View, } from "react-native";
+import { Keyboard, Platform, StyleSheet, useColorScheme, View, } from "react-native";
+import { KeyboardStickyView } from "react-native-keyboard-controller";
 import { WebView, } from "react-native-webview";
 import { emptyOpenEditorNativeState, isOpenEditorNativeLifecycleCancellation, OpenEditorNativeBridge, } from "./controller.js";
 import { OpenEditorNativeToolbar, } from "./toolbar-host.js";
-const ZERO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+import { OpenEditorNativeToolbarSurface } from "./toolbar-surface.js";
+import { OPENEDITOR_NATIVE_TOOLBAR_OFFSET, OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET, OPENEDITOR_NATIVE_TOOLBAR_HEIGHT, OPENEDITOR_NATIVE_TOOLBAR_RADIUS, resolveOpenEditorNativeContentInsets, } from "./native-layout.js";
+import { resolveOpenEditorNativeTheme } from "./theme.js";
+const DEFAULT_INSETS = { top: 0, right: 16, bottom: 0, left: 16 };
 const HostWebView = WebView;
-export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDocument, editable = true, placeholder = "Start writing…", theme, contentInsets = ZERO_INSETS, showToolbar = true, toolbarItems, renderToolbar, nativeEffects, onDocumentChanged, onReady, onError, keyboardVerticalOffset = 0, keyboardAvoidanceEnabled = true, style, webViewProps, }, forwardedRef) {
+export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDocument, page, editable = true, placeholder = "Start writing…", theme, contentInsets = DEFAULT_INSETS, showToolbar = true, toolbarItems, renderToolbar, nativeEffects, onDocumentChanged, onReady, onError, toolbarContentInset = OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET, toolbarOffset = OPENEDITOR_NATIVE_TOOLBAR_OFFSET, toolbarColorScheme, toolbarContainerStyle, style, webViewProps, }, forwardedRef) {
+    const systemColorScheme = useColorScheme();
+    const resolvedColorScheme = systemColorScheme === "dark" ? "dark" : "light";
+    const resolvedTheme = useMemo(() => resolveOpenEditorNativeTheme(theme, resolvedColorScheme), [resolvedColorScheme, theme]);
+    const resolvedToolbarColorScheme = toolbarColorScheme ?? resolvedColorScheme;
     const webViewRef = useRef(null);
     const sessionIdRef = useRef(`native_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`);
     const callbacksRef = useRef({
@@ -19,9 +26,11 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
     });
     callbacksRef.current = { nativeEffects, onDocumentChanged, onError, onReady };
     const initialDocumentRef = useRef(initialDocument);
-    const initialConfigRef = useRef({ editable, placeholder, theme });
+    const initialConfigRef = useRef({ editable, placeholder, theme: resolvedTheme });
     const initializedRef = useRef(false);
+    const bridgeLifetimeRef = useRef(0);
     const [editorState, setEditorState] = useState(emptyOpenEditorNativeState);
+    const [blockHandlesVisible, setBlockHandlesVisible] = useState(false);
     const [keyboardVisible, setKeyboardVisible] = useState(() => Keyboard.isVisible?.() ?? false);
     const [bridge] = useState(() => new OpenEditorNativeBridge({
         sessionId: sessionIdRef.current,
@@ -37,22 +46,30 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
         baseUrl: "https://openeditor.local/",
     }), []);
     useImperativeHandle(forwardedRef, () => bridge, [bridge]);
-    const resolvedInsets = {
-        top: contentInsets.top ?? 0,
-        right: contentInsets.right ?? 0,
-        bottom: contentInsets.bottom ?? 0,
-        left: contentInsets.left ?? 0,
-    };
+    const resolvedInsets = resolveOpenEditorNativeContentInsets({
+        contentInsets,
+        editable,
+        showToolbar,
+        toolbarContentInset,
+    });
     const availableNativeEffects = Object.keys(nativeEffects ?? {});
     const hostConfig = JSON.stringify({
         availableNativeEffects,
+        blockHandles: editable && blockHandlesVisible,
         contentInsets: resolvedInsets,
+        page,
         placeholder,
         sessionId: sessionIdRef.current,
-        theme,
+        theme: resolvedTheme,
     });
     const injectedConfig = `window.__OPENEDITOR_NATIVE_HOST__=${hostConfig};true;`;
-    const themeUpdateScript = `(()=>{const root=document.documentElement;for(const name of ${JSON.stringify(openEditorThemeTokenNames.map(openEditorThemeCssName))})root.style.removeProperty(name);for(const [name,value] of ${JSON.stringify(getOpenEditorThemeEntries(theme ?? {}))})root.style.setProperty(name,value);const background=${JSON.stringify(theme?.surface ?? "")};const text=${JSON.stringify(theme?.text ?? "")};background?root.style.setProperty("--oe-native-background",background):root.style.removeProperty("--oe-native-background");text?root.style.setProperty("--oe-native-text",text):root.style.removeProperty("--oe-native-text");})();true;`;
+    const hostConfigUpdateScript = `window.dispatchEvent(new CustomEvent("openeditor:host-config",{detail:${JSON.stringify({
+        blockHandles: editable && blockHandlesVisible,
+        contentInsets: resolvedInsets,
+        page,
+        placeholder,
+        theme: resolvedTheme,
+    })}}));true;`;
     const initializeRuntime = useCallback(() => {
         if (!bridge.runtimeReady || initializedRef.current)
             return;
@@ -79,13 +96,11 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
         });
     }, [bridge]);
     useEffect(() => {
-        webViewRef.current?.injectJavaScript(themeUpdateScript);
-    }, [themeUpdateScript]);
+        webViewRef.current?.injectJavaScript(hostConfigUpdateScript);
+    }, [hostConfigUpdateScript]);
     useEffect(() => {
-        const showSubscription = Keyboard.addListener("keyboardDidShow", () => setKeyboardVisible(true));
-        const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
-            setKeyboardVisible(false);
-        });
+        const showSubscription = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow", () => setKeyboardVisible(true));
+        const hideSubscription = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide", () => setKeyboardVisible(false));
         return () => {
             showSubscription.remove();
             hideSubscription.remove();
@@ -114,11 +129,17 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
                 callbacksRef.current.onError?.(new Error(`${event.code}: ${event.message}`));
             }
         });
+        return unsubscribe;
+    }, [bridge, initializeRuntime]);
+    useEffect(() => {
+        const lifetime = ++bridgeLifetimeRef.current;
         return () => {
-            unsubscribe();
-            bridge.dispose();
+            queueMicrotask(() => {
+                if (bridgeLifetimeRef.current === lifetime)
+                    bridge.dispose();
+            });
         };
-    }, [bridge, initializeRuntime]);
+    }, [bridge]);
     useEffect(() => {
         let active = true;
         void bridge
@@ -140,11 +161,18 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
         }
         initializeRuntime();
     };
+    const toolbarEnabled = showToolbar && editable;
     const shouldRenderToolbar = showToolbar && editable && editorState.focused && keyboardVisible;
-    const toolbar = renderToolbar && shouldRenderToolbar ? (renderToolbar({ availableNativeEffects, controller: bridge, state: editorState })) : shouldRenderToolbar ? (_jsx(OpenEditorNativeToolbar, { availableNativeEffects: availableNativeEffects, controller: bridge, items: toolbarItems, onCommandError: (error) => callbacksRef.current.onError?.(error), state: editorState, theme: theme })) : null;
-    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : "height", enabled: keyboardAvoidanceEnabled, keyboardVerticalOffset: keyboardVerticalOffset, style: [
+    const toolbar = renderToolbar && shouldRenderToolbar ? (renderToolbar({
+        availableNativeEffects,
+        blockHandlesVisible,
+        controller: bridge,
+        setBlockHandlesVisible,
+        state: editorState,
+    })) : !renderToolbar && toolbarEnabled ? (_jsx(OpenEditorNativeToolbar, { availableNativeEffects: availableNativeEffects, blockHandlesVisible: blockHandlesVisible, controller: bridge, items: toolbarItems, onBlockHandlesVisibleChange: setBlockHandlesVisible, onCommandError: (error) => callbacksRef.current.onError?.(error), state: editorState, style: styles.toolbarContent, theme: resolvedTheme, visible: shouldRenderToolbar })) : null;
+    return (_jsxs(View, { style: [
             styles.host,
-            { backgroundColor: theme?.surface ?? "#ffffff" },
+            { backgroundColor: resolvedTheme.surface },
             style,
         ], children: [_jsx(View, { style: styles.webViewContainer, children: _jsx(HostWebView, { ...webViewProps, allowsBackForwardNavigationGestures: false, bounces: webViewProps?.bounces ?? true, injectedJavaScriptBeforeContentLoaded: injectedConfig, javaScriptEnabled: true, hideKeyboardAccessoryView: webViewProps?.hideKeyboardAccessoryView ?? true, nestedScrollEnabled: true, onLoadStart: (event) => {
                         initializedRef.current = false;
@@ -160,12 +188,27 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
                     ], ref: webViewRef, scrollEnabled: true, source: runtimeSource, style: [
                         styles.webView,
                         {
-                            backgroundColor: theme?.surface ?? "#ffffff",
+                            backgroundColor: resolvedTheme.surface,
                         },
-                    ] }) }), toolbar] }));
+                    ] }) }), toolbarEnabled ? (_jsx(KeyboardStickyView, { offset: toolbarOffset, pointerEvents: "box-none", style: [styles.toolbarContainer, toolbarContainerStyle], children: _jsx(OpenEditorNativeToolbarSurface, { active: shouldRenderToolbar, colorScheme: resolvedToolbarColorScheme, theme: resolvedTheme, children: toolbar }) })) : null] }));
 });
 const styles = StyleSheet.create({
     host: { flex: 1, minHeight: 0 },
     webViewContainer: { flex: 1, minHeight: 0, overflow: "hidden" },
     webView: { flex: 1 },
+    toolbarContainer: {
+        bottom: 0,
+        borderRadius: OPENEDITOR_NATIVE_TOOLBAR_RADIUS,
+        height: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+        left: 12,
+        overflow: "hidden",
+        position: "absolute",
+        right: 12,
+        zIndex: 20,
+    },
+    toolbarContent: {
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        minHeight: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+    },
 });

package/dist/native-layout.d.ts

@@ -0,0 +1,20 @@
+export type OpenEditorNativeContentInsets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const OPENEDITOR_NATIVE_TOOLBAR_HEIGHT = 46;
+export declare const OPENEDITOR_NATIVE_TOOLBAR_RADIUS: number;
+export declare const OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET = 70;
+export declare const OPENEDITOR_NATIVE_TOOLBAR_OFFSET: {
+    readonly closed: 0;
+    /** Keep the intentional breathing room above the software keyboard. */
+    readonly opened: -8;
+};
+export declare const resolveOpenEditorNativeContentInsets: ({ contentInsets, editable, showToolbar, toolbarContentInset, }: {
+    contentInsets: Partial<OpenEditorNativeContentInsets>;
+    editable: boolean;
+    showToolbar: boolean;
+    toolbarContentInset: number;
+}) => OpenEditorNativeContentInsets;

package/dist/native-layout.js

@@ -0,0 +1,15 @@
+export const OPENEDITOR_NATIVE_TOOLBAR_HEIGHT = 46;
+export const OPENEDITOR_NATIVE_TOOLBAR_RADIUS = OPENEDITOR_NATIVE_TOOLBAR_HEIGHT / 2;
+export const OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET = 70;
+export const OPENEDITOR_NATIVE_TOOLBAR_OFFSET = {
+    closed: 0,
+    /** Keep the intentional breathing room above the software keyboard. */
+    opened: -8,
+};
+export const resolveOpenEditorNativeContentInsets = ({ contentInsets, editable, showToolbar, toolbarContentInset, }) => ({
+    top: contentInsets.top ?? 0,
+    right: contentInsets.right ?? 0,
+    bottom: (contentInsets.bottom ?? 0) +
+        (showToolbar && editable ? toolbarContentInset : 0),
+    left: contentInsets.left ?? 0,
+});

package/dist/native-provider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement, ReactNode } from "react";
+export type OpenEditorNativeProviderProps = {
+    children: ReactNode;
+};
+/**
+ * Owns the native keyboard animation context used by OpenEditor's toolbar.
+ * Mount once above every OpenEditorNative instance, normally at the app root.
+ */
+export declare function OpenEditorNativeProvider({ children }: OpenEditorNativeProviderProps): ReactElement;

package/dist/native-provider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KeyboardProvider } from "react-native-keyboard-controller";
+/**
+ * Owns the native keyboard animation context used by OpenEditor's toolbar.
+ * Mount once above every OpenEditorNative instance, normally at the app root.
+ */
+export function OpenEditorNativeProvider({ children }) {
+    return _jsx(KeyboardProvider, { children: children });
+}

package/dist/theme.d.ts

@@ -0,0 +1,32 @@
+import type { OpenEditorTheme } from "@openeditor/embedded-runtime";
+export type OpenEditorNativeColorScheme = "light" | "dark";
+declare const LIGHT_THEME: {
+    surface: string;
+    surfaceRaised: string;
+    surfaceMuted: string;
+    interactionHover: string;
+    interactionSelected: string;
+    blockSurface: string;
+    text: string;
+    textSoft: string;
+    heading: string;
+    muted: string;
+    placeholder: string;
+    border: string;
+    borderStrong: string;
+    structuralLine: string;
+    accent: string;
+    accentText: string;
+    accentStrong: string;
+    buttonBackground: string;
+    buttonText: string;
+    codeBackground: string;
+    codeText: string;
+    link: string;
+    linkHover: string;
+    shadow: string;
+    fontSans: string;
+};
+export type ResolvedOpenEditorNativeTheme = typeof LIGHT_THEME;
+export declare const resolveOpenEditorNativeTheme: (theme: Partial<OpenEditorTheme> | undefined, colorScheme: OpenEditorNativeColorScheme) => ResolvedOpenEditorNativeTheme;
+export {};

package/dist/theme.js

@@ -0,0 +1,58 @@
+const LIGHT_THEME = {
+    surface: "#ffffff",
+    surfaceRaised: "#ffffff",
+    surfaceMuted: "#f5f5f5",
+    interactionHover: "#f5f5f5",
+    interactionSelected: "#e5e5e5",
+    blockSurface: "#fafafa",
+    text: "#171717",
+    textSoft: "#404040",
+    heading: "#0a0a0a",
+    muted: "#737373",
+    placeholder: "#a3a3a3",
+    border: "#e5e5e5",
+    borderStrong: "#d4d4d4",
+    structuralLine: "#e5e5e5",
+    accent: "#171717",
+    accentText: "#ffffff",
+    accentStrong: "#0a0a0a",
+    buttonBackground: "#ffffff",
+    buttonText: "#171717",
+    codeBackground: "#f5f5f5",
+    codeText: "#262626",
+    link: "#1d4ed8",
+    linkHover: "#1e40af",
+    shadow: "rgba(0,0,0,0.18)",
+    fontSans: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
+};
+const DARK_THEME = {
+    surface: "#111111",
+    surfaceRaised: "#1c1c1e",
+    surfaceMuted: "#27272a",
+    interactionHover: "#333336",
+    interactionSelected: "#3a3a3c",
+    blockSurface: "#1c1c1e",
+    text: "#f5f5f5",
+    textSoft: "#d4d4d4",
+    heading: "#fafafa",
+    muted: "#a3a3a3",
+    placeholder: "#737373",
+    border: "#333333",
+    borderStrong: "#525252",
+    structuralLine: "#333333",
+    accent: "#f5f5f5",
+    accentText: "#111111",
+    accentStrong: "#ffffff",
+    buttonBackground: "#27272a",
+    buttonText: "#f5f5f5",
+    codeBackground: "#1f1f1f",
+    codeText: "#e5e5e5",
+    link: "#60a5fa",
+    linkHover: "#93c5fd",
+    shadow: "rgba(0,0,0,0.60)",
+    fontSans: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
+};
+export const resolveOpenEditorNativeTheme = (theme, colorScheme) => ({
+    ...(colorScheme === "dark" ? DARK_THEME : LIGHT_THEME),
+    ...theme,
+});

package/dist/toolbar-host.d.ts

@@ -13,5 +13,8 @@ export type OpenEditorNativeToolbarProps = {
     theme?: OpenEditorNativeTheme;
     style?: StyleProp<ViewStyle>;
     onCommandError?: (error: Error) => void;
+    visible?: boolean;
+    blockHandlesVisible?: boolean;
+    onBlockHandlesVisibleChange?: (visible: boolean) => void;
 };
-export declare const OpenEditorNativeToolbar: import("react").MemoExoticComponent<({ availableNativeEffects, controller, state, items, theme, style, onCommandError, }: OpenEditorNativeToolbarProps) => import("react").JSX.Element>;
+export declare const OpenEditorNativeToolbar: import("react").MemoExoticComponent<({ availableNativeEffects, controller, state, items, theme, style, onCommandError, visible, blockHandlesVisible, onBlockHandlesVisibleChange, }: OpenEditorNativeToolbarProps) => import("react").JSX.Element>;

package/dist/toolbar-host.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BottomSheet as UniversalBottomSheet, Button as NativeButton, Column as NativeColumn, ListItem as NativeListItem, RNHostView as NativeRNHostView, Row as NativeRow, ScrollView as NativeScrollView, Spacer as NativeSpacer, Text as NativeText, } from "@expo/ui";
+import { BottomSheet as SwiftUIBottomSheet, Group as SwiftUIGroup, Host as SwiftUIHost, } from "@expo/ui/swift-ui";
+import { accessibilityLabel as nativeAccessibilityLabel, frame as nativeFrame, glassEffect, padding as nativePadding, presentationDetents, presentationDragIndicator, } from "@expo/ui/swift-ui/modifiers";
+import { openEditorIcons } from "@openeditor/icons";
+import { HugeiconsIcon } from "@hugeicons/react-native";
 import { memo, useRef, useState } from "react";
-import { Keyboard, Modal, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
+import { Keyboard, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
 import { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, openEditorNativeTableToolbarItems, } from "./toolbar-items.js";
 export { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-items.js";
 const isItemActive = (item, state) => (item.activeWhen?.block !== undefined &&
@@ -8,11 +13,33 @@ const isItemActive = (item, state) => (item.activeWhen?.block !== undefined &&
     (item.activeWhen?.headingLevel === undefined ||
         state.headingLevel === item.activeWhen.headingLevel)) ||
     (item.activeWhen?.mark !== undefined &&
-        state.activeMarks.includes(item.activeWhen.mark));
+        state.activeMarks.includes(item.activeWhen.mark)) ||
+    (item.activeWhen?.table !== undefined &&
+        state.table?.[item.activeWhen.table] === true);
 const isItemDisabled = (item, state) => !state.editable ||
     (item.disabledWhen === "cannotUndo" && !state.canUndo) ||
-    (item.disabledWhen === "cannotRedo" && !state.canRedo);
-export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ availableNativeEffects = [], controller, state, items = defaultOpenEditorNativeToolbarItems, theme, style, onCommandError, }) {
+    (item.disabledWhen === "cannotRedo" && !state.canRedo) ||
+    (item.disabledWhen === "cannotMergeCells" && !state.table?.canMergeCells);
+const TOOLBAR_BUTTON_SIZE = 32;
+const IOS_BLOCK_PICKER_PRESENTATION_MODIFIERS = [
+    nativeFrame({ alignment: "topLeading", maxWidth: Infinity }),
+    nativePadding({ leading: 16, top: 16, trailing: 16 }),
+    presentationDragIndicator("visible"),
+    presentationDetents(["medium", "large"]),
+];
+/**
+ * Expo's universal wrapper maps `onDismiss` to the binding-change event on
+ * iOS, losing SwiftUI's actual post-animation dismissal callback. Editor
+ * commands need that real lifecycle boundary so focus-owning native effects do
+ * not race the outgoing sheet.
+ */
+const NativeBlockPickerSheet = ({ children, isPresented, onDismiss, onIsPresentedChange, }) => {
+    if (Platform.OS !== "ios") {
+        return (_jsx(UniversalBottomSheet, { isPresented: isPresented, onDismiss: onDismiss, showDragIndicator: true, snapPoints: ["half", "full"], testID: "openeditor-block-picker", children: children }));
+    }
+    return (_jsx(SwiftUIHost, { pointerEvents: "none", style: { position: "absolute" }, children: _jsx(SwiftUIBottomSheet, { isPresented: isPresented, onDismiss: onDismiss, onIsPresentedChange: onIsPresentedChange, testID: "openeditor-block-picker", children: _jsx(SwiftUIGroup, { modifiers: IOS_BLOCK_PICKER_PRESENTATION_MODIFIERS, children: children }) }) }));
+};
+export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ availableNativeEffects = [], controller, state, items = defaultOpenEditorNativeToolbarItems, theme, style, onCommandError, visible = true, blockHandlesVisible = false, onBlockHandlesVisibleChange, }) {
     const [blockPickerOpen, setBlockPickerOpen] = useState(false);
     const [linkEditorOpen, setLinkEditorOpen] = useState(false);
     const [linkValue, setLinkValue] = useState("");
@@ -42,34 +69,35 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
             return availableNativeEffects.includes("createPage");
         return true;
     });
-    return (_jsxs(View, { style: [
-            styles.root,
-            { backgroundColor: colors.background, borderColor: colors.border },
-            style,
-        ], children: [_jsx(ScrollView, { contentContainerStyle: styles.content, horizontal: true, keyboardShouldPersistTaps: "always", showsHorizontalScrollIndicator: false, children: state.activeNodes.includes("table")
-                    ? openEditorNativeTableToolbarItems.map((item) => {
+    const blockPickerGroups = blockPickerItems.reduce((groups, item) => {
+        const current = groups.at(-1);
+        if (current?.label === item.group)
+            current.items.push(item);
+        else
+            groups.push({ label: item.group, items: [item] });
+        return groups;
+    }, []);
+    const visibleToolbarItems = state.activeNodes.includes("table")
+        ? [
+            ...defaultOpenEditorNativeToolbarItems.filter((item) => item.action === "toggleBlockHandles"),
+            ...openEditorNativeTableToolbarItems.filter((item) => item.key === "table-split-cell"
+                ? state.table?.canSplitCell
+                : item.key !== "table-merge-cells" || !state.table?.canSplitCell),
+        ]
+        : items;
+    return (_jsxs(_Fragment, { children: [visible ? (_jsx(View, { style: [styles.root, style], children: _jsx(ScrollView, { contentContainerStyle: styles.content, horizontal: true, keyboardShouldPersistTaps: "always", showsHorizontalScrollIndicator: false, children: visibleToolbarItems.map((item) => {
+                        const active = item.action === "toggleBlockHandles"
+                            ? blockHandlesVisible
+                            : isItemActive(item, state);
                         const disabled = isItemDisabled(item, state);
-                        return (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "button", accessibilityState: { disabled }, disabled: disabled, onPress: () => {
-                                if (!item.command) {
-                                    Keyboard.dismiss();
-                                    runCommand(controller.blur());
+                        const accessibilityLabel = item.action === "toggleBlockHandles" && blockHandlesVisible
+                            ? "Hide block handles"
+                            : item.label;
+                        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", accessibilityState: { disabled, selected: active }, disabled: disabled, hitSlop: 6, onPress: () => {
+                                if (item.action === "toggleBlockHandles") {
+                                    onBlockHandlesVisibleChange?.(!blockHandlesVisible);
                                     return;
                                 }
-                                runCommand(controller.command(item.command));
-                            }, style: ({ pressed }) => [
-                                styles.button,
-                                { borderColor: colors.border },
-                                pressed && styles.pressed,
-                                disabled && styles.disabled,
-                            ], children: _jsx(Text, { style: [
-                                    styles.label,
-                                    { color: disabled ? colors.muted : colors.text },
-                                ], children: item.label }) }, item.key));
-                    })
-                    : items.map((item) => {
-                        const active = isItemActive(item, state);
-                        const disabled = isItemDisabled(item, state);
-                        return (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "button", accessibilityState: { disabled, selected: active }, disabled: disabled, onPress: () => {
                                 if (item.action === "openBlockPicker") {
                                     pickerSelectionRef.current =
                                         state.selection.type === "text"
@@ -94,43 +122,51 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
                                 runCommand(controller.command(item.command));
                             }, style: ({ pressed }) => [
                                 styles.button,
-                                { borderColor: active ? colors.accent : colors.border },
                                 active && { backgroundColor: colors.accent },
                                 pressed && styles.pressed,
                                 disabled && styles.disabled,
-                            ], children: _jsx(Text, { style: [
-                                    styles.label,
-                                    {
-                                        color: active
-                                            ? colors.accentText
-                                            : disabled
-                                                ? colors.muted
-                                                : colors.text,
-                                    },
-                                ], children: item.label }) }, item.key));
-                    }) }), _jsx(Modal, { animationType: "slide", onDismiss: () => {
+                            ], children: _jsx(HugeiconsIcon, { accessible: false, color: active
+                                    ? colors.accentText
+                                    : disabled
+                                        ? colors.muted
+                                        : colors.text, icon: openEditorIcons[item.icon], size: 20, strokeWidth: 1.8 }) }, item.key));
+                    }) }) })) : null, _jsx(NativeBlockPickerSheet, { isPresented: blockPickerOpen, onDismiss: () => {
                     const block = pendingBlockRef.current;
                     pendingBlockRef.current = null;
                     pickerSelectionRef.current = undefined;
-                    if (block)
-                        runCommand(controller.command(block));
-                }, onRequestClose: () => setBlockPickerOpen(false), presentationStyle: "pageSheet", visible: blockPickerOpen, children: _jsxs(View, { style: [styles.sheet, { backgroundColor: colors.background }], children: [_jsxs(View, { style: [styles.sheetHeader, { borderBottomColor: colors.border }], children: [_jsx(Text, { accessibilityRole: "header", style: [styles.sheetTitle, { color: colors.text }], children: "Insert block" }), _jsx(Pressable, { accessibilityLabel: "Close block picker", accessibilityRole: "button", onPress: () => setBlockPickerOpen(false), children: _jsx(Text, { style: [styles.sheetClose, { color: colors.accent }], children: "Done" }) })] }), _jsx(ScrollView, { contentContainerStyle: styles.sheetContent, children: blockPickerItems.map((item, index) => {
-                                const previousGroup = index > 0
-                                    ? blockPickerItems[index - 1]?.group
-                                    : undefined;
-                                return (_jsxs(View, { children: [item.group !== previousGroup ? (_jsx(Text, { style: [styles.groupLabel, { color: colors.muted }], children: item.group })) : null, _jsx(Pressable, { accessibilityLabel: `Insert ${item.label}`, accessibilityRole: "button", onPress: () => {
+                    if (block) {
+                        runCommand(controller.command(block).then(() => controller.focus()));
+                    }
+                }, onIsPresentedChange: setBlockPickerOpen, children: _jsxs(NativeColumn, { alignment: "start", spacing: 0, style: { height: "100%", width: "100%" }, children: [_jsxs(NativeRow, { alignment: "center", spacing: 8, style: { paddingBottom: 10, width: "100%" }, children: [_jsx(NativeButton, { modifiers: Platform.OS === "ios"
+                                        ? [
+                                            nativeAccessibilityLabel("Cancel"),
+                                            glassEffect({
+                                                glass: { interactive: true, variant: "clear" },
+                                                shape: "circle",
+                                            }),
+                                        ]
+                                        : undefined, onPress: () => setBlockPickerOpen(false), style: { borderRadius: 18, height: 36, width: 36 }, testID: "close-block-picker", variant: "text", children: _jsx(NativeRNHostView, { matchContents: true, children: _jsx(View, { style: { height: 18, width: 18 }, children: _jsx(HugeiconsIcon, { accessible: false, color: colors.text, icon: openEditorIcons.close, size: 18, strokeWidth: 1.8 }) }) }) }), _jsx(NativeSpacer, { flexible: true }), _jsx(NativeText, { testID: "block-picker-title", textStyle: { fontSize: 17, fontWeight: "600" }, children: "Insert block" }), _jsx(NativeSpacer, { flexible: true }), _jsx(NativeButton, { modifiers: Platform.OS === "ios"
+                                        ? [
+                                            nativeAccessibilityLabel("Done"),
+                                            glassEffect({
+                                                glass: { interactive: true, variant: "clear" },
+                                                shape: "circle",
+                                            }),
+                                        ]
+                                        : undefined, onPress: () => setBlockPickerOpen(false), style: { borderRadius: 18, height: 36, width: 36 }, testID: "done-block-picker", variant: "text", children: _jsx(NativeRNHostView, { matchContents: true, children: _jsx(View, { style: { height: 18, width: 18 }, children: _jsx(HugeiconsIcon, { accessible: false, color: colors.text, icon: openEditorIcons.check, size: 18, strokeWidth: 1.8 }) }) }) })] }), _jsx(NativeScrollView, { showsIndicators: true, style: { height: "100%", width: "100%" }, children: _jsx(NativeColumn, { alignment: "start", spacing: 20, style: { width: "100%" }, children: blockPickerGroups.map((group) => (_jsxs(NativeColumn, { alignment: "start", spacing: 4, style: { width: "100%" }, children: [_jsx(NativeText, { textStyle: {
+                                                color: colors.muted,
+                                                fontSize: 12,
+                                                fontWeight: "600",
+                                            }, children: group.label }), group.items.map((item) => (_jsx(NativeListItem, { leading: (_jsx(HugeiconsIcon, { accessible: false, color: colors.text, icon: openEditorIcons[item.icon], size: 20, strokeWidth: 1.8 })), modifiers: Platform.OS === "ios"
+                                                ? [nativePadding({ vertical: 10 })]
+                                                : undefined, onPress: () => {
                                                 pendingBlockRef.current = {
                                                     type: "insertBlock",
                                                     block: item.key,
                                                     selection: pickerSelectionRef.current,
                                                 };
                                                 setBlockPickerOpen(false);
-                                            }, style: ({ pressed }) => [
-                                                styles.blockPickerItem,
-                                                { borderBottomColor: colors.border },
-                                                pressed && styles.pressed,
-                                            ], children: _jsx(Text, { style: [styles.blockPickerLabel, { color: colors.text }], children: item.label }) })] }, item.key));
-                            }) })] }) }), _jsx(Modal, { animationType: "fade", onRequestClose: () => setLinkEditorOpen(false), presentationStyle: "formSheet", visible: linkEditorOpen, children: _jsxs(View, { style: [styles.linkSheet, { backgroundColor: colors.background }], children: [_jsx(Text, { accessibilityRole: "header", style: [styles.sheetTitle, { color: colors.text }], children: "Edit link" }), _jsx(TextInput, { accessibilityLabel: "Link URL", autoCapitalize: "none", autoCorrect: false, onChangeText: setLinkValue, placeholder: "https://example.com", placeholderTextColor: colors.muted, style: [
+                                            }, testID: `insert-${item.key}`, trailing: (_jsx(HugeiconsIcon, { accessible: false, color: colors.muted, icon: openEditorIcons.chevronRight, size: 16, strokeWidth: 1.8 })), children: _jsx(NativeText, { children: item.label }, `${item.key}-label`) }, item.key)))] }, group.label))) }) })] }) }), _jsx(Modal, { animationType: "fade", onRequestClose: () => setLinkEditorOpen(false), presentationStyle: "formSheet", visible: linkEditorOpen, children: _jsxs(View, { style: [styles.linkSheet, { backgroundColor: colors.background }], children: [_jsx(Text, { accessibilityRole: "header", style: [styles.sheetTitle, { color: colors.text }], children: "Edit link" }), _jsx(TextInput, { accessibilityLabel: "Link URL", autoCapitalize: "none", autoCorrect: false, onChangeText: setLinkValue, placeholder: "https://example.com", placeholderTextColor: colors.muted, style: [
                                 styles.linkInput,
                                 { borderColor: colors.border, color: colors.text },
                             ], value: linkValue }), _jsxs(View, { style: styles.linkActions, children: [_jsx(Pressable, { accessibilityLabel: "Cancel link editing", accessibilityRole: "button", onPress: () => setLinkEditorOpen(false), style: styles.linkAction, children: _jsx(Text, { style: { color: colors.text }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityLabel: "Remove", accessibilityRole: "button", onPress: () => {
@@ -144,55 +180,24 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
 });
 const styles = StyleSheet.create({
     root: {
-        borderWidth: StyleSheet.hairlineWidth,
-        minHeight: 52,
+        minHeight: 46,
     },
     content: {
         alignItems: "center",
-        gap: 8,
-        paddingHorizontal: 10,
+        gap: 6,
+        paddingHorizontal: 8,
         paddingVertical: 7,
     },
     button: {
         alignItems: "center",
-        borderRadius: 8,
-        borderWidth: 1,
+        borderRadius: TOOLBAR_BUTTON_SIZE / 2,
+        height: TOOLBAR_BUTTON_SIZE,
         justifyContent: "center",
-        minHeight: 36,
-        minWidth: 40,
-        paddingHorizontal: 10,
-    },
-    label: {
-        fontSize: 13,
-        fontWeight: "600",
+        width: TOOLBAR_BUTTON_SIZE,
     },
     pressed: { opacity: 0.64 },
     disabled: { opacity: 0.42 },
-    sheet: { flex: 1 },
-    sheetHeader: {
-        alignItems: "center",
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        minHeight: 56,
-        paddingHorizontal: 20,
-    },
     sheetTitle: { fontSize: 18, fontWeight: "700" },
-    sheetClose: { fontSize: 16, fontWeight: "600" },
-    sheetContent: { paddingBottom: 32, paddingHorizontal: 20 },
-    groupLabel: {
-        fontSize: 12,
-        fontWeight: "700",
-        paddingBottom: 5,
-        paddingTop: 20,
-        textTransform: "uppercase",
-    },
-    blockPickerItem: {
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        minHeight: 48,
-        justifyContent: "center",
-    },
-    blockPickerLabel: { fontSize: 16, fontWeight: "500" },
     linkSheet: { flex: 1, gap: 20, justifyContent: "center", padding: 24 },
     linkInput: {
         borderRadius: 10,

package/dist/toolbar-items.d.ts

@@ -1,88 +1,109 @@
 import type { OpenEditorRuntimeCommand } from "@openeditor/embedded-runtime";
+import type { OpenEditorIconName } from "@openeditor/icons";
 export type OpenEditorNativeToolbarItem = {
     key: string;
     label: string;
+    icon: OpenEditorIconName;
     command?: OpenEditorRuntimeCommand;
-    action?: "openBlockPicker" | "openLinkEditor" | "dismissKeyboard";
+    action?: "openBlockPicker" | "openLinkEditor" | "toggleBlockHandles" | "dismissKeyboard";
     activeWhen?: {
         block?: string;
         headingLevel?: number;
         mark?: string;
+        table?: "headerRow" | "headerColumn";
     };
-    disabledWhen?: "cannotUndo" | "cannotRedo";
+    disabledWhen?: "cannotUndo" | "cannotRedo" | "cannotMergeCells";
 };
 export declare const defaultOpenEditorNativeToolbarItems: readonly OpenEditorNativeToolbarItem[];
 export declare const openEditorNativeBlockPickerItems: readonly [{
     readonly key: "paragraph";
-    readonly label: "Paragraph";
+    readonly label: "Text";
     readonly group: "Text";
+    readonly icon: "text";
 }, {
     readonly key: "heading1";
     readonly label: "Heading 1";
     readonly group: "Text";
+    readonly icon: "heading1";
 }, {
     readonly key: "heading2";
     readonly label: "Heading 2";
     readonly group: "Text";
+    readonly icon: "heading2";
 }, {
     readonly key: "heading3";
     readonly label: "Heading 3";
     readonly group: "Text";
+    readonly icon: "heading3";
 }, {
     readonly key: "bulletList";
     readonly label: "Bullet list";
     readonly group: "Text";
+    readonly icon: "bulletList";
 }, {
     readonly key: "orderedList";
     readonly label: "Numbered list";
     readonly group: "Text";
+    readonly icon: "orderedList";
 }, {
     readonly key: "taskList";
     readonly label: "Task list";
     readonly group: "Text";
+    readonly icon: "taskList";
 }, {
     readonly key: "toggleList";
     readonly label: "Toggle list";
     readonly group: "Text";
+    readonly icon: "toggleList";
 }, {
     readonly key: "blockquote";
     readonly label: "Quote";
     readonly group: "Text";
+    readonly icon: "blockquote";
 }, {
     readonly key: "codeBlock";
     readonly label: "Code block";
     readonly group: "Text";
+    readonly icon: "codeBlock";
 }, {
     readonly key: "divider";
     readonly label: "Divider";
     readonly group: "Structure";
+    readonly icon: "divider";
 }, {
     readonly key: "columns";
     readonly label: "Columns";
     readonly group: "Layout";
+    readonly icon: "columns";
 }, {
     readonly key: "table";
     readonly label: "Table";
     readonly group: "Layout";
+    readonly icon: "table";
 }, {
     readonly key: "callout";
     readonly label: "Callout";
     readonly group: "Embed";
+    readonly icon: "callout";
 }, {
     readonly key: "diagram";
     readonly label: "Diagram";
     readonly group: "Embed";
+    readonly icon: "diagram";
 }, {
     readonly key: "page";
     readonly label: "Page";
     readonly group: "Embed";
+    readonly icon: "page";
 }, {
     readonly key: "image";
     readonly label: "Image";
     readonly group: "Media";
+    readonly icon: "image";
 }, {
     readonly key: "attachment";
     readonly label: "File";
     readonly group: "Media";
+    readonly icon: "attachment";
 }];
 export declare const openEditorNativeTableToolbarItems: readonly OpenEditorNativeToolbarItem[];

package/dist/toolbar-items.js

@@ -1,52 +1,57 @@
 export const defaultOpenEditorNativeToolbarItems = [
-    { key: "insert", label: "+ Block", action: "openBlockPicker" },
-    { key: "paragraph", label: "Text", command: { type: "setParagraph" }, activeWhen: { block: "paragraph" } },
-    { key: "heading-1", label: "H1", command: { type: "toggleHeading", level: 1 }, activeWhen: { block: "heading", headingLevel: 1 } },
-    { key: "heading-2", label: "H2", command: { type: "toggleHeading", level: 2 }, activeWhen: { block: "heading", headingLevel: 2 } },
-    { key: "bold", label: "B", command: { type: "toggleMark", mark: "bold" }, activeWhen: { mark: "bold" } },
-    { key: "italic", label: "I", command: { type: "toggleMark", mark: "italic" }, activeWhen: { mark: "italic" } },
-    { key: "underline", label: "U", command: { type: "toggleMark", mark: "underline" }, activeWhen: { mark: "underline" } },
-    { key: "strike", label: "S", command: { type: "toggleMark", mark: "strike" }, activeWhen: { mark: "strike" } },
-    { key: "code", label: "Code", command: { type: "toggleMark", mark: "code" }, activeWhen: { mark: "code" } },
-    { key: "link", label: "Link", action: "openLinkEditor", activeWhen: { mark: "link" } },
-    { key: "bullet-list", label: "• List", command: { type: "toggleList", list: "bullet" }, activeWhen: { block: "bulletList" } },
-    { key: "ordered-list", label: "1. List", command: { type: "toggleList", list: "ordered" }, activeWhen: { block: "orderedList" } },
-    { key: "task-list", label: "Tasks", command: { type: "toggleList", list: "task" }, activeWhen: { block: "taskList" } },
-    { key: "quote", label: "Quote", command: { type: "toggleBlockquote" }, activeWhen: { block: "blockquote" } },
-    { key: "code-block", label: "Code block", command: { type: "toggleCodeBlock" }, activeWhen: { block: "codeBlock" } },
-    { key: "undo", label: "Undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
-    { key: "redo", label: "Redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
-    { key: "keyboard", label: "Done", action: "dismissKeyboard" },
+    { key: "insert", label: "Insert block", icon: "addBlock", action: "openBlockPicker" },
+    { key: "handles", label: "Show block handles", icon: "dragHandle", action: "toggleBlockHandles" },
+    { key: "paragraph", label: "Text", icon: "text", command: { type: "setParagraph" }, activeWhen: { block: "paragraph" } },
+    { key: "heading-1", label: "Heading 1", icon: "heading1", command: { type: "toggleHeading", level: 1 }, activeWhen: { block: "heading", headingLevel: 1 } },
+    { key: "heading-2", label: "Heading 2", icon: "heading2", command: { type: "toggleHeading", level: 2 }, activeWhen: { block: "heading", headingLevel: 2 } },
+    { key: "bold", label: "Bold", icon: "bold", command: { type: "toggleMark", mark: "bold" }, activeWhen: { mark: "bold" } },
+    { key: "italic", label: "Italic", icon: "italic", command: { type: "toggleMark", mark: "italic" }, activeWhen: { mark: "italic" } },
+    { key: "underline", label: "Underline", icon: "underline", command: { type: "toggleMark", mark: "underline" }, activeWhen: { mark: "underline" } },
+    { key: "strike", label: "Strikethrough", icon: "strike", command: { type: "toggleMark", mark: "strike" }, activeWhen: { mark: "strike" } },
+    { key: "code", label: "Inline code", icon: "code", command: { type: "toggleMark", mark: "code" }, activeWhen: { mark: "code" } },
+    { key: "link", label: "Link", icon: "link", action: "openLinkEditor", activeWhen: { mark: "link" } },
+    { key: "bullet-list", label: "Bullet list", icon: "bulletList", command: { type: "toggleList", list: "bullet" }, activeWhen: { block: "bulletList" } },
+    { key: "ordered-list", label: "Numbered list", icon: "orderedList", command: { type: "toggleList", list: "ordered" }, activeWhen: { block: "orderedList" } },
+    { key: "task-list", label: "Task list", icon: "taskList", command: { type: "toggleList", list: "task" }, activeWhen: { block: "taskList" } },
+    { key: "quote", label: "Quote", icon: "blockquote", command: { type: "toggleBlockquote" }, activeWhen: { block: "blockquote" } },
+    { key: "code-block", label: "Code block", icon: "codeBlock", command: { type: "toggleCodeBlock" }, activeWhen: { block: "codeBlock" } },
+    { key: "undo", label: "Undo", icon: "undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
+    { key: "redo", label: "Redo", icon: "redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
+    { key: "keyboard", label: "Dismiss keyboard", icon: "keyboard", action: "dismissKeyboard" },
 ];
 export const openEditorNativeBlockPickerItems = [
-    { key: "paragraph", label: "Paragraph", group: "Text" },
-    { key: "heading1", label: "Heading 1", group: "Text" },
-    { key: "heading2", label: "Heading 2", group: "Text" },
-    { key: "heading3", label: "Heading 3", group: "Text" },
-    { key: "bulletList", label: "Bullet list", group: "Text" },
-    { key: "orderedList", label: "Numbered list", group: "Text" },
-    { key: "taskList", label: "Task list", group: "Text" },
-    { key: "toggleList", label: "Toggle list", group: "Text" },
-    { key: "blockquote", label: "Quote", group: "Text" },
-    { key: "codeBlock", label: "Code block", group: "Text" },
-    { key: "divider", label: "Divider", group: "Structure" },
-    { key: "columns", label: "Columns", group: "Layout" },
-    { key: "table", label: "Table", group: "Layout" },
-    { key: "callout", label: "Callout", group: "Embed" },
-    { key: "diagram", label: "Diagram", group: "Embed" },
-    { key: "page", label: "Page", group: "Embed" },
-    { key: "image", label: "Image", group: "Media" },
-    { key: "attachment", label: "File", group: "Media" },
+    { key: "paragraph", label: "Text", group: "Text", icon: "text" },
+    { key: "heading1", label: "Heading 1", group: "Text", icon: "heading1" },
+    { key: "heading2", label: "Heading 2", group: "Text", icon: "heading2" },
+    { key: "heading3", label: "Heading 3", group: "Text", icon: "heading3" },
+    { key: "bulletList", label: "Bullet list", group: "Text", icon: "bulletList" },
+    { key: "orderedList", label: "Numbered list", group: "Text", icon: "orderedList" },
+    { key: "taskList", label: "Task list", group: "Text", icon: "taskList" },
+    { key: "toggleList", label: "Toggle list", group: "Text", icon: "toggleList" },
+    { key: "blockquote", label: "Quote", group: "Text", icon: "blockquote" },
+    { key: "codeBlock", label: "Code block", group: "Text", icon: "codeBlock" },
+    { key: "divider", label: "Divider", group: "Structure", icon: "divider" },
+    { key: "columns", label: "Columns", group: "Layout", icon: "columns" },
+    { key: "table", label: "Table", group: "Layout", icon: "table" },
+    { key: "callout", label: "Callout", group: "Embed", icon: "callout" },
+    { key: "diagram", label: "Diagram", group: "Embed", icon: "diagram" },
+    { key: "page", label: "Page", group: "Embed", icon: "page" },
+    { key: "image", label: "Image", group: "Media", icon: "image" },
+    { key: "attachment", label: "File", group: "Media", icon: "attachment" },
 ];
 export const openEditorNativeTableToolbarItems = [
-    { key: "table-row-before", label: "+ Row ↑", command: { type: "addTableRow", after: false } },
-    { key: "table-row-after", label: "+ Row ↓", command: { type: "addTableRow" } },
-    { key: "table-delete-row", label: "− Row", command: { type: "deleteTableRow" } },
-    { key: "table-column-before", label: "+ Col ←", command: { type: "addTableColumn", after: false } },
-    { key: "table-column-after", label: "+ Col →", command: { type: "addTableColumn" } },
-    { key: "table-delete-column", label: "− Col", command: { type: "deleteTableColumn" } },
-    { key: "table-delete", label: "Delete table", command: { type: "deleteTable" } },
-    { key: "table-undo", label: "Undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
-    { key: "table-redo", label: "Redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
-    { key: "table-keyboard", label: "Done", action: "dismissKeyboard" },
+    { key: "table-row-before", label: "Insert row above", icon: "tableRowInsertBefore", command: { type: "addTableRow", after: false } },
+    { key: "table-row-after", label: "Insert row below", icon: "tableRowInsertAfter", command: { type: "addTableRow" } },
+    { key: "table-delete-row", label: "Delete row", icon: "tableRowDelete", command: { type: "deleteTableRow" } },
+    { key: "table-column-before", label: "Insert column left", icon: "tableColumnInsertBefore", command: { type: "addTableColumn", after: false } },
+    { key: "table-column-after", label: "Insert column right", icon: "tableColumnInsertAfter", command: { type: "addTableColumn" } },
+    { key: "table-delete-column", label: "Delete column", icon: "tableColumnDelete", command: { type: "deleteTableColumn" } },
+    { key: "table-header-row", label: "Toggle header row", icon: "tableHeaderRow", command: { type: "toggleTableHeaderRow" }, activeWhen: { table: "headerRow" } },
+    { key: "table-header-column", label: "Toggle header column", icon: "tableHeaderColumn", command: { type: "toggleTableHeaderColumn" }, activeWhen: { table: "headerColumn" } },
+    { key: "table-merge-cells", label: "Merge selected cells", icon: "mergeCells", command: { type: "mergeTableCells" }, disabledWhen: "cannotMergeCells" },
+    { key: "table-split-cell", label: "Split cell", icon: "splitCells", command: { type: "splitTableCell" } },
+    { key: "table-delete", label: "Delete table", icon: "delete", command: { type: "deleteTable" } },
+    { key: "table-undo", label: "Undo", icon: "undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
+    { key: "table-redo", label: "Redo", icon: "redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
+    { key: "table-keyboard", label: "Dismiss keyboard", icon: "keyboard", action: "dismissKeyboard" },
 ];

package/dist/toolbar-surface.d.ts

@@ -0,0 +1,17 @@
+import { type GlassColorScheme } from "expo-glass-effect";
+import type { ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { OpenEditorNativeTheme } from "./native-editor.js";
+export type OpenEditorNativeToolbarSurfaceProps = {
+    active?: boolean;
+    children: ReactNode;
+    colorScheme?: GlassColorScheme;
+    style?: StyleProp<ViewStyle>;
+    theme?: OpenEditorNativeTheme;
+};
+/**
+ * The platform material surrounding OpenEditor's keyboard toolbar.
+ * iOS uses the system glass implementation when available; other runtimes
+ * receive the same geometry with a theme-aware opaque fallback.
+ */
+export declare function OpenEditorNativeToolbarSurface({ active, children, colorScheme, style, theme, }: OpenEditorNativeToolbarSurfaceProps): import("react").JSX.Element;

package/dist/toolbar-surface.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GlassView, isGlassEffectAPIAvailable, } from "expo-glass-effect";
+import { Platform, StyleSheet, View, } from "react-native";
+import { OPENEDITOR_NATIVE_TOOLBAR_HEIGHT, OPENEDITOR_NATIVE_TOOLBAR_RADIUS, } from "./native-layout.js";
+/**
+ * The platform material surrounding OpenEditor's keyboard toolbar.
+ * iOS uses the system glass implementation when available; other runtimes
+ * receive the same geometry with a theme-aware opaque fallback.
+ */
+export function OpenEditorNativeToolbarSurface({ active = true, children, colorScheme = "auto", style, theme, }) {
+    if (Platform.OS === "ios" && isGlassEffectAPIAvailable()) {
+        return (_jsx(GlassView, { colorScheme: colorScheme, glassEffectStyle: active ? "regular" : "none", isInteractive: true, style: [styles.surface, style], children: children }));
+    }
+    return (_jsx(View, { style: [
+            styles.surface,
+            styles.fallback,
+            {
+                backgroundColor: theme?.surfaceRaised ?? theme?.surfaceMuted ?? theme?.surface ?? "#ffffff",
+                borderColor: theme?.border ?? "#e5e7eb",
+            },
+            style,
+        ], children: children }));
+}
+const styles = StyleSheet.create({
+    surface: {
+        borderRadius: OPENEDITOR_NATIVE_TOOLBAR_RADIUS,
+        height: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+        overflow: "hidden",
+    },
+    fallback: {
+        borderWidth: StyleSheet.hairlineWidth,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -15,7 +15,8 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "plugin.cjs"
   ],
   "exports": {
     ".": {
@@ -23,16 +24,26 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./plugin": "./plugin.cjs",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@openeditor/core": "0.0.34",
-    "@openeditor/embedded-runtime": "0.0.34",
-    "@openeditor/embedded-surface": "0.0.34"
+    "@expo/config-plugins": "57.0.6",
+    "@expo/ui": "~57.0.7",
+    "@hugeicons/react-native": "^1.0.15",
+    "@openeditor/core": "0.0.35",
+    "@openeditor/embedded-runtime": "0.0.35",
+    "@openeditor/embedded-surface": "0.0.35",
+    "@openeditor/icons": "0.0.35"
   },
   "peerDependencies": {
+    "expo": ">=57",
     "react": ">=19",
     "react-native": ">=0.85",
+    "expo-glass-effect": ">=57",
+    "react-native-keyboard-controller": ">=1.21",
+    "react-native-reanimated": ">=3",
+    "react-native-svg": ">=15",
     "react-native-webview": ">=13"
   }
 }

package/plugin.cjs

@@ -0,0 +1,79 @@
+const { withAppDelegate } = require("@expo/config-plugins");
+
+const WEBKIT_IMPORT = "import WebKit\n";
+const OBSERVER_PROPERTY =
+	"  private var openEditorKeyboardWillShowObserver: NSObjectProtocol?\n";
+const OBSERVER_SETUP = `    openEditorKeyboardWillShowObserver = NotificationCenter.default.addObserver(
+      forName: UIResponder.keyboardWillShowNotification,
+      object: nil,
+      queue: .main
+    ) { [weak self] _ in
+      guard let rootView = self?.window?.rootViewController?.view else { return }
+      self?.enableOpenEditorInteractiveKeyboardDismissal(in: rootView)
+    }
+
+`;
+const DISMISSAL_METHOD = `  deinit {
+    if let openEditorKeyboardWillShowObserver {
+      NotificationCenter.default.removeObserver(openEditorKeyboardWillShowObserver)
+    }
+  }
+
+  private func enableOpenEditorInteractiveKeyboardDismissal(in view: UIView) {
+    if let webView = view as? WKWebView {
+      webView.scrollView.keyboardDismissMode = .interactive
+    }
+    view.subviews.forEach { enableOpenEditorInteractiveKeyboardDismissal(in: $0) }
+  }
+
+`;
+
+const applyOpenEditorKeyboardDismissal = (contents) => {
+	for (const anchor of [
+		"import React\n",
+		"class AppDelegate: ExpoAppDelegate {\n",
+		"    return super.application(application, didFinishLaunchingWithOptions: launchOptions)\n",
+		"  // Linking API\n",
+	]) {
+		if (!contents.includes(anchor)) {
+			throw new Error(
+				`OpenEditor's Expo plugin could not find ${JSON.stringify(anchor)} in AppDelegate.swift.`,
+			);
+		}
+	}
+
+	let next = contents;
+	if (!next.includes("import WebKit")) {
+		next = next.replace("import React\n", `import React\n${WEBKIT_IMPORT}`);
+	}
+	if (!next.includes("openEditorKeyboardWillShowObserver")) {
+		next = next.replace(
+			"class AppDelegate: ExpoAppDelegate {\n",
+			`class AppDelegate: ExpoAppDelegate {\n${OBSERVER_PROPERTY}`,
+		);
+		next = next.replace(
+			"    return super.application(application, didFinishLaunchingWithOptions: launchOptions)\n",
+			`${OBSERVER_SETUP}    return super.application(application, didFinishLaunchingWithOptions: launchOptions)\n`,
+		);
+		next = next.replace(
+			"  // Linking API\n",
+			`${DISMISSAL_METHOD}  // Linking API\n`,
+		);
+	}
+	return next;
+};
+
+const withOpenEditorNative = (config) =>
+	withAppDelegate(config, (mod) => {
+		if (mod.modResults.language !== "swift") {
+			throw new Error("OpenEditor's Expo plugin requires a Swift AppDelegate.");
+		}
+		mod.modResults.contents = applyOpenEditorKeyboardDismissal(
+			mod.modResults.contents,
+		);
+		return mod;
+	});
+
+module.exports = withOpenEditorNative;
+module.exports.applyOpenEditorKeyboardDismissal =
+	applyOpenEditorKeyboardDismissal;