@owomark/react 0.1.0

package/README.md

@@ -0,0 +1,363 @@
+# OwoMark
+
+A self-contained Markdown editor built on a single-layer `contenteditable` surface.
+
+Official package: `@owomark/react`. The flat name `owomark-react` is reserved only as a compatibility redirect and should not be used for new installs.
+
+Four packages:
+
+| Package | Role |
+|---|---|
+| `@owomark/core` | Framework-agnostic editor engine (document model, input handling, commands, shared state) |
+| `@owomark/view` | View engine + preview rendering (DOM events, active block proxy, DOM patching, render cache) |
+| `@owomark/react` | React components (`OwoMarkEditor`, `OwoMarkPreview`) and shared state hooks |
+| (theme built into `@owomark/view`) | Light / dark CSS theme presets and token definitions |
+
+## Quick Start (React)
+
+```tsx
+import { OwoMarkEditor } from '@owomark/react';
+import '@owomark/view/style.css';
+
+function App() {
+  const [md, setMd] = useState('# Hello\n\nStart typing...');
+
+  return (
+    <OwoMarkEditor
+      value={md}
+      onChange={setMd}
+      config={{ theme: 'light', enableSideAnnotation: true }}
+      placeholder="Write something..."
+    />
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | — | Controlled markdown value |
+| `defaultValue` | `string` | — | Uncontrolled initial value |
+| `onChange` | `(markdown: string) => void` | — | Called on content change |
+| `onSelectionChange` | `(selection: OwoMarkSelection) => void` | — | Cursor/selection updates |
+| `onCompositionStateChange` | `(active: boolean) => void` | — | IME composition state |
+| `onScroll` | `React.UIEventHandler<HTMLDivElement>` | — | Forwards scroll events from the root editor container |
+| `readOnly` | `boolean` | `false` | Disable editing |
+| `placeholder` | `string` | — | Empty-state placeholder text |
+| `theme` | `'light' \| 'dark' \| string` | `'light'` | Theme preset or custom class |
+| `themeClassName` | `string` | — | Additional theme class |
+| `className` | `string` | — | Extra CSS class on the root element |
+| `commandsRef` | `Ref<OwoMarkCommands>` | — | Imperative command handle |
+| `coreRef` | `Ref<OwoMarkCore \| null>` | — | Direct access to the underlying OwoMarkCore instance |
+| `controller` | `OwoMarkSharedStateController` | — | Auto-connects editor to shared state (recommended for split editor) |
+| `indentMode` | `'auto' \| '2' \| '4'` | `'auto'` | Tab indent width |
+| `config` | `OwoMarkEditorConfig` | — | Unified editor config (`indentMode`, `enableSideAnnotation`, `enableMath`, `theme`) |
+| `ariaLabel` | `string` | — | Accessibility label |
+
+When `config` is provided, it becomes the unified configuration surface for editor behavior:
+
+```tsx
+<OwoMarkEditor
+  value={md}
+  onChange={setMd}
+  config={{
+    theme: 'light',
+    indentMode: '2',
+    enableSideAnnotation: true,
+    enableMath: true,
+  }}
+/>
+```
+
+### Imperative Commands
+
+```tsx
+const cmds = useRef<OwoMarkCommands>(null);
+
+<OwoMarkEditor commandsRef={cmds} ... />
+
+// Later:
+cmds.current.toggleBold();
+cmds.current.toggleItalic();
+cmds.current.insertLink('https://example.com');
+cmds.current.insertCodeFence('ts');
+cmds.current.undo();
+cmds.current.redo();
+cmds.current.getMarkdown();
+cmds.current.setMarkdown('# New content');
+cmds.current.replaceMarkdown('# New content', { anchor: 13, focus: 13 });
+cmds.current.focus();
+```
+
+Use `replaceMarkdown()` when the host needs to replace the document and also control the resulting selection in one atomic step, such as toolbar-driven inserts.
+
+## Shared State + Preview
+
+For a split editor with synchronized incremental preview:
+
+```tsx
+import {
+  OwoMarkEditor,
+  OwoMarkPreview,
+  useOwoMarkSharedState,
+} from '@owomark/react';
+import type { PreviewBlock, PreviewRenderContext } from '@owomark/react';
+
+function SplitEditor() {
+  const controller = useOwoMarkSharedState({ initialMarkdown: '# Hello' });
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <OwoMarkEditor
+        controller={controller}
+        theme="light"
+        placeholder="Write something..."
+      />
+      <OwoMarkPreview
+        state={controller}
+        themeKey="vitesse-light"
+        className="preview-panel"
+      />
+    </div>
+  );
+}
+```
+
+The `controller` prop on `OwoMarkEditor` automatically connects the editor to the shared state controller. The editor drives all state updates (content, selection, composition) directly — no manual `onChange` → `setMarkdown` bridging needed.
+
+For hosts that still need `onChange` callbacks (e.g. for local draft persistence), they work alongside `controller`:
+
+```tsx
+<OwoMarkEditor
+  controller={controller}
+  onChange={(md) => saveDraft(md)}
+/>
+```
+
+### Custom Block Renderer
+
+Provide a host-side rendering function for full Markdown fidelity (GFM, math, syntax highlighting):
+
+```tsx
+async function renderBlock(
+  block: PreviewBlock,
+  ctx: PreviewRenderContext,
+): Promise<string> {
+  const result = await myUnifiedPipeline.process(block.raw);
+  return result.toString();
+}
+
+<OwoMarkPreview state={controller} renderBlock={renderBlock} themeKey="vitesse-light" />
+```
+
+## Side Annotation
+
+OwoMark supports right-side annotations for preview rendering and editor workflows. The feature is enabled by default and can be turned off with `config.enableSideAnnotation = false`.
+
+```tsx
+<OwoMarkEditor
+  value={md}
+  onChange={setMd}
+  config={{ enableSideAnnotation: false }}
+/>
+```
+
+With the flag disabled:
+
+- side-annotation syntax is kept as plain Markdown text
+- preview does not render side annotation layout
+- the `/side` slash command is hidden
+- pressing Enter after an annotated block does not auto-insert `(>+)`
+
+### Syntax Quick Reference
+
+| Use case | Syntax |
+|---|---|
+| Single block annotation | `Text (>} note)` |
+| Multi-block continuation (2-3 blocks) | `A (>} group)` + `B (>+)` |
+| Container annotation (4+ blocks) | `:::side` + `(>} note)` + blocks + `:::` |
+| Long-form note reference | `:::side [>id] ... :::` + `[>id]: {type=}} ...` |
+
+### Type Table
+
+| Symbol | Meaning | Example |
+|---|---|---|
+| `:` | Plain note | `(>: note)` |
+| `}` | Right brace | `(>} grouped note)` |
+| `{` | Left brace | `(>{ expanded note)` |
+| `]` | Right bracket | `(>] range)` |
+| `[` | Left bracket | `(>[ range)` |
+| `|` | Vertical line | `(>| comment)` |
+| `-` | Dash | `(>- remark)` |
+| `->` | Thin arrow | `(>-> conclusion)` |
+| `=>` | Fat arrow | `(>=> therefore)` |
+| `~>` | Wave arrow | `(>~> related)` |
+| `!` | Warning | `(>! caution)` |
+| `?` | Question | `(>? todo)` |
+
+### Examples
+
+Single block:
+
+```md
+白菜 (>} 都是蔬菜)
+```
+
+Continuation chain:
+
+```md
+香蕉 (>} 都是水果)
+菠萝 (>+)
+苹果 (>+)
+```
+
+Container form:
+
+```md
+:::side
+(>! 高危操作)
+
+删除数据库前必须先备份。
+确认备份可恢复后再执行破坏性操作。
+:::
+```
+
+Reference form:
+
+```md
+:::side [>cook-tip]
+炒菜时油温很重要。
+热锅凉油是基本功。
+:::
+
+[>cook-tip]: {type=}}
+    烹饪小贴士：油温过高会产生油烟，
+    日常烹饪建议控制在合适范围内。
+```
+
+### Notes
+
+- Side annotations are right-side only; there is no left-column layout mode.
+- `(>...)` must appear at the end of the block to be recognized.
+- `(>+)` is a continuation marker only. It must follow a previous annotated sibling block.
+- On narrow viewports, side annotations fall back to inline callout blocks under the anchor content.
+
+### Shared State Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useOwoMarkSharedState(options?)` | Creates a persistent `OwoMarkSharedStateController` (survives re-renders) |
+| `useSharedStateSnapshot(controller)` | Subscribes via `useSyncExternalStore`, returns current `OwoMarkSharedState` |
+
+### `<OwoMarkPreview>` Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `state` | `OwoMarkSharedStateStore` | Shared state store (e.g. `controller` from `useOwoMarkSharedState`) |
+| `themeKey` | `string` | Theme identifier for rendering and cache keying |
+| `className` | `string` | CSS class for the preview root |
+| `renderBlock` | `(block, context) => Promise<string>` | Custom per-block Markdown renderer |
+| `registry` | `PreviewRendererRegistry` | Custom renderer registry (e.g. Mermaid) |
+| `viewportFirst` | `boolean` | Prioritize rendering visible blocks first |
+| `onContentUpdate` | `() => void` | Called after every DOM mutation — including idle backfill and deferred renders (for scroll sync) |
+| `ariaLabel` | `string` | Accessibility label |
+
+## CSS Setup
+
+### Minimal (use package presets)
+
+```ts
+import '@owomark/view/style.css'; // includes mdx-components.css + owomark.css + side-annotation.css + slash-menu.css + light.css + dark.css
+```
+
+### Selective imports
+
+```ts
+import '@owomark/view/owomark.css'; // base editor styles (required)
+import '@owomark/view/light.css';   // light preset tokens
+// import '@owomark/view/dark.css'; // dark preset tokens
+```
+
+### Third-party theme layering
+
+```ts
+import '@owomark/view/style.css';
+import 'owomark-theme-acme/style.css';
+```
+
+```tsx
+<OwoMarkEditor
+  value={md}
+  onChange={setMd}
+  theme="owo-theme-acme"
+/>
+```
+
+The theme package should only override `--owo-*` tokens and optional visual details. It should not duplicate `@owomark/view` structural CSS. See the `@owomark/view` README for the authoring contract of `owomark-theme-xxx`.
+
+## Host Theme Mapping
+
+OwoMark uses `--owo-*` CSS custom properties for all visual styles. To integrate with your design system, map your variables to OwoMark tokens on a wrapper element:
+
+```css
+.my-editor-wrapper {
+  /* Surface */
+  --owo-editor-bg: var(--app-surface);
+  --owo-editor-text: var(--app-text-primary);
+  --owo-editor-heading: var(--app-text-strong);
+
+  /* Interaction */
+  --owo-editor-caret: var(--app-text-strong);
+  --owo-editor-link: var(--app-brand);
+
+  /* Border */
+  --owo-editor-border: var(--app-border);
+
+  /* Override default chrome if embedding */
+  & .owo-editor-root {
+    border: none;
+    padding: 0;
+    background: transparent;
+  }
+}
+```
+
+See `docs/specs/owomark-theme-tokens.md` for the full token list.
+
+## Standalone Usage (no React)
+
+Use `@owomark/core` + `@owomark/view` for a framework-free DOM editor:
+
+```ts
+import { createOwoMarkCore } from '@owomark/core';
+import { createOwoMarkView } from '@owomark/view';
+
+const core = createOwoMarkCore({ initialMarkdown: '# Hello' });
+const view = createOwoMarkView(core, document.getElementById('editor')!);
+
+core.onChange((markdown) => console.log(markdown));
+
+// Cleanup
+view.destroy();
+core.destroy();
+```
+
+Or use `createOwoMarkCore()` directly for pure logic without DOM:
+
+```ts
+import { createOwoMarkCore } from '@owomark/core';
+
+const core = createOwoMarkCore({ initialMarkdown: '# Hello' });
+console.log(core.getMarkdown());
+```
+
+## Building
+
+From the monorepo root:
+
+```bash
+npm run build:packages
+```
+
+This builds `@owomark/core` -> `@owomark/view` -> `@owomark/react` in dependency order using tsup (ESM + DTS).

