@editneo/react 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,334 @@
+# @editneo/react
+
+The React component layer for EditNeo. This package provides `NeoEditor` (the root editor component), a set of ready-made block renderers, interactive UI components like the floating toolbar and slash-command menu, and hooks for reading and manipulating editor state.
+
+Each `NeoEditor` instance creates its own isolated store, so multiple editors on the same page work independently. Rendering is virtualized with `@tanstack/react-virtual`, so documents with thousands of blocks remain responsive.
+
+## Installation
+
+```bash
+npm install @editneo/react @editneo/core
+```
+
+React 18 or 19 is required as a peer dependency.
+
+**Optional packages:**
+
+```bash
+npm install @editneo/sync  # For real-time collaboration & offline persistence
+npm install @editneo/pdf   # For PDF drag-and-drop import
+```
+
+## Getting Started
+
+A minimal working editor:
+
+```tsx
+import { NeoEditor } from "@editneo/react";
+
+function App() {
+  return <NeoEditor id="my-document" />;
+}
+```
+
+The `id` prop is a unique identifier for the document. It is used to namespace IndexedDB storage and sync rooms.
+
+## Components
+
+### `<NeoEditor />`
+
+The root component. It creates a per-instance editor store, sets up the optional `SyncManager`, applies the theme, and renders the virtualized block canvas.
+
+| Prop          | Type                                              | Default  | Description                                                     |
+| ------------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |
+| `id`          | `string`                                          | required | Unique document identifier                                      |
+| `offline`     | `boolean`                                         | `true`   | Enable offline persistence via IndexedDB                        |
+| `syncConfig`  | `{ url: string; room: string }`                   | —        | WebSocket server URL and room name for real-time collaboration  |
+| `theme`       | `{ mode: 'light' \| 'dark'; [key: string]: any }` | —        | Theme configuration                                             |
+| `renderBlock` | `(block, defaultRender) => ReactNode`             | —        | Intercept rendering for custom block types                      |
+| `className`   | `string`                                          | —        | CSS class for the outer wrapper                                 |
+| `children`    | `ReactNode`                                       | —        | Toolbar, menus, or other UI to render inside the editor context |
+
+> **Note:** `@editneo/sync` is lazy-loaded via dynamic `import()` and only instantiated when `syncConfig` or `offline` is set. If the package isn't installed, the editor works fine without it.
+
+**Usage with collaboration:**
+
+```tsx
+<NeoEditor
+  id="shared-doc"
+  syncConfig={{
+    url: "wss://your-yjs-server.com",
+    room: "shared-doc",
+  }}
+  theme={{ mode: "dark" }}
+>
+  <Aeropeak />
+  <SlashMenu />
+  <CursorOverlay />
+</NeoEditor>
+```
+
+**Custom block rendering:**
+
+```tsx
+<NeoEditor
+  id="doc"
+  renderBlock={(block, defaultRender) => {
+    if (block.type === "spreadsheet") {
+      return <SpreadsheetEmbed block={block} />;
+    }
+    return defaultRender;
+  }}
+/>
+```
+
+### `<NeoCanvas />`
+
+The virtualized document canvas. It renders only the blocks currently visible in the viewport, using `@tanstack/react-virtual` for smooth scrolling. Block size estimates are type-aware (headings are taller than paragraphs, code blocks taller still). You typically don't render this directly — `NeoEditor` includes it automatically.
+
+### `<BlockRenderer />`
+
+Routes each block to the correct renderer based on its `type` field. Supports all built-in block types:
+
+- **Text blocks:** paragraph, heading-1, heading-2, heading-3
+- **Lists:** bullet-list, ordered-list, todo-list
+- **Media:** image, video
+- **Structural:** quote, callout, divider, code-block
+
+If `renderBlock` is provided through the editor context, it is called first, giving you the chance to handle custom types before falling through to the defaults.
+
+### `<EditableBlock />`
+
+Handles the content-editable rendering and input processing for a single block. It converts the block's `Span[]` content into styled inline elements (bold, italic, code, underline, strikethrough, links, colors, highlights). It also handles:
+
+- **Enter** — split the block and create a new paragraph
+- **Backspace** at the start — delete the block
+- **Ctrl+Z / Ctrl+Y** — undo / redo
+- **Shift+Enter** — soft line break (`<br>`)
+- **Tab** — indent the block (increases indent level)
+- Input events parsed from the DOM, preserving inline formatting
+
+---
+
+## Interactive Components
+
+### `<Aeropeak />` — Floating Toolbar
+
+A toolbar that appears above the user's text selection. By default it shows Bold, Italic, Underline, Strikethrough, Code, and Link buttons. SSR-safe.
+
+| Prop        | Type                          | Default  | Description                                  |
+| ----------- | ----------------------------- | -------- | -------------------------------------------- |
+| `children`  | `ReactNode`                   | —        | Custom toolbar content (replaces defaults)   |
+| `offset`    | `number`                      | `10`     | Vertical offset from the selection in pixels |
+| `animation` | `'fade' \| 'scale' \| 'none'` | `'fade'` | Appearance animation                         |
+
+```tsx
+// Default toolbar
+<Aeropeak />
+
+// Custom toolbar
+<Aeropeak offset={12} animation="scale">
+  <AeroButton
+    icon={<strong>B</strong>}
+    label="Bold"
+    onClick={(editor) => editor.toggleMark?.('bold')}
+  />
+  <Separator />
+  <AeroButton
+    icon={<em>I</em>}
+    label="Italic"
+    onClick={(editor) => editor.toggleMark?.('italic')}
+  />
+</Aeropeak>
+```
+
+**Compound components:**
+
+- `Aeropeak.Bold` / `Aeropeak.Italic` / `Aeropeak.Underline` / `Aeropeak.Strike` / `Aeropeak.Code` / `Aeropeak.Link` — prebuilt buttons
+- `AeroButton` — a button that receives the editor instance when clicked
+- `Separator` — a thin vertical divider between button groups
+
+### `<SlashMenu />` — Command Palette
+
+Appears when the user types `/` in the editor. Lists available block types, supports keyboard navigation (arrow keys + Enter), and filters results as the user continues typing after `/`.
+
+| Prop             | Type                            | Default | Description                                            |
+| ---------------- | ------------------------------- | ------- | ------------------------------------------------------ |
+| `customCommands` | `CommandItem[]`                 | `[]`    | Additional commands to show alongside the defaults     |
+| `filter`         | `(cmd: CommandItem) => boolean` | —       | Filter function to hide certain commands               |
+| `menuComponent`  | `React.ComponentType`           | —       | Completely replace the menu UI with a custom component |
+
+**Built-in commands:** Paragraph, Heading 1-3, Bulleted List, Ordered List, To-do List, Quote, Code Block, Divider, Callout, Image.
+
+New blocks are inserted immediately **after** the current block.
+
+```tsx
+<SlashMenu
+  customCommands={[
+    {
+      key: "diagram",
+      label: "Diagram",
+      icon: <span>chart</span>,
+      execute: (editor) => editor.addBlock("image"),
+    },
+  ]}
+/>
+```
+
+### `<PDFDropZone />`
+
+A wrapper component that detects PDF file drops, runs client-side extraction via `@editneo/pdf`, and inserts the extracted blocks into the editor. Shows a processing indicator while extraction is in progress.
+
+| Prop            | Type                                        | Default | Description                                                                          |
+| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------ |
+| `onDrop`        | `(files: File[]) => void`                   | —       | Callback when files are dropped. If provided, the default PDF extraction is skipped. |
+| `renderOverlay` | `(props: { isOver: boolean }) => ReactNode` | —       | Custom overlay content shown during drag-over                                        |
+| `children`      | `ReactNode`                                 | —       | Content inside the drop zone                                                         |
+
+> **Note:** `@editneo/pdf` is lazy-loaded via dynamic `import()`. If the package isn't installed, the drop zone logs a warning and does nothing.
+
+### `<CursorOverlay />`
+
+Displays colored cursors and name labels for remote collaborators. Cursor positions are calculated using `Range.getBoundingClientRect()` for pixel-accurate placement, and updated automatically via `MutationObserver` when the DOM changes.
+
+| Prop          | Type                                   | Default | Description                              |
+| ------------- | -------------------------------------- | ------- | ---------------------------------------- |
+| `renderLabel` | `(user: { name, color }) => ReactNode` | —       | Custom label renderer for remote cursors |
+
+```tsx
+<NeoEditor id="doc" syncConfig={{ url: "wss://...", room: "doc" }}>
+  <CursorOverlay />
+</NeoEditor>
+```
+
+---
+
+## Block Components
+
+All block components are exported and can be used standalone if needed:
+
+| Component      | Block Type          | Description                                        |
+| -------------- | ------------------- | -------------------------------------------------- |
+| `HeadingBlock` | heading-1/2/3       | Renders `<h1>`, `<h2>`, or `<h3>`                  |
+| `ListBlock`    | bullet/ordered/todo | Supports numbered lists and interactive checkboxes |
+| `CodeBlock`    | code-block          | Monospace code with language support               |
+| `QuoteBlock`   | quote               | Bordered blockquote                                |
+| `CalloutBlock` | callout             | Highlighted callout box                            |
+| `DividerBlock` | divider             | Horizontal rule                                    |
+| `MediaBlock`   | image, video        | Image/video with src, alt, width, height props     |
+
+---
+
+## Hooks
+
+### `useEditor()`
+
+The primary hook for interacting with the editor. Must be called inside a `<NeoEditor />`. Returns all store state and actions.
+
+```tsx
+const {
+  blocks, // Record<string, NeoBlock>
+  rootBlocks, // string[]
+  selection, // { blockId, startOffset, endOffset }
+  addBlock, // (type, afterId?) => void
+  insertBlock, // alias for addBlock
+  insertFullBlock, // (block, afterId?) => void
+  updateBlock, // (id, partial) => void
+  deleteBlock, // (id) => void
+  moveBlock, // (id, afterId) => void
+  setBlockType, // (id, type) => void
+  toggleMark, // (mark) => void
+  setLink, // (url | null) => void
+  exportJSON, // () => { blocks, rootBlocks }
+  importJSON, // (data) => void
+  undo, // () => void
+  redo, // () => void
+} = useEditor();
+```
+
+Throws an error if called outside of `<NeoEditor />`.
+
+### `useSelection()`
+
+A focused hook that subscribes only to the selection state, minimizing re-renders.
+
+```tsx
+const selection = useSelection();
+// { blockId: string | null, startOffset: number, endOffset: number }
+```
+
+### `useSyncStatus()`
+
+Returns the current sync connection status.
+
+```tsx
+const status = useSyncStatus();
+// 'connected' or 'disconnected'
+```
+
+---
+
+## Theming
+
+`NeoEditor` scopes CSS variables to its root element, so multiple editors on the same page can have different themes without conflicts. Override any variable in your stylesheet:
+
+```css
+:root {
+  --neo-font-family: "Inter", system-ui, sans-serif;
+  --neo-font-size-body: 16px;
+  --neo-code-font: "Fira Code", "Consolas", monospace;
+  --neo-accent-color: #3b82f6;
+  --neo-bg-canvas: #ffffff;
+  --neo-text-primary: #111827;
+  --neo-text-secondary: #6b7280;
+  --neo-selection-color: #b4d5fe;
+  --neo-border-color: #e5e7eb;
+  --neo-border-radius: 4px;
+  --neo-block-spacing: 4px;
+  --neo-content-width: 800px;
+}
+```
+
+Switch modes via the `theme` prop or via the `data-theme` attribute:
+
+```tsx
+<NeoEditor id="doc" theme={{ mode: "dark" }} />
+```
+
+## Exports
+
+Everything is exported from the package root:
+
+```typescript
+// Components
+export { NeoEditor, EditorContext } from "./NeoEditor";
+export { NeoCanvas } from "./NeoCanvas";
+export { EditableBlock } from "./EditableBlock";
+export { BlockRenderer } from "./BlockRenderer";
+
+// Block renderers
+export {
+  HeadingBlock,
+  ListBlock,
+  MediaBlock,
+  CodeBlock,
+  QuoteBlock,
+  CalloutBlock,
+  DividerBlock,
+} from "./blocks/*";
+
+// Interactive UI
+export {
+  PDFDropZone,
+  CursorOverlay,
+  Aeropeak,
+  SlashMenu,
+} from "./components/*";
+
+// Hooks
+export { useEditor, useSelection, useSyncStatus } from "./hooks";
+```
+
+## License
+
+MIT

