@owomark/view 0.1.4 → 0.1.6

package/README.md

@@ -1,8 +1,6 @@
-# @owomark/view
+# `@owomark/view`
 
-Rendering engine and interactive view layer for OwoMark. Provides the Gold Processor Factory for Markdown → HTML rendering, an incremental preview engine, and a DOM-backed editor view.
-
-Install the official package: `@owomark/view`.
+Browser-only view infrastructure for OwoMark. This package owns the editor view, preview engine, DOM patching, layout logic, and official theme token values.
 
 ## Install
 
@@ -10,287 +8,24 @@ Install the official package: `@owomark/view`.
 npm install @owomark/view
 ```
 
-For MDX support, also install the optional peer dependencies:
-
-```bash
-npm install @mdx-js/mdx react react-dom
-```
-
-## Quick Start
-
-### Official CSS Entry
-
-```ts
-import '@owomark/view/style.css';
-```
-
-`style.css` is the official base theme bundle. It includes the structural CSS, built-in MDX component styles, side-annotation/slash-menu styles, and the light/dark preset token values. New users should start here.
+## Scope
 
-### Markdown → HTML (Static Rendering)
-
-```ts
-import { createOwoMarkProcessor } from '@owomark/view/static';
-
-const processor = createOwoMarkProcessor();
-const result = await processor.process('# Hello\n\nA paragraph with **bold**.');
-console.log(String(result));
-// <h1 id="hello">Hello</h1>\n<p>A paragraph with <strong>bold</strong>.</p>
-```
-
-### MDX → HTML
-
-Enable MDX to render JSX components and expressions at build time:
-
-```ts
-import { createOwoMarkProcessor } from '@owomark/view/static';
-
-const processor = createOwoMarkProcessor({ enableMdx: true });
-const result = await processor.process(`
-<Callout type="info">
-Today is {new Date().getFullYear()}. MDX expressions just work.
-</Callout>
-`);
-console.log(String(result));
-// Built-in Callout component renders to styled HTML
-```
-
-### With Custom Components
-
-```ts
-import { createElement } from 'react';
-import { createOwoMarkProcessor } from '@owomark/view/static';
-
-const Chart = ({ data }) => createElement('div', { className: 'chart' }, `Chart: ${data}`);
-
-const processor = createOwoMarkProcessor({
-  enableMdx: true,
-  mdxComponents: {
-    Chart,              // Add your own component
-    // Callout,         // Built-ins are still available unless you override them
-  },
-});
-
-const result = await processor.process('<Chart data="revenue" />');
-```
+- `createOwoMarkView()` and `createOwoMarkVanillaEditor()` for interactive editing
+- `createOwoMarkPreviewEngine()` and renderer registry APIs for preview DOM rendering
+- `PreviewDomPatcher` and `SideAnnotationPositioner` for browser layout work
+- `getThemeClassName()`, `light.css`, `dark.css`, `owomark.css`, `preview.css`, `slash-menu.css`, `side-annotation.css`
 
-## Gold Processor Factory
-
-The Gold Processor Factory is the single source of truth for OwoMark's rendering pipeline. Both preview and production consume the same factory.
-
-### `createOwoMarkProcessor(options?)`
-
-Returns an `OwoMarkProcessor` with a single `process(source) → Promise<{ value, toString }>` method.
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `mode` | `'preview' \| 'production'` | `'preview'` | Rendering mode |
-| `enableMdx` | `boolean` | `false` | Enable MDX rendering (JSX components + expressions) |
-| `mdxComponents` | `Record<string, ComponentType>` | `{}` | Additional/override components (merged with built-ins) |
-| `enableMath` | `boolean` | `true` | Enable KaTeX math rendering (`$...$`, `$$...$$`) |
-| `enableSideAnnotation` | `boolean` | `true` | Enable side annotation syntax |
-| `preserveSoftLineBreaks` | `boolean` | `false` | When false, plain newlines become `<br>` |
-| `codeTheme` | `string` | `'vitesse-light'` | Shiki theme for code highlighting |
-| `extraRemarkPlugins` | `PluginEntry[]` | `[]` | Additional remark plugins |
-| `extraRehypePlugins` | `PluginEntry[]` | `[]` | Additional rehype plugins |
-
-### `getOwoMarkPlugins(options?)`
-
-Returns `{ remarkPlugins, rehypePlugins }` arrays for use with `@mdx-js/mdx` compile paths directly. Excludes `remark-parse` and `remark-mdx` (MDX manages its own parser).
-
-## Theme Packages
-
-`@owomark/view` owns the official base theme. Third-party themes should layer on top of it instead of replacing it.
-
-### Using a Third-Party Theme
-
-```ts
-import '@owomark/view/style.css';
-import 'owomark-theme-acme/style.css';
-```
-
-Load `@owomark/view/style.css` first, then the theme package. The theme package should override `--owo-*` tokens and only add narrowly scoped visual overrides when tokens are not enough.
-
-### Authoring `owomark-theme-xxx`
-
-A theme package should:
-
-- depend on `@owomark/view` and require consumers to import `@owomark/view/style.css` first
-- publish token overrides and theme classes, not a copy of OwoMark's structural CSS
-- target the public `--owo-*` token contract instead of private internal selectors
-- treat `@owomark/view/style.css`, `@owomark/view/owomark.css`, `@owomark/view/mdx-components.css`, and exported theme helpers as the supported extension surface
-
-Minimal example:
-
-```css
-.owo-theme-acme {
-  --owo-brand: #0f766e;
-  --owo-text: #123047;
-  --owo-surface: #f6fffb;
-  --owo-surface-raised: #ecfdf5;
-  --owo-border: #99f6e4;
-  --owo-border-strong: #5eead4;
-}
-```
-
-Then pass the class to OwoMark:
-
-```tsx
-import { OwoMarkEditor } from '@owomark/react';
-import '@owomark/view/style.css';
-import 'owomark-theme-acme/style.css';
-
-<OwoMarkEditor value={md} onChange={setMd} theme="owo-theme-acme" />;
-```
+## Not in this package
 
-Compatibility rules for third-party themes:
+Static Markdown and MDX processing no longer lives in `@owomark/view`.
 
-- Do not re-implement editor layout, MDX component skeletons, or side-annotation structure unless you are intentionally shipping a full replacement theme.
-- Do not assume private DOM structure is stable beyond documented classes and token hooks.
-- Prefer base tokens such as `--owo-brand`, `--owo-text`, and `--owo-border`; only override component-level tokens when the editor needs to diverge from the shared base theme.
+Use `@owomark/processor` for:
 
-Stable token families:
-
-- `--owo-*`: shared base tokens for brand, text, surface, border, semantic colors, and mono font
-- `--owo-editor-*`: editor-only tokens such as caret, selection, heading, placeholder, and editor surfaces
-- `--owo-syntax-*`: syntax-highlight tokens
-- `--owo-toolbar-*`: toolbar tokens
-- `--owo-panel-*`: panel/popover tokens
-
-## MDX Support
-
-When `enableMdx: true`, the processor delegates to `@mdx-js/mdx` `evaluate()` + `renderToStaticMarkup()`. The output is still an HTML string — callers see no difference.
-
-### Built-in Components
-
-Import the base styles for built-in components:
-
-```ts
-import '@owomark/view/mdx-components.css';
-```
-
-#### Theming
-
-MDX component styles consume `--owo-*` base tokens with hardcoded fallbacks. This means:
-
-- **Zero-config**: Components render correctly without any theme import (fallback colors are embedded).
-- **With theme**: Import `@owomark/view/style.css` and components automatically adapt to light/dark mode.
-- **Custom brand**: Set `--owo-brand` on a wrapper element to change the accent color across Callout (info), Steps, and Tabs simultaneously.
-
-| Component | Props | Description |
-|-----------|-------|-------------|
-| `<Callout>` | `type?: 'info' \| 'warn' \| 'error' \| 'success'` | Styled callout box with icon |
-| `<CodeDemo>` | `title?: string, language?: string, code: string` | Code demonstration block |
-| `<Steps>` | (children: `<Step>`) | Numbered step-by-step guide with vertical line |
-| `<Step>` | `title?: string` | Single step within `<Steps>` |
-| `<Tabs>` | (children: `<Tab>`) | CSS-only tab switcher (no JS runtime) |
-| `<Tab>` | `label?: string` | Single tab panel within `<Tabs>` |
-| `<FileTree>` | (children: indented text) | Directory tree visualization |
-| `<Kbd>` | (children: key name) | Keyboard key indicator |
-
-```mdx
-<Callout type="warn">
-Watch out — this is a warning.
-</Callout>
-
-<Steps>
-  <Step title="Install">Run `npm install @owomark/view`</Step>
-  <Step title="Configure">Enable MDX in your processor options</Step>
-</Steps>
-
-<Tabs>
-  <Tab label="npm">`npm install @owomark/view`</Tab>
-  <Tab label="pnpm">`pnpm add @owomark/view`</Tab>
-</Tabs>
-
-<FileTree>
-{`src/
-  components/
-  lib/
-  styles/
-package.json`}
-</FileTree>
-
-Press <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd> to save.
-
-<CodeDemo title="Hello World" language="python" code="print('hello')" />
-```
-
-### Component Override
-
-User-provided components override built-ins with the same name:
-
-```ts
-import { createElement } from 'react';
-
-const MyCallout = ({ type, children }) =>
-  createElement('aside', { className: `my-callout-${type}` }, children);
-
-const processor = createOwoMarkProcessor({
-  enableMdx: true,
-  mdxComponents: { Callout: MyCallout }, // Replaces built-in Callout
-});
-```
-
-### Unregistered Components
-
-Components used in MDX but not registered (built-in or user-provided) will:
-
-1. Print a `[owomark-mdx] Unregistered MDX component: <Name>` warning
-2. Render as `<div data-mdx-missing="Name">children</div>`
-3. Not interrupt the build
-
-### MDX + Side Annotations
-
-The `{` and `=>` side annotation types conflict with MDX expression syntax. Use keyword forms instead:
-
-| Symbol | Keyword | Example |
-|--------|---------|---------|
-| `{` | `left-brace` | `(>left-brace annotation text)` |
-| `=>` | `fat-arrow` | `(>fat-arrow annotation text)` |
-
-All other side annotation types (`}`, `]`, `->`, etc.) work unchanged in MDX mode.
-
-### Peer Dependencies
-
-MDX support requires these optional peer dependencies:
-
-- `@mdx-js/mdx` ^3.0.0
-- `react` ^18.0.0 or ^19.0.0
-- `react-dom` ^18.0.0 or ^19.0.0
-
-When `enableMdx` is false (default), these are not needed.
-
-## Plugin Chain
-
-The Gold Processor applies plugins in this order:
-
-**Remark** (Markdown → mdast):
-`remark-parse` → `remark-gfm` → `remark-math`* → `remark-directive` → `remark-mdx`† → `soft-breaks`‡ → `remark-side-annotation`* → extras
-
-**Rehype** (hast → HTML):
-`rehype-katex`* → `rehype-math-display-fix`* → `rehype-slug` → `rehype-pretty-code` → `rehype-side-annotation`* → extras → `rehype-stringify`
-
-<small>* = gated by feature flag · † = production mode only · ‡ = when `preserveSoftLineBreaks` is false</small>
-
-## Exports
-
-### `@owomark/view/static` (SSR-safe)
-
-```ts
-import {
-  createOwoMarkProcessor,
-  getOwoMarkPlugins,
-  // Built-in MDX components
-  DEFAULT_MDX_COMPONENTS,
-  Callout, CodeDemo, Steps, Step, Tabs, Tab, FileTree, Kbd,
-  // Internal plugins (for advanced use)
-  remarkSideAnnotation,
-  rehypeSideAnnotation,
-  remarkConvertSoftBreaksToHardBreaks,
-  rehypeMathDisplayFix,
-} from '@owomark/view/static';
-```
+- `createOwoMarkProcessor()`
+- `getOwoMarkPlugins()`
+- `DEFAULT_MDX_COMPONENTS`
+- `@owomark/processor/mdx-components.css`
 
-### `@owomark/view` (Full — includes editor + preview engine)
+## CSS
 
-All static exports plus the interactive view engine, preview engine, DOM patcher, and side annotation positioner.
+`@owomark/view/style.css` now aggregates only browser-side view CSS and theme presets. MDX component CSS is intentionally excluded and must be imported from `@owomark/processor`.

package/dist/{chunk-Y72HQJQI.js → chunk-KHKPOH74.js}

@@ -11,10 +11,9 @@ var HEAVY_LARGE_THRESHOLD = 50;
 var HEAVY_SMALL_HEIGHT = 60;
 var HEAVY_MEDIUM_HEIGHT = 200;
 var HEAVY_LARGE_HEIGHT = 500;
-var HEAVY_KINDS = /* @__PURE__ */ new Set(["mermaid", "katex", "math-block", "chart", "embed"]);
-function estimateBlockHeight(block) {
+function estimateBlockHeight(block, registry) {
   const lineCount = block.endLine - block.startLine + 1;
-  if (HEAVY_KINDS.has(block.kind)) {
+  if (registry?.isHeavy(block.kind)) {
     return estimateHeavyBlockHeight(lineCount);
   }
   if (block.kind === "code-fence") {

package/dist/{chunk-F3LG7AML.js → chunk-WA6XHBZS.js}

@@ -1,25 +1,44 @@
-// src/virtual/viewport-manager.ts
-var BLOCK_ID_ATTR = "data-block-id";
-var SOURCE_START_ATTR = "data-source-line-start";
-var SOURCE_END_ATTR = "data-source-line-end";
-var HEIGHT_TRANSITION = "top 0.15s ease-out";
-var TOTAL_HEIGHT_TRANSITION = "height 0.15s ease-out";
+// src/dom/skeleton.ts
 var SKELETON_GAP = 8;
-function createSkeletonHtml(height) {
-  const innerHeight = Math.max(height - SKELETON_GAP, 8);
-  return `<div class="owo-skeleton" style="height:${innerHeight}px;margin-bottom:${SKELETON_GAP}px;border-radius:4px;background:linear-gradient(90deg,#e2e2e2 25%,#efefef 50%,#e2e2e2 75%);background-size:200% 100%;animation:zm-skeleton-pulse 1.5s ease-in-out infinite" aria-hidden="true"></div>`;
+var SKELETON_LINE_HEIGHT = 14;
+var SKELETON_PADDING = 24;
+function createSkeletonHtml(options = {}) {
+  const { height, lines } = options;
+  const lineCount = lines ?? (height != null ? Math.max(1, Math.min(5, Math.round(Math.max(height - SKELETON_PADDING, 8) / (SKELETON_LINE_HEIGHT + SKELETON_GAP)))) : 3);
+  const heightStyle = height != null ? ` style="height:${height}px;min-height:${height}px"` : "";
+  const lineEls = [];
+  for (let i = 0; i < lineCount; i++) {
+    const isLast = i === lineCount - 1;
+    lineEls.push(`<div class="owo-mdx-skeleton owo-mdx-skeleton-line"${isLast ? ' style="width:60%"' : ""}></div>`);
+  }
+  return `<div class="owo-mdx-skeleton-block"${heightStyle} aria-hidden="true">${lineEls.join("")}</div>`;
 }
+var SKELETON_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%}
+`.trim();
+var STYLE_ID = "owo-mdx-skeleton-styles";
 function ensureSkeletonStyles(doc) {
   try {
-    if (doc.getElementById?.("owo-skeleton-styles")) return;
+    if (doc.getElementById?.(STYLE_ID)) return;
     const style = doc.createElement("style");
-    style.id = "owo-skeleton-styles";
-    style.textContent = `@keyframes zm-skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+    style.id = STYLE_ID;
+    style.textContent = SKELETON_CSS;
     const target = doc.head ?? doc.body;
     target?.appendChild(style);
   } catch {
   }
 }
+
+// src/virtual/viewport-manager.ts
+var BLOCK_ID_ATTR = "data-block-id";
+var SOURCE_START_ATTR = "data-source-line-start";
+var SOURCE_END_ATTR = "data-source-line-end";
+var HEIGHT_TRANSITION = "top 0.15s ease-out";
+var TOTAL_HEIGHT_TRANSITION = "height 0.15s ease-out";
 var VirtualViewportManager = class {
   root = null;
   scrollContainer = null;
@@ -93,7 +112,7 @@ var VirtualViewportManager = class {
         wrapper.style.left = "0";
         wrapper.style.width = "100%";
         wrapper.style.transition = HEIGHT_TRANSITION;
-        wrapper.innerHTML = createSkeletonHtml(layout.height);
+        wrapper.innerHTML = createSkeletonHtml({ height: layout.height });
         this.contentLayer.appendChild(wrapper);
         this.mounted.set(block.blockId, wrapper);
         newlyMounted.add(block.blockId);
@@ -188,5 +207,7 @@ var VirtualViewportManager = class {
 };
 
 export {
+  createSkeletonHtml,
+  ensureSkeletonStyles,
   VirtualViewportManager
 };

package/dist/index.d.ts

@@ -1,9 +1,7 @@
-import { OwoMarkCore, OwoMarkEditorInstance, OwoMarkSharedState, PreviewBlockKind, PreviewBlock } from '@owomark/core';
+import { OwoMarkCore, OwoMarkEditorInstance, PreviewBlock } from '@owomark/core';
 export { DocumentChangeCallback } from '@owomark/core';
-export { Callout, CodeDemo, DEFAULT_MDX_COMPONENTS, FileTree, Kbd, MdxComponentMap, OwoMarkProcessor, OwoMarkProcessorOptions, OwoMarkThemeName, PluginEntry, ProcessorMode, SideAnnotationNode, Step, Steps, THEME_DARK_CLASS, THEME_LIGHT_CLASS, Tab, Tabs, createOwoMarkProcessor, getOwoMarkPlugins, getThemeClassName, rehypeMathDisplayFix, rehypeSideAnnotation, remarkConvertSoftBreaksToHardBreaks, remarkSideAnnotation } from './static.js';
-import 'react';
-import 'mdast';
-import 'hast';
+import { O as OwoMarkPreviewEngineOptions, a as OwoMarkPreviewEngine, P as PreviewRendererRegistry, b as PreviewTaskScheduler } from './types-DsL_4tUb.js';
+export { c as PreviewBlockMetadata, d as PreviewBlockRenderer, e as PreviewCacheEntry, f as PreviewRenderContext, g as PreviewRenderPhase, h as PreviewRenderResult, i as PreviewRendererDefinition, j as PreviewRendererMode, k as PreviewStrategy, l as PreviewTaskPriority } from './types-DsL_4tUb.js';
 
 /**
  * Three-layer view engine for OwoMark.
@@ -49,77 +47,6 @@ declare function createOwoMarkView(core: OwoMarkCore, element: HTMLElement): Owo
  */
 declare function createOwoMarkVanillaEditor(): OwoMarkEditorInstance;
 
-type PreviewRenderPhase = 'idle' | 'rendering' | 'highlighting' | 'ready' | 'error';
-type PreviewCacheEntry = {
-    blockId: string;
-    renderKey: string;
-    html: string;
-    highlighted: boolean;
-    themeKey: string;
-    updatedAt: number;
-};
-type PreviewRenderContext = {
-    version: number;
-    themeKey: string;
-    abortSignal?: AbortSignal;
-    /**
-     * Line offset to add to source-line attributes in the rendered HTML.
-     * When a block starts at line N in the document, the renderer processes
-     * its raw content starting from line 1; this offset (N - 1) must be
-     * added to `data-source-line-start/end` so scroll sync anchors map
-     * to the correct document lines.
-     */
-    sourceLineOffset: number;
-};
-type PreviewRenderResult = {
-    kind: 'html';
-    html: string;
-} | {
-    kind: 'dom';
-    mount: (container: HTMLElement) => void;
-    unmount?: () => void;
-};
-type PreviewRendererMode = 'html-worker-safe' | 'dom-main-thread';
-type PreviewTaskPriority = 'realtime' | 'deferred';
-type PreviewRendererDefinition = {
-    mode: PreviewRendererMode;
-    priority: PreviewTaskPriority;
-    render: PreviewBlockRenderer;
-    version: string;
-};
-type PreviewBlockRenderer = (block: PreviewBlock, context: PreviewRenderContext) => Promise<PreviewRenderResult> | PreviewRenderResult;
-type PreviewRendererRegistry = {
-    get(kind: PreviewBlockKind): PreviewRendererDefinition | null;
-    register(kind: PreviewBlockKind, renderer: PreviewRendererDefinition): void;
-    unregister(kind: PreviewBlockKind): void;
-};
-type PreviewStrategy = 'incremental' | 'virtual';
-type OwoMarkPreviewEngineOptions = {
-    strategy?: PreviewStrategy;
-    themeKey?: string;
-    registry?: PreviewRendererRegistry;
-    viewportFirst?: boolean;
-    /**
-     * External block renderer function. When provided, the engine uses this
-     * instead of the built-in default renderer. This allows the host to supply
-     * its own Markdown pipeline (unified, remark, rehype, Shiki, etc.) without
-     * the preview package bundling those heavy dependencies.
-     */
-    renderBlock?: (block: PreviewBlock, context: PreviewRenderContext) => Promise<string>;
-    /**
-     * Called after every DOM mutation — including idle-backfilled and deferred
-     * block renders — not just after the synchronous update() return.
-     * Use for scroll sync or other post-DOM-update side effects.
-     */
-    onContentUpdate?: () => void;
-};
-type OwoMarkPreviewEngine = {
-    mount(root: HTMLElement): void;
-    destroy(): void;
-    update(state: OwoMarkSharedState): void;
-    getRenderedVersion(): number;
-};
-
 /**
  * OwoMark Preview Engine factory.
  *
@@ -149,6 +76,18 @@ declare function createRendererRegistry(): PreviewRendererRegistry;
  */
 declare function renderBlockDefault(block: PreviewBlock): string;
 
+declare function createPreviewTaskScheduler(options?: {
+    poolSize?: number;
+    onCrash?: () => void;
+}): PreviewTaskScheduler;
+
+type SkeletonOptions = {
+    height?: number;
+    lines?: number;
+};
+declare function createSkeletonHtml(options?: SkeletonOptions): string;
+declare function ensureSkeletonStyles(doc: Document): void;
+
 /**
  * DOM patcher: blockId-driven incremental DOM updates.
  *
@@ -225,4 +164,9 @@ declare class SideAnnotationPositioner {
     destroy(): void;
 }
 
-export { type OwoMarkPreviewEngine, type OwoMarkPreviewEngineOptions, type OwoMarkView, type OwoMarkViewEngine, type PreviewBlockRenderer, type PreviewCacheEntry, PreviewDomPatcher, type PreviewRenderContext, type PreviewRenderPhase, type PreviewRenderResult, type PreviewRendererDefinition, type PreviewRendererMode, type PreviewRendererRegistry, type PreviewStrategy, type PreviewTaskPriority, SideAnnotationPositioner, type ViewEngineOptions, createOwoMarkPreviewEngine, createOwoMarkVanillaEditor, createOwoMarkView, createRendererRegistry, createViewEngine, renderBlockDefault };
+declare const THEME_LIGHT_CLASS = "owo-theme-light";
+declare const THEME_DARK_CLASS = "owo-theme-dark";
+type OwoMarkThemeName = 'light' | 'dark' | string;
+declare function getThemeClassName(theme: OwoMarkThemeName): string;
+
+export { OwoMarkPreviewEngine, OwoMarkPreviewEngineOptions, type OwoMarkThemeName, type OwoMarkView, type OwoMarkViewEngine, PreviewDomPatcher, PreviewRendererRegistry, PreviewTaskScheduler, SideAnnotationPositioner, type SkeletonOptions, THEME_DARK_CLASS, THEME_LIGHT_CLASS, type ViewEngineOptions, createOwoMarkPreviewEngine, createOwoMarkVanillaEditor, createOwoMarkView, createPreviewTaskScheduler, createRendererRegistry, createSkeletonHtml, createViewEngine, ensureSkeletonStyles, getThemeClassName, renderBlockDefault };