package/dist/index.css

@@ -0,0 +1,32 @@
+/* src/MdxSkeleton.css */
+.owo-mdx-skeleton {
+  background:
+    linear-gradient(
+      90deg,
+      var(--owo-skeleton-base, #e5e7eb) 25%,
+      var(--owo-skeleton-shine, #f3f4f6) 50%,
+      var(--owo-skeleton-base, #e5e7eb) 75%);
+  background-size: 200% 100%;
+  animation: owo-mdx-skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+@keyframes owo-mdx-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.owo-mdx-skeleton-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 0;
+}
+.owo-mdx-skeleton-line {
+  height: 14px;
+}
+.owo-mdx-skeleton-line:last-child {
+  width: 60%;
+}

package/dist/index.d.ts

@@ -0,0 +1,249 @@
+import * as react from 'react';
+import { Ref, MutableRefObject, CSSProperties, ReactNode, ComponentType } from 'react';
+import { IndentMode, OwoMarkSelection, OwoMarkCommands, OwoMarkCore, OwoMarkSharedStateController, OwoMarkSharedStateStore, PreviewBlock, CreateSharedStateOptions, OwoMarkSharedState, OwoMarkDocument, SlashState, BlockContext, BlockNode, VisibleRange, VirtualRow, Decorator } from '@owomark/core';
+export { BlockContext, BlockContextType, BlockInsertType, CommandDefinition, OwoMarkCommands, OwoMarkCore, OwoMarkEditorInstance, OwoMarkSelection, OwoMarkSharedState, OwoMarkSharedStateController, OwoMarkSharedStateStore, PreviewBlock, PreviewBlockKind, SlashState } from '@owomark/core';
+import { OwoMarkProcessorOptions, OwoMarkThemeName, PreviewStrategy, PreviewRendererRegistry, PreviewRenderContext } from '@owomark/view';
+export { OwoMarkThemeName, PreviewRenderContext, PreviewRenderResult, PreviewRendererDefinition, PreviewRendererRegistry, THEME_DARK_CLASS, THEME_LIGHT_CLASS, getThemeClassName } from '@owomark/view';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OwoMarkEditorConfig = {
+    /** Indent mode: 'auto' | '2' | '4'. Default: 'auto'. */
+    indentMode?: IndentMode;
+    /** Enable side annotation syntax. Default: true. */
+    enableSideAnnotation?: boolean;
+    /** Enable math (KaTeX) rendering. Default: true. */
+    enableMath?: boolean;
+    /** Enable fenced markdown sandbox rendering. Default: true. */
+    enableMarkdownSandbox?: boolean;
+    /** Minimum backtick count required for markdown sandbox fences. Default: 4. */
+    markdownSandbox?: {
+        outerFenceTicks?: number;
+    };
+    /** Color theme. Default: 'light'. */
+    theme?: 'light' | 'dark';
+};
+declare const DEFAULT_EDITOR_CONFIG: Required<OwoMarkEditorConfig>;
+declare function resolveEditorConfig(config?: OwoMarkEditorConfig): Required<OwoMarkEditorConfig>;
+declare function deriveProcessorOptions(config: Required<OwoMarkEditorConfig>): Partial<OwoMarkProcessorOptions>;
+
+type OwoMarkEditorProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (markdown: string) => void;
+    onSelectionChange?: (selection: OwoMarkSelection) => void;
+    onCompositionStateChange?: (active: boolean) => void;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
+    readOnly?: boolean;
+    placeholder?: string;
+    className?: string;
+    theme?: OwoMarkThemeName;
+    themeClassName?: string;
+    commandsRef?: Ref<OwoMarkCommands>;
+    /**
+     * Ref to the underlying OwoMarkCore instance.
+     */
+    coreRef?: Ref<OwoMarkCore | null>;
+    /**
+     * When provided, the editor automatically connects to this
+     * shared state controller.
+     */
+    controller?: OwoMarkSharedStateController;
+    indentMode?: IndentMode;
+    ariaLabel?: string;
+    /**
+     * Unified editor configuration. When provided, `indentMode` and `theme`
+     * props are ignored in favour of the config values.
+     */
+    config?: OwoMarkEditorConfig;
+};
+declare const OwoMarkEditor: react.ForwardRefExoticComponent<OwoMarkEditorProps & react.RefAttributes<HTMLDivElement>>;
+
+type OwoMarkPreviewProps = {
+    state: OwoMarkSharedStateStore;
+    className?: string;
+    strategy?: PreviewStrategy;
+    themeKey?: string;
+    registry?: PreviewRendererRegistry;
+    viewportFirst?: boolean;
+    ariaLabel?: string;
+    /**
+     * External block renderer. When provided, the preview engine uses this
+     * to render each block instead of the built-in lightweight renderer.
+     * Typically backed by the host's unified/remark/rehype/Shiki pipeline.
+     *
+     * Engine is recreated when this prop transitions between defined/undefined.
+     * Identity changes of the function itself do NOT cause engine recreation —
+     * the latest reference is always used via a stable ref.
+     */
+    renderBlock?: (block: PreviewBlock, context: PreviewRenderContext) => Promise<string>;
+    /** Called after each successful DOM update. Use to trigger scroll sync. */
+    onContentUpdate?: () => void;
+};
+declare const OwoMarkPreview: (props: OwoMarkPreviewProps) => react_jsx_runtime.JSX.Element;
+
+type UseOwoMarkSharedStateOptions = CreateSharedStateOptions;
+/**
+ * React hook that creates and manages a OwoMarkSharedStateController.
+ *
+ * The controller is created once and persists across re-renders.
+ * It can be connected to a OwoMarkEditor and consumed by OwoMarkPreview.
+ */
+declare function useOwoMarkSharedState(options?: UseOwoMarkSharedStateOptions): OwoMarkSharedStateController;
+/**
+ * Subscribe to shared state changes for React rendering.
+ * Returns the current OwoMarkSharedState, triggering re-renders on changes.
+ */
+declare function useSharedStateSnapshot(controller: OwoMarkSharedStateController): OwoMarkSharedState;
+
+/**
+ * React hook that creates and manages an OwoMarkCore instance
+ * with DOM event binding.
+ *
+ * No syncFromDOM for normal input — Core handles all inputTypes.
+ * Composition sync is the only controlled exception.
+ */
+
+type UseOwoMarkCoreOptions = {
+    initialMarkdown: string;
+    readOnly?: boolean;
+    onCompositionStateChange?: (active: boolean) => void;
+};
+type UseOwoMarkCoreReturn = {
+    core: OwoMarkCore;
+    doc: OwoMarkDocument;
+    slashState: SlashState;
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+};
+declare function useOwoMarkCore(options: UseOwoMarkCoreOptions): UseOwoMarkCoreReturn;
+
+/**
+ * React hook that subscribes to block context changes from OwoMarkCore.
+ * Returns the current BlockContext (block type, depth, heading level, etc.)
+ * at the cursor position.
+ *
+ * This replaces the host-maintained identifyBlockAtCursor() pattern.
+ */
+
+declare function useBlockContext(core: OwoMarkCore): BlockContext;
+
+type UseVirtualListOptions = {
+    blocks: readonly BlockNode[];
+    /** The scrollable container element. */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Number of extra blocks to render above/below viewport. Default: 5 */
+    overscan?: number;
+    /** Estimated characters per line for height estimation. Default: 80 */
+    charsPerLine?: number;
+};
+type UseVirtualListResult = {
+    /** Current visible range (inclusive indices). */
+    visibleRange: VisibleRange;
+    /** All virtual rows with heights. */
+    rows: VirtualRow[];
+    /** Total scrollable height. */
+    totalHeight: number;
+    /** Update a block's measured height. */
+    updateBlockHeight: (blockId: string, height: number) => void;
+    /** Check if a block index is in the visible range. */
+    isBlockVisible: (blockIndex: number) => boolean;
+    /** Force re-measure all heights. */
+    invalidateAllHeights: () => void;
+};
+declare function useVirtualList(options: UseVirtualListOptions): UseVirtualListResult;
+
+type EditorBlockProps = {
+    block: BlockNode;
+    blockIndex: number;
+};
+/**
+ * Block layer: logical line unit.
+ * Re-renders only when block identity (id) or depth changes.
+ * Decorators handle finer-grained updates.
+ */
+declare const EditorBlock: react.NamedExoticComponent<EditorBlockProps>;
+
+type EditorDecoratorProps = {
+    decorator: Decorator;
+};
+/**
+ * Decorator layer: applies visual styling.
+ * Re-renders only when decorator type or leaf content changes.
+ */
+declare const EditorDecorator: react.NamedExoticComponent<EditorDecoratorProps>;
+
+type EditorLeafProps = {
+    text: string;
+};
+/**
+ * Leaf layer: carries the actual text content.
+ * Re-renders only when text changes.
+ */
+declare const EditorLeaf: react.NamedExoticComponent<EditorLeafProps>;
+
+type SlashMenuProps = {
+    state: SlashState;
+    onSelect: (index: number) => void;
+    onDismiss: () => void;
+};
+declare const SlashMenu: react.NamedExoticComponent<SlashMenuProps>;
+
+/**
+ * Lightweight caret positioning utility for slash menu.
+ * Uses Range.getBoundingClientRect() + viewport flip.
+ * ~30 LOC — no external dependency.
+ */
+type CaretRect = {
+    top: number;
+    left: number;
+    bottom: number;
+};
+/**
+ * Get the caret's screen coordinates from the current selection.
+ * Returns null if no selection or range is available.
+ */
+declare function getCaretRect(): CaretRect | null;
+/**
+ * Compute menu position given caret rect and menu dimensions.
+ * Places menu below caret by default; flips above if it would overflow viewport.
+ */
+declare function computeMenuPosition(caret: CaretRect, menuHeight: number, menuWidth: number): {
+    top: number;
+    left: number;
+};
+
+type MdxSkeletonProps = {
+    /** Height in pixels for the skeleton placeholder. */
+    height?: number;
+    /** Number of shimmer lines to show. Default: 3. */
+    lines?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Lightweight skeleton loading indicator for MDX component placeholders.
+ * Pure CSS animation — no external UI library dependency.
+ */
+declare function MdxSkeleton({ height, lines, className, style }: MdxSkeletonProps): react_jsx_runtime.JSX.Element;
+
+type MdxComponentShellProps = {
+    /** Component display name, used as cache key for height estimation. */
+    name: string;
+    children: ReactNode;
+};
+/**
+ * Wraps an MDX component to provide:
+ * 1. Skeleton placeholder with estimated height before first paint
+ * 2. Real-height measurement after mount via ResizeObserver
+ * 3. Height caching so subsequent renders of the same component type
+ *    use a better estimate, reducing layout shift.
+ */
+declare function MdxComponentShell({ name, children }: MdxComponentShellProps): react_jsx_runtime.JSX.Element;
+/**
+ * Create a wrapped version of an MDX component that renders inside
+ * MdxComponentShell for skeleton loading + height management.
+ */
+declare function wrapWithShell<P extends Record<string, any>>(name: string, Component: ComponentType<P>): ComponentType<P>;
+/** Clear the height cache (useful for testing or theme changes). */
+declare function clearComponentHeightCache(): void;
+
+export { type CaretRect, DEFAULT_EDITOR_CONFIG, EditorBlock, type EditorBlockProps, EditorDecorator, type EditorDecoratorProps, EditorLeaf, type EditorLeafProps, MdxComponentShell, type MdxComponentShellProps, MdxSkeleton, type MdxSkeletonProps, OwoMarkEditor, type OwoMarkEditorConfig, type OwoMarkEditorProps, OwoMarkPreview, type OwoMarkPreviewProps, SlashMenu, type SlashMenuProps, type UseOwoMarkCoreOptions, type UseOwoMarkCoreReturn, type UseOwoMarkSharedStateOptions, type UseVirtualListOptions, type UseVirtualListResult, clearComponentHeightCache, computeMenuPosition, deriveProcessorOptions, getCaretRect, resolveEditorConfig, useBlockContext, useOwoMarkCore, useOwoMarkSharedState, useSharedStateSnapshot, useVirtualList, wrapWithShell };