package/dist/EditableBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableBlock.d.ts","sourceRoot":"","sources":["../src/EditableBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAkB,MAAM,eAAe,CAAC;AAEzD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqEtD,CAAC"}
+{"version":3,"file":"EditableBlock.d.ts","sourceRoot":"","sources":["../src/EditableBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAQ,MAAM,eAAe,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA8ED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmGtD,CAAC"}

package/dist/EditableBlock.js

@@ -1,41 +1,149 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
-import { useEditorStore } from '@editneo/core';
+import { useRef, useContext, useEffect } from 'react';
+import { useStore } from 'zustand';
+import { EditorContext } from './NeoEditor';
+/**
+ * Parse the contentEditable DOM back into Span[] preserving inline formatting.
+ * Walks the child nodes and reads computed/element styles to reconstruct
+ * bold, italic, underline, strikethrough, code, link, color, and highlight.
+ */
+function parseContentEditableToSpans(el) {
+    const spans = [];
+    function walk(node, inherited) {
+        var _a, _b;
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || '';
+            if (text.length > 0) {
+                spans.push({ text, ...inherited });
+            }
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const elem = node;
+        const tag = elem.tagName.toLowerCase();
+        // Build formatting from the element
+        const fmt = { ...inherited };
+        if (tag === 'b' || tag === 'strong')
+            fmt.bold = true;
+        if (tag === 'i' || tag === 'em')
+            fmt.italic = true;
+        if (tag === 'u')
+            fmt.underline = true;
+        if (tag === 's' || tag === 'del' || tag === 'strike')
+            fmt.strike = true;
+        if (tag === 'code')
+            fmt.code = true;
+        if (tag === 'a')
+            fmt.link = elem.getAttribute('href') || undefined;
+        // Check inline styles
+        const style = elem.style;
+        if (style.fontWeight === 'bold' || parseInt(style.fontWeight) >= 700)
+            fmt.bold = true;
+        if (style.fontStyle === 'italic')
+            fmt.italic = true;
+        if ((_a = style.textDecoration) === null || _a === void 0 ? void 0 : _a.includes('underline'))
+            fmt.underline = true;
+        if ((_b = style.textDecoration) === null || _b === void 0 ? void 0 : _b.includes('line-through'))
+            fmt.strike = true;
+        if (style.color)
+            fmt.color = style.color;
+        if (style.backgroundColor && style.backgroundColor !== 'transparent')
+            fmt.highlight = style.backgroundColor;
+        for (const child of Array.from(elem.childNodes)) {
+            walk(child, fmt);
+        }
+    }
+    for (const child of Array.from(el.childNodes)) {
+        walk(child, {});
+    }
+    // Merge adjacent spans with identical formatting
+    const merged = [];
+    for (const span of spans) {
+        const prev = merged[merged.length - 1];
+        if (prev && spansHaveSameFormat(prev, span)) {
+            prev.text += span.text;
+        }
+        else {
+            merged.push({ ...span });
+        }
+    }
+    return merged;
+}
+function spansHaveSameFormat(a, b) {
+    return (!!a.bold === !!b.bold &&
+        !!a.italic === !!b.italic &&
+        !!a.underline === !!b.underline &&
+        !!a.strike === !!b.strike &&
+        !!a.code === !!b.code &&
+        (a.color || '') === (b.color || '') &&
+        (a.highlight || '') === (b.highlight || '') &&
+        (a.link || '') === (b.link || ''));
+}
 export const EditableBlock = ({ block, autoFocus }) => {
     const contentRef = useRef(null);
-    const updateBlock = useEditorStore((state) => state.updateBlock);
-    const addBlock = useEditorStore((state) => state.addBlock);
-    const deleteBlock = useEditorStore((state) => state.deleteBlock);
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('EditableBlock must be used within a NeoEditor');
+    }
+    const updateBlock = useStore(context.store, (state) => state.updateBlock);
+    const addBlock = useStore(context.store, (state) => state.addBlock);
+    const deleteBlock = useStore(context.store, (state) => state.deleteBlock);
+    const undo = useStore(context.store, (state) => state.undo);
+    const redo = useStore(context.store, (state) => state.redo);
     useEffect(() => {
         if (autoFocus && contentRef.current) {
             contentRef.current.focus();
         }
     }, [autoFocus]);
+    /** (#9) Parse DOM back into spans preserving formatting */
     const handleInput = (e) => {
-        const text = e.currentTarget.innerText;
-        // Simple text update for now, Span parsing to be added later
-        updateBlock(block.id, { content: [{ text }] });
+        const el = contentRef.current;
+        if (!el)
+            return;
+        const newSpans = parseContentEditableToSpans(el);
+        updateBlock(block.id, { content: newSpans });
     };
+    /** (#23) Additional keyboard shortcuts */
     const handleKeyDown = (e) => {
         var _a;
-        if (e.key === 'Enter') {
+        // Ctrl+Z / Cmd+Z = undo
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+            e.preventDefault();
+            undo();
+            return;
+        }
+        // Ctrl+Shift+Z / Ctrl+Y = redo
+        if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+            e.preventDefault();
+            redo();
+            return;
+        }
+        if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             addBlock('paragraph', block.id);
         }
