@libraz/mejiro-react 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,90 @@
+# @libraz/mejiro-react
+
+[![npm version](https://img.shields.io/npm/v/@libraz/mejiro-react.svg)](https://www.npmjs.com/package/@libraz/mejiro-react)
+[![license](https://img.shields.io/npm/l/@libraz/mejiro-react.svg)](https://github.com/libraz/mejiro/blob/main/LICENSE)
+
+React components and hooks for [mejiro](https://www.npmjs.com/package/@libraz/mejiro) vertical text rendering.
+
+> **Experimental** — API may change in future releases.
+
+## Install
+
+```bash
+npm install @libraz/mejiro @libraz/mejiro-react
+```
+
+Peer dependency: `react >= 18`
+
+## Quick Start
+
+```tsx
+import { DEFAULT_HEADING_STYLES, MejiroBook } from '@libraz/mejiro/book';
+import { parseEpub } from '@libraz/mejiro/epub';
+import { MejiroPageView } from '@libraz/mejiro-react';
+import '@libraz/mejiro/render/mejiro.css';
+
+const book = new MejiroBook({
+  fontFamily: '"Noto Serif JP"',
+  fontSize: 16,
+  lineSpacing: 1.8,
+  headingStyles: DEFAULT_HEADING_STYLES,
+});
+book.computePageSize(containerEl);
+
+const epub = await parseEpub(buffer);
+const layout = await book.layoutChapter(epub.chapters[0]);
+const spread = layout.getSpread(0);
+
+<MejiroPageView result={spread.right} fontFamily='"Noto Serif JP"' lineSpacing={1.8} />
+```
+
+## Components
+
+### `MejiroPageView` (Recommended)
+
+Renders a `PageResult` from `ChapterLayout`. Automatically switches between CSS `vertical-rl` and slot-based rendering when images are present.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `result` | `PageResult` | Required. Page result from `ChapterLayout`. |
+| `fontFamily` | `string` | CSS font family (used in slot-based mode). |
+| `lineSpacing` | `number` | Line spacing multiplier (used in slot-based mode). |
+| `slotMode` | `boolean` | Force slot-based rendering (set when layout has images). |
+| `className` | `string` | Additional CSS class name. |
+| `style` | `CSSProperties` | Additional inline styles. |
+
+### `MejiroPage` (Low-Level)
+
+Renders a `RenderPage` using CSS `writing-mode: vertical-rl`. For use with the lower-level `buildRenderPage()` API.
+
+## Hooks
+
+### `useImageOverlay`
+
+Manages a draggable/resizable image overlay with automatic text reflow.
+
+```tsx
+import { useImageOverlay } from '@libraz/mejiro-react';
+
+const { imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown } =
+  useImageOverlay(layout, spreadIdx, (spread) => setSpread(spread));
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `layout` | `ChapterLayout \| null` | Current chapter layout. |
+| `spreadIdx` | `number` | Current spread index. |
+| `onUpdate` | `(spread: SpreadResult) => void` | Called after every reflow. |
+| `options?` | `UseImageOverlayOptions` | Default dimensions, position, and margin. |
+
+Returns `{ imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown }`.
+
+## CSS
+
+```ts
+import '@libraz/mejiro/render/mejiro.css';
+```
+
+## License
+
+[Apache License 2.0](https://github.com/libraz/mejiro/blob/main/LICENSE)

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { RenderPage } from '@libraz/mejiro/render';
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, PointerEvent } from 'react';
+import { PageResult, ChapterLayout, SpreadResult } from '@libraz/mejiro/book';
 
 /** Props for the MejiroPage component. */
 interface MejiroPageProps {
@@ -18,4 +19,88 @@ interface MejiroPageProps {
  */
 declare function MejiroPage({ page, className, style }: MejiroPageProps): ReactNode;
 
-export { MejiroPage, type MejiroPageProps };
+/** Props for the MejiroPageView component. */
+interface MejiroPageViewProps {
+    /** Page result from {@link ChapterLayout.getSpread} or {@link ChapterLayout.getPage}. */
+    result: PageResult;
+    /** CSS font family for slot-based rendering (used when images are present). */
+    fontFamily?: string;
+    /** Line spacing multiplier for slot-based rendering (used when images are present). */
+    lineSpacing?: number;
+    /**
+     * Force slot-based rendering even when `result.hasImages` is false.
+     * Set to `true` when the layout has images on any spread, so that
+     * all pages use consistent slot-based rendering.
+     */
+    slotMode?: boolean;
+    /** Additional CSS class name for the root element. */
+    className?: string;
+    /** Additional inline styles for the root element. */
+    style?: CSSProperties;
+}
+/**
+ * Renders a page from a {@link PageResult}.
+ *
+ * Automatically selects the rendering strategy:
+ * - **Normal mode** (no images): Uses CSS `writing-mode: vertical-rl` via `<MejiroPage>`.
+ * - **Slot mode** (images present): Uses absolute-positioned columns with per-line sizing.
+ *
+ * @example
+ * ```tsx
+ * const spread = layout.getSpread(0);
+ * <MejiroPageView result={spread.right} fontFamily="serif" lineSpacing={1.8} />
+ * ```
+ */
+declare function MejiroPageView({ result, fontFamily, lineSpacing, slotMode, className, style, }: MejiroPageViewProps): ReactNode;
+
+/** Rectangle describing an image overlay position and size. */
+interface ImageRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Options for {@link useImageOverlay}. */
+interface UseImageOverlayOptions {
+    /** Default image width in pixels. @defaultValue 120 */
+    defaultWidth?: number;
+    /** Default image height in pixels. @defaultValue 160 */
+    defaultHeight?: number;
+    /** Default x position. @defaultValue 80 */
+    defaultX?: number;
+    /** Default y position. @defaultValue 100 */
+    defaultY?: number;
+    /** Margin around the image in pixels. Defaults to the book's font size. */
+    margin?: number;
+}
+/** Return value of {@link useImageOverlay}. */
+interface UseImageOverlayReturn {
+    /** Current image rectangle, or `null` if no overlay is active. */
+    imageRect: ImageRect | null;
+    /** Whether an image overlay is currently active. */
+    hasImage: boolean;
+    /** Toggle the image overlay on/off. */
+    toggleImage: () => void;
+    /** Pointer-down handler for the overlay body (initiates drag). */
+    onOverlayPointerDown: (e: PointerEvent) => void;
+    /** Pointer-down handler for the resize handle. */
+    onResizePointerDown: (e: PointerEvent) => void;
+}
+/**
+ * React hook that manages a draggable/resizable image overlay
+ * with automatic text reflow via {@link ChapterLayout.syncImages}.
+ *
+ * @param layout - Current chapter layout (or `null` if not yet loaded).
+ * @param spreadIdx - Current spread index.
+ * @param onUpdate - Called with the updated {@link SpreadResult} after every reflow.
+ * @param options - Default dimensions and position for the overlay.
+ *
+ * @example
+ * ```tsx
+ * const { imageRect, hasImage, toggleImage, onOverlayPointerDown, onResizePointerDown } =
+ *   useImageOverlay(layout, spreadIdx, setSpread);
+ * ```
+ */
+declare function useImageOverlay(layout: ChapterLayout | null, spreadIdx: number, onUpdate: (spread: SpreadResult) => void, options?: UseImageOverlayOptions): UseImageOverlayReturn;
+
+export { type ImageRect, MejiroPage, type MejiroPageProps, MejiroPageView, type MejiroPageViewProps, type UseImageOverlayOptions, type UseImageOverlayReturn, useImageOverlay };

package/dist/index.js

@@ -22,13 +22,171 @@ function renderLine(line, lineIndex) {
 function MejiroPage({ page, className, style }) {
   const rootClass = className ? `mejiro-page ${className}` : "mejiro-page";
   return /* @__PURE__ */ jsx("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
-    const paraClass = paragraph.isHeading ? "mejiro-paragraph mejiro-paragraph--heading" : "mejiro-paragraph";
+    let paraClass = "mejiro-paragraph";
+    if (paragraph.headingLevel != null) {
+      paraClass += ` mejiro-paragraph--h${paragraph.headingLevel}`;
+    } else if (paragraph.isHeading) {
+      paraClass += " mejiro-paragraph--heading";
+    }
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: paragraphs have no stable ID
       /* @__PURE__ */ jsx("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
     );
   }) });
 }
+
+// src/MejiroPageView.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function renderSlotSegment(segment, key) {
+  if (segment.type === "text") return segment.text;
+  return /* @__PURE__ */ jsxs2("ruby", { children: [
+    segment.base,
+    /* @__PURE__ */ jsx2("rt", { children: segment.rubyText })
+  ] }, key);
+}
+function MejiroPageView({
+  result,
+  fontFamily,
+  lineSpacing,
+  slotMode,
+  className,
+  style
+}) {
+  if (result.hasImages || slotMode) {
+    const rootClass = className ? `mejiro-page-slots ${className}` : "mejiro-page-slots";
+    return /* @__PURE__ */ jsx2("div", { className: rootClass, style: { position: "relative", ...style }, children: result.lines.map((line, i) => {
+      const slot = result.slots[i];
+      if (!slot || slot.height <= 0) return null;
+      const colStyle = {
+        position: "absolute",
+        writingMode: "vertical-rl",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        right: slot.xPos,
+        top: slot.yStart,
+        height: slot.height,
+        fontSize: line.fontSize,
+        fontFamily,
+        lineHeight: lineSpacing,
+        fontWeight: line.headingLevel != null ? 700 : void 0
+      };
+      return (
+        // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable ID
+        /* @__PURE__ */ jsx2("div", { style: colStyle, children: line.segments.map((seg, si) => renderSlotSegment(seg, si)) }, i)
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsx2(MejiroPage, { page: result.page, className, style });
+}
+
+// src/useImageOverlay.ts
+import { useCallback, useRef, useState } from "react";
+function useImageOverlay(layout, spreadIdx, onUpdate, options) {
+  const defW = options?.defaultWidth ?? 120;
+  const defH = options?.defaultHeight ?? 160;
+  const defX = options?.defaultX ?? 80;
+  const defY = options?.defaultY ?? 100;
+  const margin = options?.margin;
+  const [imageRect, setImageRect] = useState(null);
+  const rectRef = useRef(imageRect);
+  rectRef.current = imageRect;
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const spreadRef = useRef(spreadIdx);
+  spreadRef.current = spreadIdx;
+  const onUpdateRef = useRef(onUpdate);
+  onUpdateRef.current = onUpdate;
+  const syncToLayout = useCallback(
+    (rect) => {
+      const lo = layoutRef.current;
+      if (!lo) return;
+      const images = rect ? [{ x: rect.x, y: rect.y, w: rect.w, h: rect.h, margin }] : void 0;
+      const spread = lo.syncImages(spreadRef.current, images);
+      onUpdateRef.current(spread);
+    },
+    [margin]
+  );
+  const toggleImage = useCallback(() => {
+    if (rectRef.current) {
+      setImageRect(null);
+      syncToLayout(null);
+    } else {
+      const r = { x: defX, y: defY, w: defW, h: defH };
+      setImageRect(r);
+      syncToLayout(r);
+    }
+  }, [defX, defY, defW, defH, syncToLayout]);
+  const onOverlayPointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const start = { ...rectRef.current };
+      const target = e.currentTarget;
+      target.setPointerCapture(e.nativeEvent.pointerId);
+      target.classList.add("dragging");
+      let rafId = 0;
+      const onMove = (me) => {
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        const r = { ...start, x: start.x + dx, y: start.y + dy };
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+          setImageRect(r);
+          syncToLayout(r);
+        });
+      };
+      const onUp = () => {
+        target.classList.remove("dragging");
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    [syncToLayout]
+  );
+  const onResizePointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const start = { ...rectRef.current };
+      const target = e.currentTarget;
+      target.setPointerCapture(e.nativeEvent.pointerId);
+      target.parentElement?.classList.add("dragging");
+      let rafId = 0;
+      const onMove = (me) => {
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        const r = { ...start, w: Math.max(40, start.w + dx), h: Math.max(40, start.h + dy) };
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+          setImageRect(r);
+          syncToLayout(r);
+        });
+      };
+      const onUp = () => {
+        target.parentElement?.classList.remove("dragging");
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    [syncToLayout]
+  );
+  return {
+    imageRect,
+    hasImage: imageRect !== null,
+    toggleImage,
+    onOverlayPointerDown,
+    onResizePointerDown
+  };
+}
 export {
-  MejiroPage
+  MejiroPage,
+  MejiroPageView,
+  useImageOverlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libraz/mejiro-react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React components for mejiro vertical text rendering",
   "type": "module",
   "license": "Apache-2.0",
@@ -18,7 +18,8 @@
   },
   "files": [
     "dist",
-    "LICENSE"
+    "LICENSE",
+    "README.md"
   ],
   "sideEffects": false,
   "engines": {
@@ -28,7 +29,7 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@libraz/mejiro": "^0.2.0"
+    "@libraz/mejiro": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=18"