+        else if (e.key === 'Enter' && e.shiftKey) {
+            // Shift+Enter: let browser insert <br> (soft break) — don't prevent default
+        }
         else if (e.key === 'Backspace' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.innerText) === '') {
             e.preventDefault();
             deleteBlock(block.id);
         }
-        else if (e.key === '/') {
-            // Slash menu trigger logic (placeholder)
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            // Insert 2 spaces for now — real indent to be added
+            document.execCommand('insertText', false, '  ');
         }
     };
     return (_jsx("div", { ref: contentRef, contentEditable: true, suppressContentEditableWarning: true, onInput: handleInput, onKeyDown: handleKeyDown, style: {
             minHeight: '24px',
             outline: 'none',
             padding: '4px 0',
-            // Basic styling based on type
-            fontSize: block.type === 'heading-1' ? '2em' : '1em',
+            fontSize: block.type === 'heading-1' ? '2em'
+                : block.type === 'heading-2' ? '1.5em'
+                    : block.type === 'heading-3' ? '1.25em'
+                        : '1em',
             fontWeight: block.type.startsWith('heading') ? 'bold' : 'normal',
         }, children: block.content.map((span, i) => {
             let style = {};
@@ -53,10 +161,10 @@ export const EditableBlock = ({ block, autoFocus }) => {
                 style.backgroundColor = span.highlight;
             const content = _jsx("span", { style: style, children: span.text }, i);
             if (span.code) {
-                return _jsx("code", { style: { fontFamily: 'monospace', backgroundColor: '#eee', padding: '2px 4px', borderRadius: '3px' }, children: content }, i);
+                return _jsx("code", { style: { fontFamily: 'var(--neo-code-font, monospace)', backgroundColor: '#eee', padding: '2px 4px', borderRadius: '3px' }, children: content }, i);
             }
             if (span.link) {
-                return _jsx("a", { href: span.link, style: { color: 'blue', textDecoration: 'underline' }, children: content }, i);
+                return _jsx("a", { href: span.link, style: { color: 'var(--neo-accent-color, #3b82f6)', textDecoration: 'underline' }, children: content }, i);
             }
             return content;
         }) }));

package/dist/EditableBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableBlock.js","sourceRoot":"","sources":["../src/EditableBlock.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAY,cAAc,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAClF,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACjE,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACpC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,CAAC,CAAkC,EAAE,EAAE;QACzD,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC;QACvC,6DAA6D;QAC7D,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAsC,EAAE,EAAE;;QAC/D,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,SAAS,MAAK,EAAE,EAAE,CAAC;YACzE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACxB,yCAAyC;QAC5C,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,cACE,GAAG,EAAE,UAAU,EACf,eAAe,QACf,8BAA8B,QAC9B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE;YACL,SAAS,EAAE,MAAM;YACjB,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,OAAO;YAChB,8BAA8B;YAC9B,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YACpD,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACjE,YAEA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YAC7B,IAAI,KAAK,GAAwB,EAAE,CAAC;YACpC,IAAI,IAAI,CAAC,IAAI;gBAAE,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YACzC,IAAI,IAAI,CAAC,MAAM;gBAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;YAC5C,IAAI,IAAI,CAAC,SAAS;gBAAE,KAAK,CAAC,cAAc,GAAG,WAAW,CAAC;YACvD,IAAI,IAAI,CAAC,MAAM;gBAAE,KAAK,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,cAAc,CAAC;YAClH,IAAI,IAAI,CAAC,KAAK;gBAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACzC,IAAI,IAAI,CAAC,SAAS;gBAAE,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC;YAE3D,MAAM,OAAO,GAAG,eAAc,KAAK,EAAE,KAAK,YAAG,IAAI,CAAC,IAAI,IAA3B,CAAC,CAAkC,CAAC;YAE/D,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,OAAO,eAAc,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,YAAG,OAAO,IAAjH,CAAC,CAAwH,CAAC;YAC9I,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,OAAO,YAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,YAAG,OAAO,IAAnF,CAAC,CAAuF,CAAC;YAC1G,CAAC;YAED,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"EditableBlock.js","sourceRoot":"","sources":["../src/EditableBlock.tsx"],"names":[],"mappings":"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"}

package/dist/NeoCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NeoCanvas.d.ts","sourceRoot":"","sources":["../src/NeoCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAsD7B,CAAC"}
+{"version":3,"file":"NeoCanvas.d.ts","sourceRoot":"","sources":["../src/NeoCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAkF7B,CAAC"}

package/dist/NeoCanvas.js

@@ -1,26 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useRef, useContext } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useEditorStore } from '@editneo/core';
-import { EditableBlock } from './EditableBlock';
+import { useStore } from 'zustand';
+import { EditorContext } from './NeoEditor';
+import { BlockRenderer } from './BlockRenderer';
 export const NeoCanvas = () => {
-    const rootBlocks = useEditorStore((state) => state.rootBlocks);
-    const blocks = useEditorStore((state) => state.blocks);
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('NeoCanvas must be used within a NeoEditor');
+    }
+    const rootBlocks = useStore(context.store, (state) => state.rootBlocks);
+    const blocks = useStore(context.store, (state) => state.blocks);
     const parentRef = useRef(null);
+    /** (#26) Type-aware size estimates for better virtualizer performance */
+    const estimateSize = (index) => {
+        const blockId = rootBlocks[index];
+        const block = blocks[blockId];
+        if (!block)
+            return 35;
+        switch (block.type) {
+            case 'heading-1': return 60;
+            case 'heading-2': return 48;
+            case 'heading-3': return 40;
+            case 'code-block': return 120;
+            case 'image':
+            case 'video': return 200;
+            case 'divider': return 24;
+            default: return 35;
+        }
+    };
     const rowVirtualizer = useVirtualizer({
         count: rootBlocks.length,
         getScrollElement: () => parentRef.current,
-        estimateSize: () => 35, // Estimate row height
+        estimateSize,
         overscan: 5,
     });
     return (_jsx("div", { ref: parentRef, style: {
-            height: '100vh',
+            height: '100%', /* (#24) was 100vh, causing double scrollbar */
             width: '100%',
             overflow: 'auto',
         }, children: _jsx("div", { style: {
                 height: `${rowVirtualizer.getTotalSize()}px`,
                 width: '100%',
                 position: 'relative',
+                maxWidth: 'var(--neo-content-width, 800px)',
+                margin: '0 auto',
+                padding: '0 1rem',
             }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
                 const blockId = rootBlocks[virtualRow.index];
                 const block = blocks[blockId];
@@ -32,7 +57,7 @@ export const NeoCanvas = () => {
                         left: 0,
                         width: '100%',
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: _jsx(EditableBlock, { block: block }) }, virtualRow.key));
+                    }, children: _jsx(BlockRenderer, { block: block }) }, virtualRow.key));
             }) }) }));
 };
 //# sourceMappingURL=NeoCanvas.js.map

package/dist/NeoCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeoCanvas.js","sourceRoot":"","sources":["../src/NeoCanvas.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,SAAS,GAAa,GAAG,EAAE;IACtC,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,cAAc,GAAG,cAAc,CAAC;QACpC,KAAK,EAAE,UAAU,CAAC,MAAM;QACxB,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QACzC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,sBAAsB;QAC9C,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,cACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,MAAM;SACjB,YAED,cACE,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,cAAc,CAAC,YAAY,EAAE,IAAI;gBAC5C,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,UAAU;aACrB,YAEA,cAAc,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;gBACnD,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;gBAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;gBAE9B,IAAI,CAAC,KAAK;oBAAE,OAAO,IAAI,CAAC;gBAExB,OAAO,CACL,4BAEc,UAAU,CAAC,KAAK,EAC5B,GAAG,EAAE,cAAc,CAAC,cAAc,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,CAAC;wBACN,IAAI,EAAE,CAAC;wBACP,KAAK,EAAE,MAAM;wBACb,SAAS,EAAE,cAAc,UAAU,CAAC,KAAK,KAAK;qBAC/C,YAED,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,GAAI,IAX1B,UAAU,CAAC,GAAG,CAYf,CACP,CAAC;YACJ,CAAC,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"NeoCanvas.js","sourceRoot":"","sources":["../src/NeoCanvas.tsx"],"names":[],"mappings":"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"}

package/dist/NeoEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SyncManager } from '@editneo/sync';
+import { EditorStoreInstance, EditorStore } from '@editneo/core';
 import './styles.css';
 export interface NeoEditorProps {
     id: string;
@@ -16,10 +16,18 @@ export interface NeoEditorProps {
     };
     children?: React.ReactNode;
 }
-export declare const EditorContext: React.Context<{
+interface EditorContextValue {
     editorId: string;
-    syncManager: SyncManager | null;
+    store: EditorStoreInstance;
+    syncManager: any | null;
     renderBlock?: (block: any, defaultRender: any) => React.ReactNode;
-} | null>;
+}
+export declare const EditorContext: React.Context<EditorContextValue | null>;
+/**
+ * Hook to access the current editor's Zustand store via context.
+ * Supports selectors for fine-grained re-render control.
+ */
+export declare function useEditorStoreContext<T>(selector: (state: EditorStore) => T): T;
 export declare const NeoEditor: React.FC<NeoEditorProps>;
+export {};
 //# sourceMappingURL=NeoEditor.d.ts.map

package/dist/NeoEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NeoEditor.d.ts","sourceRoot":"","sources":["../src/NeoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE;QACX,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;QAEvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa;cACd,MAAM;iBACH,WAAW,GAAG,IAAI;kBACjB,CAAC,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS;SACpD,CAAC;AAEhB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4D9C,CAAC"}
+{"version":3,"file":"NeoEditor.d.ts","sourceRoot":"","sources":["../src/NeoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAqB,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpF,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE;QACX,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;QACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAE5E;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,CAAC,GAAG,CAAC,CAM/E;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsF9C,CAAC"}