@bardway/trpg-notebook-native 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1094 @@
+// src/storage.ts
+var nativePromise = null;
+var native = () => {
+  if (!nativePromise) {
+    nativePromise = import("expo").then(
+      ({ requireNativeModule }) => requireNativeModule("NotebookStorage")
+    ).catch(() => {
+      nativePromise = null;
+      throw new Error("\u624B\u8BB0\u672C\u5730\u5B58\u50A8\u4E0D\u53EF\u7528\uFF0C\u8BF7\u91CD\u65B0\u7F16\u8BD1 Android \u5E94\u7528");
+    });
+  }
+  return nativePromise;
+};
+var decode = (payload) => JSON.parse(payload);
+var notebookNativeStorage = {
+  capabilities: async () => decode(await (await native()).capabilities()),
+  ensureWorkspace: async (accountId, sessionId) => decode(await (await native()).ensureWorkspace(JSON.stringify({ accountId, sessionId }))),
+  readDocument: async (context, documentId) => decode(await (await native()).readDocument(JSON.stringify({ context, documentId }))),
+  initializeMemoTemplate: async (context, documentId, template) => decode(
+    await (await native()).initializeMemoTemplate(JSON.stringify({ context, documentId, template }))
+  ),
+  importDocument: async (context, document) => decode(await (await native()).importDocument(JSON.stringify({ context, document }))),
+  commitOperation: async (context, documentId, operation) => decode(
+    await (await native()).commitOperation(JSON.stringify({ context, documentId, operation }))
+  ),
+  saveViewport: async (context, documentId, viewport, memoTemplateId) => {
+    await (await native()).saveViewport(
+      JSON.stringify({
+        context,
+        documentId,
+        viewport,
+        ...memoTemplateId ? { memoTemplateId } : {}
+      })
+    );
+  },
+  saveLayoutProfile: async (context, documentId, layout, viewport, memoTemplateId) => {
+    await (await native()).saveLayoutProfile(
+      JSON.stringify({
+        context,
+        documentId,
+        layout,
+        viewport,
+        ...memoTemplateId ? { memoTemplateId } : {}
+      })
+    );
+  },
+  setActiveDocument: async (context, documentId) => {
+    await (await native()).setActiveDocument(JSON.stringify({ context, documentId }));
+  },
+  deleteSession: async (accountId, sessionId) => {
+    await (await native()).deleteSession(JSON.stringify({ accountId, sessionId }));
+  },
+  flush: async () => {
+    if (nativePromise) await (await nativePromise).flush();
+  }
+};
+var readNotebookMarkdownImport = async (uri) => decode(await (await native()).readImport(JSON.stringify({ uri })));
+
+// src/importPicker.ts
+import * as DocumentPicker from "expo-document-picker";
+import { File, Paths } from "expo-file-system";
+var pickNotebookMarkdownFiles = async () => {
+  const result = await DocumentPicker.getDocumentAsync({
+    type: "*/*",
+    multiple: true,
+    copyToCacheDirectory: true
+  });
+  if (result.canceled) return null;
+  return result.assets.map(({ uri, name, size }) => ({ uri, name, size }));
+};
+var cleanupNotebookImportCopy = (uri) => {
+  const cache = Paths.cache.uri.endsWith("/") ? Paths.cache.uri : `${Paths.cache.uri}/`;
+  if (!uri.startsWith(cache) || uri.includes("/../") || uri.includes("%2e")) return;
+  const file = new File(uri);
+  if (file.exists) file.delete();
+};
+
+// src/reader/ReaderHost.tsx
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  Linking,
+  NativeModules,
+  Platform as Platform2,
+  Text,
+  UIManager,
+  View,
+  findNodeHandle
+} from "react-native";
+import WebView from "react-native-webview";
+import { useTheme } from "@bardway/trpg-ui-native";
+import { resolveTypographyTextStyle } from "@bardway/trpg-ui-native";
+import { ThemedButton } from "@bardway/trpg-ui-native";
+import { safeExternalLink } from "@bardway/trpg-markdown/protocol";
+import { createReaderChunks, ReaderChunkAssembler } from "@bardway/trpg-markdown/protocol";
+import {
+  READER_ORIGIN,
+  READER_PROTOCOL_VERSION,
+  READER_URL
+} from "@bardway/trpg-markdown/protocol";
+
+// src/reader/ReaderNativeConfig.ts
+import { Platform, requireNativeComponent } from "react-native";
+var ReaderNativeComponent = Platform.OS === "android" ? requireNativeComponent("TrpgMarkdownWebView") : void 0;
+var READER_NATIVE_CONFIG = ReaderNativeComponent ? { component: ReaderNativeComponent } : void 0;
+
+// src/reader/ReaderHost.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var describeSafeFailure = (value) => ({
+  errorType: value instanceof Error ? value.name : "UnknownFailure"
+});
+var SOURCE = { uri: READER_URL };
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var ReaderHost = React.memo(function ReaderHost2({
+  documentKey,
+  payload,
+  active = true,
+  viewport = false,
+  onEvent,
+  onError
+}) {
+  const { theme, typography, logger } = useTheme();
+  const reactId = useId();
+  const instanceId = useMemo(() => `reader-${reactId}-${Date.now().toString(36)}`, [reactId]);
+  const nonce = useRef(`${Math.random().toString(36)}${Math.random().toString(36)}`).current;
+  const webview = useRef(null);
+  const container = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [height, setHeight] = useState(1);
+  const [failure, setFailure] = useState(null);
+  const currentReady = useRef(ready);
+  currentReady.current = ready;
+  const errorText = resolveTypographyTextStyle(typography, {
+    role: "body",
+    fontSize: 13,
+    metric: "body"
+  });
+  const eventRoutes = useRef(/* @__PURE__ */ new Map());
+  eventRoutes.current.set(documentKey, onEvent);
+  if (eventRoutes.current.size > 24) {
+    const first = eventRoutes.current.keys().next().value;
+    if (first) eventRoutes.current.delete(first);
+  }
+  const currentKey = useRef(documentKey);
+  currentKey.current = documentKey;
+  const currentActive = useRef(active);
+  currentActive.current = active;
+  const errorCallback = useRef(onError);
+  errorCallback.current = onError;
+  const incoming = useRef(new ReaderChunkAssembler());
+  const sendForKey = useCallback(
+    (key, type, data) => {
+      webview.current?.postMessage(
+        JSON.stringify({
+          protocol: READER_PROTOCOL_VERSION,
+          instanceId,
+          nonce,
+          documentKey: key,
+          type,
+          payload: data
+        })
+      );
+    },
+    [instanceId, nonce]
+  );
+  const report = useCallback(
+    (message, stage, cause) => {
+      setFailure(message);
+      errorCallback.current?.(message);
+      logger.warn("[MarkdownReader] Reader failed", {
+        instanceId,
+        stage,
+        ...describeSafeFailure(message),
+        ...cause === void 0 ? {} : { cause: describeSafeFailure(cause) },
+        ready: currentReady.current,
+        active: currentActive.current
+      });
+    },
+    [instanceId, logger]
+  );
+  const serialized = useMemo(() => JSON.stringify(payload), [payload]);
+  useEffect(() => {
+    if (ready) return;
+    const timeout = setTimeout(
+      () => report("\u672C\u5730\u9605\u8BFB\u5668\u672A\u5C31\u7EEA\uFF0C\u8BF7\u68C0\u67E5 Android System WebView \u7248\u672C\u5E76\u91CD\u65B0\u6253\u5F00", "initialization"),
+      15e3
+    );
+    return () => clearTimeout(timeout);
+  }, [ready, report]);
+  useEffect(() => {
+    if (!ready) return;
+    setFailure(null);
+    const id = `${documentKey}-${Date.now()}-${Math.random()}`;
+    try {
+      for (const chunk of createReaderChunks(serialized, id))
+        sendForKey(documentKey, "documentChunk", chunk);
+    } catch (cause) {
+      report("\u6587\u6863\u8D85\u8FC7\u9605\u8BFB\u5668\u6D88\u606F\u5BB9\u91CF\uFF0C\u539F\u59CB\u6570\u636E\u5DF2\u4FDD\u7559", "document-transfer", cause);
+    }
+    sendForKey(documentKey, "setActive", currentActive.current);
+  }, [ready, documentKey, serialized, sendForKey, report]);
+  useEffect(() => {
+    if (ready) sendForKey(documentKey, "setActive", active);
+  }, [ready, active, documentKey, sendForKey]);
+  const processMessage = useCallback(
+    function process(message) {
+      if (message.type === "readerReady") {
+        setReady(true);
+        return;
+      }
+      if (message.type === "bridgeChunk") {
+        const combined = incoming.current.accept(message.documentKey, message.payload);
+        if (combined !== null) {
+          const value = JSON.parse(combined);
+          if (isRecord(value) && typeof value.type === "string" && value.type !== "bridgeChunk")
+            process({ ...message, type: value.type, payload: value.payload });
+        }
+        return;
+      }
+      if (message.type === "readerError") {
+        if (message.documentKey !== currentKey.current) return;
+        report(
+          isRecord(message.payload) && typeof message.payload.message === "string" ? message.payload.message : "\u9605\u8BFB\u5668\u52A0\u8F7D\u5931\u8D25",
+          "renderer"
+        );
+        return;
+      }
+      if (message.type === "openExternalLink") {
+        const url = isRecord(message.payload) && typeof message.payload.url === "string" ? safeExternalLink(message.payload.url) : null;
+        if (url && message.documentKey === currentKey.current)
+          void Linking.openURL(url).catch(
+            (cause) => report("\u94FE\u63A5\u65E0\u6CD5\u6253\u5F00", "external-link", cause)
+          );
+        return;
+      }
+      if (message.type === "anchorRequested" && message.documentKey === currentKey.current && isRecord(message.payload)) {
+        const y = message.payload.y;
+        const bridge = NativeModules.TrpgMarkdownReaderBridge;
+        const tag = findNodeHandle(container.current);
+        if (tag !== null && typeof y === "number" && Number.isFinite(y) && y >= 0 && y <= 1e6 && isRecord(bridge) && typeof bridge.revealAnchor === "function")
+          bridge.revealAnchor(tag, y);
+        return;
+      }
+      if (message.type === "blockMetrics" && message.documentKey === currentKey.current && isRecord(message.payload)) {
+        const next = message.payload.height;
+        if (typeof next === "number" && Number.isFinite(next) && next > 0 && next <= 1e6)
+          setHeight((old) => Math.abs(old - next) < 1 ? old : Math.ceil(next));
+      }
+      eventRoutes.current.get(message.documentKey)?.(message.type, message.payload, {
+        send: (type, data) => sendForKey(message.documentKey, type, data)
+      });
+    },
+    [report, sendForKey]
+  );
+  const onMessage = useCallback(
+    (event) => {
+      if (!event.nativeEvent.url.startsWith(`${READER_ORIGIN}/reader/`) || event.nativeEvent.data.length > 1e5)
+        return;
+      try {
+        const value = JSON.parse(event.nativeEvent.data);
+        if (!isRecord(value) || value.protocol !== READER_PROTOCOL_VERSION || value.instanceId !== instanceId || value.nonce !== nonce || typeof value.documentKey !== "string" || value.documentKey.length > 512 || typeof value.type !== "string")
+          return;
+        processMessage({
+          protocol: READER_PROTOCOL_VERSION,
+          instanceId,
+          nonce,
+          documentKey: value.documentKey,
+          type: value.type,
+          payload: value.payload
+        });
+      } catch (cause) {
+        report("\u9605\u8BFB\u5668\u6D88\u606F\u65E0\u6548", "bridge-message", cause);
+      }
+    },
+    [instanceId, nonce, processMessage, report]
+  );
+  if (Platform2.OS !== "android" || !UIManager.getViewManagerConfig("TrpgMarkdownWebView")) {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: theme.colors.text.muted,
+          fontFamily: typography.body,
+          fontSize: 14,
+          lineHeight: 21,
+          includeFontPadding: false
+        },
+        children: "\u5F53\u524D\u5B89\u88C5\u5305\u7F3A\u5C11\u672C\u5730\u9605\u8BFB\u5668\uFF0C\u8BF7\u91CD\u65B0\u7F16\u8BD1 Android APK\u3002"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ref: container,
+      collapsable: false,
+      style: viewport ? { flex: 1, minHeight: 1 } : { height: Math.max(1, height) },
+      children: [
+        /* @__PURE__ */ jsx(
+          WebView,
+          {
+            ref: webview,
+            nativeConfig: READER_NATIVE_CONFIG,
+            source: SOURCE,
+            onMessage,
+            style: { backgroundColor: "transparent" },
+            containerStyle: { backgroundColor: "transparent" },
+            onLoadEnd: () => {
+              setReady(false);
+              sendForKey(currentKey.current, "initialize");
+            },
+            onError: (event) => report("\u9605\u8BFB\u5668\u8D44\u6E90\u52A0\u8F7D\u5931\u8D25\uFF0C\u53EF\u91CD\u65B0\u6253\u5F00\u6587\u6863", "resource-load", {
+              code: event.nativeEvent.code
+            }),
+            onRenderProcessGone: () => {
+              setReady(false);
+              webview.current?.reload();
+            },
+            onShouldStartLoadWithRequest: (request) => request.url === READER_URL,
+            javaScriptEnabled: true,
+            domStorageEnabled: false,
+            allowFileAccess: false,
+            allowFileAccessFromFileURLs: false,
+            allowUniversalAccessFromFileURLs: false,
+            mixedContentMode: "never",
+            thirdPartyCookiesEnabled: false,
+            sharedCookiesEnabled: false,
+            setSupportMultipleWindows: false,
+            setBuiltInZoomControls: false,
+            scalesPageToFit: false,
+            scrollEnabled: viewport,
+            textZoom: 100,
+            androidLayerType: "hardware"
+          }
+        ),
+        failure ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessibilityLiveRegion: "assertive",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              backgroundColor: theme.colors.surface.actionDanger,
+              borderTopWidth: 1,
+              borderColor: theme.colors.status.error,
+              padding: theme.layout.contentPadding.compact,
+              flexDirection: "row",
+              alignItems: "center",
+              gap: theme.layout.density.spacing.groupY
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  accessibilityRole: "alert",
+                  style: [errorText, { color: theme.colors.text.primary, flex: 1 }],
+                  children: failure
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ThemedButton,
+                {
+                  label: "\u91CD\u8BD5",
+                  accessibilityLabel: "\u91CD\u65B0\u52A0\u8F7D\u9605\u8BFB\u5668",
+                  variant: "danger",
+                  style: {
+                    minHeight: theme.layout.touch.minimumTarget,
+                    minWidth: theme.layout.touch.minimumTarget
+                  },
+                  onPress: () => {
+                    incoming.current = new ReaderChunkAssembler();
+                    setFailure(null);
+                    setReady(false);
+                    webview.current?.reload();
+                  }
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+// src/reader/MarkdownView.tsx
+import React2, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { useTheme as useTheme2 } from "@bardway/trpg-ui-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var useMarkdownTheme = (surface) => {
+  const { theme, typography } = useTheme2();
+  return useMemo2(
+    () => ({
+      body: surface === "paper" ? theme.colors.notebook.text : theme.colors.text.markdownBody,
+      heading: surface === "paper" ? theme.colors.notebook.text : theme.colors.text.accent,
+      muted: surface === "paper" ? theme.colors.notebook.muted : theme.colors.text.muted,
+      link: surface === "paper" ? theme.colors.notebook.link : theme.colors.text.accent,
+      border: surface === "paper" ? theme.colors.notebook.border : theme.colors.border.default,
+      codeBackground: surface === "paper" ? theme.colors.notebook.codeBackground : theme.colors.surface.card,
+      background: surface === "paper" ? theme.colors.notebook.paper : "transparent",
+      paperShade: surface === "paper" ? theme.colors.notebook.paperShade : void 0,
+      paperFiber: surface === "paper" ? theme.colors.notebook.paperFiber : void 0,
+      sizeScale: surface === "paper" ? 1 : typography.sizeScale,
+      narrativeFamily: typography.narrative,
+      titleFamily: typography.title,
+      uiFamily: typography.ui,
+      warning: theme.colors.functional.warning,
+      success: theme.colors.functional.success
+    }),
+    [surface, theme.colors, typography]
+  );
+};
+var MarkdownView = React2.memo(function MarkdownView2({
+  documentKey,
+  markdown,
+  blocks,
+  variant = "body",
+  surface = "app",
+  scrollMode = "intrinsic",
+  columns = 1,
+  onBlockMetrics
+}) {
+  const theme = useMarkdownTheme(surface);
+  const payload = useMemo2(
+    () => ({
+      blocks: blocks ?? [{ id: "body", markdown: markdown ?? "", variant }],
+      theme,
+      scrollMode,
+      columns
+    }),
+    [blocks, markdown, variant, theme, scrollMode, columns]
+  );
+  const onEvent = useCallback2(
+    (type, data) => {
+      if (type !== "blockMetrics" || !isRecord(data) || !Array.isArray(data.metrics)) return;
+      const metrics = [];
+      for (const entry of data.metrics) {
+        if (!isRecord(entry) || typeof entry.id !== "string" || typeof entry.top !== "number" || typeof entry.height !== "number" || !Number.isFinite(entry.top) || !Number.isFinite(entry.height) || entry.height < 0)
+          return;
+        metrics.push({
+          id: entry.id,
+          top: entry.top,
+          height: entry.height,
+          left: typeof entry.left === "number" ? entry.left : 0,
+          width: typeof entry.width === "number" ? entry.width : void 0
+        });
+      }
+      onBlockMetrics?.(metrics);
+    },
+    [onBlockMetrics]
+  );
+  return /* @__PURE__ */ jsx2(
+    ReaderHost,
+    {
+      documentKey,
+      payload,
+      viewport: scrollMode === "viewport",
+      onEvent
+    }
+  );
+});
+var MarkdownBlocksView = MarkdownView;
+
+// src/reader/MarkdownDocumentView.tsx
+import React3, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { useTheme as useTheme3 } from "@bardway/trpg-ui-native";
+import { resolveNotebookPaperTypography } from "@bardway/trpg-notebook";
+import { NOTEBOOK_LIMITS } from "@bardway/trpg-notebook";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var finite = (value) => typeof value === "number" && Number.isFinite(value);
+var viewportGuard = (value) => isRecord(value) && finite(value.scale) && value.scale >= NOTEBOOK_LIMITS.minScale && value.scale <= NOTEBOOK_LIMITS.maxScale && finite(value.paperOffsetX) && Math.abs(value.paperOffsetX) <= 1e7 && finite(value.paperOffsetY) && Math.abs(value.paperOffsetY) <= 1e7;
+var operationGuard = (value) => {
+  if (!isRecord(value) || typeof value.opId !== "string" || value.opId.length > 160) return false;
+  if (value.type === "eraseStrokes")
+    return Array.isArray(value.strokeIds) && value.strokeIds.length <= 1e5 && value.strokeIds.every((id) => typeof id === "string");
+  if (value.type !== "addStroke" || !isRecord(value.stroke)) return false;
+  const stroke = value.stroke;
+  return typeof stroke.id === "string" && typeof stroke.documentId === "string" && finite(stroke.width) && stroke.width > 0 && finite(stroke.layoutVersion) && typeof stroke.color === "string" && typeof stroke.createdAt === "string" && (stroke.coordinateSpace === void 0 || stroke.coordinateSpace === "paper") && Array.isArray(stroke.points) && stroke.points.length > 0 && stroke.points.length <= 1e5 && stroke.points.every(
+    (point) => isRecord(point) && finite(point.x) && finite(point.y) && (point.pressure === void 0 || finite(point.pressure))
+  );
+};
+var layoutGuard = (value) => isRecord(value) && ["rendererVersion", "fontAssetVersion", "styleProfileId", "fingerprint"].every(
+  (key) => typeof value[key] === "string"
+) && ["layoutVersion", "paperWidth", "paperHeight", "contentWidth"].every(
+  (key) => finite(value[key]) && Number(value[key]) > 0
+) && (value.memoTemplateId === void 0 || typeof value.memoTemplateId === "string");
+var MarkdownDocumentView = React3.memo(function MarkdownDocumentView2(props) {
+  const { theme } = useTheme3();
+  const markdownTheme = useMarkdownTheme("paper");
+  const handle = useRef2(null);
+  const templateId = props.document.memoTemplate?.id;
+  const key = `${props.context.accountId}/${props.context.sessionId}/${props.context.generation}/${props.document.id}${templateId ? `/template/${templateId}` : ""}`;
+  const activeKey = useRef2(key);
+  activeKey.current = key;
+  const activeDocumentId = useRef2(props.document.id);
+  activeDocumentId.current = props.document.id;
+  const payload = useMemo3(() => {
+    const paperTypography = resolveNotebookPaperTypography(props.document);
+    return {
+      document: props.document,
+      context: props.context,
+      theme: { ...markdownTheme, sizeScale: paperTypography.sizeScale },
+      profile: {
+        rendererVersion: "1",
+        fontAssetVersion: "1",
+        styleProfileId: paperTypography.styleProfileId,
+        paperWidth: 1600,
+        inkColor: theme.colors.notebook.ink,
+        inkWidth: 3
+      }
+    };
+  }, [props.document, props.context, markdownTheme, theme.colors.notebook.ink]);
+  useEffect2(() => {
+    handle.current?.send("setTool", props.tool);
+  }, [props.tool]);
+  useEffect2(() => {
+    if (props.retryToken) handle.current?.send("retrySaves");
+  }, [props.retryToken]);
+  const onEvent = useCallback3(
+    (type, payloadValue, bridge) => {
+      if (key === activeKey.current) handle.current = bridge;
+      if (!isRecord(payloadValue)) return;
+      if (key !== activeKey.current && props.document.id === activeDocumentId.current || payloadValue.memoTemplateId !== templateId)
+        return;
+      if (type === "layoutReady" && layoutGuard(payloadValue.layout)) {
+        if (key !== activeKey.current || payloadValue.layout.memoTemplateId !== templateId) return;
+        if (payloadValue.viewport !== void 0 && !viewportGuard(payloadValue.viewport)) {
+          bridge.send("layoutAccepted", false);
+          props.onError("\u7EB8\u9762\u9605\u8BFB\u4F4D\u7F6E\u65E0\u6548\uFF0C\u5DF2\u4FDD\u7559\u539F\u59CB\u6570\u636E");
+          return;
+        }
+        void props.onLayoutProfile(payloadValue.layout, payloadValue.viewport).then(() => {
+          if (key !== activeKey.current) return;
+          bridge.send("layoutAccepted", true);
+          bridge.send("setTool", props.tool);
+          props.onReady?.();
+        }).catch((error) => {
+          if (key !== activeKey.current) return;
+          bridge.send("layoutAccepted", false);
+          props.onError(error instanceof Error ? error.message : "\u7EB8\u9762\u7248\u672C\u4E0D\u517C\u5BB9\uFF0C\u7B14\u8FF9\u5DF2\u4FDD\u7559");
+        });
+      } else if ((type === "strokeCommitted" || type === "strokesErased") && operationGuard(payloadValue.operation)) {
+        const operation = payloadValue.operation;
+        void props.onOperation(operation).then((ack) => bridge.send("saveAcknowledged", ack)).catch((error) => {
+          const message = error instanceof Error ? error.message : "\u4FDD\u5B58\u5931\u8D25\uFF0C\u53EF\u91CD\u8BD5";
+          bridge.send("saveFailed", { opId: operation.opId, message });
+          props.onError(message);
+        });
+      } else if (type === "viewportChanged" && isRecord(payloadValue.viewport)) {
+        const { scale, paperOffsetX, paperOffsetY } = payloadValue.viewport;
+        if (finite(scale) && finite(paperOffsetX) && finite(paperOffsetY) && scale >= 0.1 && scale <= 8)
+          void Promise.resolve(props.onViewport({ scale, paperOffsetX, paperOffsetY })).catch(
+            () => props.onError("\u9605\u8BFB\u4F4D\u7F6E\u4FDD\u5B58\u5931\u8D25")
+          );
+      } else if (type === "saveStateChanged") {
+        const state = payloadValue.state;
+        if (state === "saved" || state === "saving" || state === "failed")
+          props.onSaveStateChange?.(state);
+      }
+    },
+    [props, key, templateId]
+  );
+  return /* @__PURE__ */ jsx3(
+    ReaderHost,
+    {
+      documentKey: key,
+      payload,
+      active: props.isActive,
+      viewport: true,
+      onEvent,
+      onError: props.onError
+    }
+  );
+});
+
+// src/NotebookReaderFrame.tsx
+import { useRef as useRef3 } from "react";
+import { ActivityIndicator, StyleSheet, View as View2 } from "react-native";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function NotebookReaderFrame({
+  scopeKey,
+  readerProps,
+  loading,
+  active,
+  loadingColor,
+  loadingBackground,
+  children
+}) {
+  const retained = useRef3(null);
+  if (retained.current?.scopeKey !== scopeKey) retained.current = null;
+  if (readerProps) retained.current = { scopeKey, props: readerProps };
+  const ready = retained.current?.props;
+  return /* @__PURE__ */ jsxs2(View2, { style: styles.root, children: [
+    ready ? /* @__PURE__ */ jsx4(
+      MarkdownDocumentView,
+      {
+        ...ready,
+        isActive: active && !loading && readerProps !== null
+      },
+      scopeKey
+    ) : !loading ? children : null,
+    loading ? /* @__PURE__ */ jsx4(
+      View2,
+      {
+        pointerEvents: "auto",
+        accessibilityLabel: "\u6B63\u5728\u8BFB\u53D6\u624B\u8BB0\u6B63\u6587",
+        style: [styles.loading, { backgroundColor: loadingBackground }],
+        children: /* @__PURE__ */ jsx4(ActivityIndicator, { color: loadingColor })
+      }
+    ) : null
+  ] });
+}
+var styles = StyleSheet.create({
+  root: { flex: 1, minHeight: 0 },
+  loading: { ...StyleSheet.absoluteFillObject, alignItems: "center", justifyContent: "center" }
+});
+
+// src/NotebookPage.tsx
+import React5, { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
+import {
+  ActivityIndicator as ActivityIndicator2,
+  AppState,
+  Pressable,
+  ScrollView,
+  StyleSheet as StyleSheet2,
+  Text as Text2,
+  View as View3
+} from "react-native";
+import { useTheme as useTheme4 } from "@bardway/trpg-ui-native";
+import { resolveTypographyTextStyle as resolveTypographyTextStyle2 } from "@bardway/trpg-ui-native";
+import { ThemedButton as ThemedButton2 } from "@bardway/trpg-ui-native";
+import { useNotebookWorkspace } from "@bardway/trpg-notebook/react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var NotebookPage = React5.memo(function NotebookPage2({
+  accountId,
+  sessionId,
+  isActive,
+  repository,
+  importMarkdown,
+  diagnostics,
+  memoTemplate
+}) {
+  const { theme, typography } = useTheme4();
+  const state = useNotebookWorkspace({
+    accountId,
+    sessionId,
+    repository,
+    importMarkdown,
+    diagnostics,
+    memoTemplate
+  });
+  const documentTabs = [...state.workspace?.documents ?? []].sort(
+    (left, right) => Number(right.kind === "memo") - Number(left.kind === "memo")
+  );
+  const flushWorkspace = state.flush;
+  const [tool, setTool] = useState2("pen");
+  const [retryToken, setRetryToken] = useState2(0);
+  const [appActive, setAppActive] = useState2(
+    AppState.currentState !== "background" && AppState.currentState !== "inactive"
+  );
+  const tabScrollRef = useRef4(null);
+  const tabPositions = useRef4(/* @__PURE__ */ new Map());
+  const tabWidthRef = useRef4(0);
+  const uiText = resolveTypographyTextStyle2(typography, {
+    role: "ui",
+    fontSize: 13,
+    metric: "control",
+    centerVertically: true
+  });
+  const bodyText = resolveTypographyTextStyle2(typography, {
+    role: "body",
+    fontSize: 13,
+    metric: "body"
+  });
+  const revealTab = useCallback4((id) => {
+    const x = tabPositions.current.get(id);
+    if (x !== void 0)
+      tabScrollRef.current?.scrollTo({
+        x: Math.max(0, x - tabWidthRef.current / 3),
+        animated: false
+      });
+  }, []);
+  useEffect3(() => {
+    if (state.document) revealTab(state.document.id);
+  }, [state.document?.id, state.document, revealTab]);
+  useEffect3(() => {
+    setTool("pen");
+  }, [accountId, sessionId]);
+  useEffect3(() => {
+    const subscription = AppState.addEventListener("change", (next) => {
+      setAppActive(next === "active");
+      if (next !== "active") void flushWorkspace();
+    });
+    return () => subscription.remove();
+  }, [flushWorkspace]);
+  const retry = () => {
+    if (state.failedSelectionId) void state.selectDocument(state.failedSelectionId);
+    else if (!state.document) state.reload();
+    else {
+      state.prepareRetry();
+      void flushWorkspace();
+      setRetryToken((value) => value + 1);
+    }
+  };
+  const hasCurrentWorkspace = state.workspace?.context.accountId === accountId && state.workspace.context.sessionId === sessionId;
+  const readerLoading = state.loading || state.workspace !== null && !hasCurrentWorkspace;
+  const hasFailure = Boolean(state.error) || state.saveState === "failed";
+  const failureMessage = state.error || (state.saveState === "failed" ? "\u624B\u8BB0\u4FDD\u5B58\u5931\u8D25\uFF0C\u5DF2\u4FDD\u5B58\u5185\u5BB9\u4FDD\u7559\u3002\u8BF7\u91CD\u8BD5\u3002" : null);
+  const statusLabel = hasFailure ? null : readerLoading ? "\u8BFB\u53D6\u4E2D" : state.saveState === "saving" ? "\u4FDD\u5B58\u4E2D" : null;
+  return /* @__PURE__ */ jsxs3(View3, { style: styles2.root, children: [
+    /* @__PURE__ */ jsxs3(View3, { style: [styles2.toolbar, { minHeight: theme.layout.density.chrome.toolbarHeight }], children: [
+      /* @__PURE__ */ jsxs3(
+        ScrollView,
+        {
+          ref: tabScrollRef,
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          style: styles2.tabScroller,
+          contentContainerStyle: styles2.tabs,
+          onLayout: (event) => {
+            tabWidthRef.current = event.nativeEvent.layout.width;
+            if (state.document) revealTab(state.document.id);
+          },
+          accessibilityRole: "tablist",
+          children: [
+            documentTabs.map((item) => {
+              const selected = state.document?.id === item.id;
+              return /* @__PURE__ */ jsx5(
+                Pressable,
+                {
+                  accessibilityRole: "tab",
+                  accessibilityLabel: item.title,
+                  accessibilityState: { selected },
+                  onPress: () => {
+                    void state.selectDocument(item.id);
+                  },
+                  onLayout: (event) => {
+                    tabPositions.current.set(item.id, event.nativeEvent.layout.x);
+                    if (selected) revealTab(item.id);
+                  },
+                  style: [
+                    styles2.tab,
+                    {
+                      minHeight: theme.layout.touch.minimumTarget,
+                      backgroundColor: selected ? theme.colors.surface.tabActive : theme.colors.surface.tileAlt,
+                      borderColor: selected ? theme.colors.border.active : theme.colors.border.default
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsx5(
+                    Text2,
+                    {
+                      numberOfLines: 1,
+                      style: [
+                        uiText,
+                        { color: selected ? theme.colors.text.accent : theme.colors.text.primary }
+                      ],
+                      children: item.title
+                    }
+                  )
+                },
+                item.id
+              );
+            }),
+            /* @__PURE__ */ jsx5(
+              Pressable,
+              {
+                onPress: () => {
+                  void state.importDocuments();
+                },
+                disabled: state.importing || !state.workspace,
+                accessibilityRole: "button",
+                accessibilityLabel: "\u5BFC\u5165 Markdown \u8865\u5145\u8D44\u6599",
+                accessibilityState: {
+                  disabled: state.importing || !state.workspace,
+                  busy: state.importing
+                },
+                style: [
+                  styles2.add,
+                  {
+                    minHeight: theme.layout.touch.minimumTarget,
+                    minWidth: theme.layout.touch.minimumTarget,
+                    borderColor: theme.colors.border.default,
+                    backgroundColor: theme.colors.surface.tileAlt
+                  }
+                ],
+                children: state.importing ? /* @__PURE__ */ jsx5(ActivityIndicator2, { color: theme.colors.text.accent }) : /* @__PURE__ */ jsx5(Text2, { style: [uiText, { color: theme.colors.text.accent }], children: "+" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx5(View3, { style: styles2.toolGroup, accessibilityRole: "radiogroup", children: ["pen", "eraser"].map((value, index) => /* @__PURE__ */ jsx5(
+        Pressable,
+        {
+          accessibilityRole: "radio",
+          accessibilityLabel: value === "pen" ? "\u753B\u7B14" : "\u6574\u7B14\u6A61\u76AE",
+          accessibilityState: { checked: tool === value },
+          onPress: () => setTool((current) => value === "eraser" && current === "eraser" ? "pen" : value),
+          style: [
+            styles2.tool,
+            index === 0 ? styles2.toolFirst : styles2.toolLast,
+            {
+              minHeight: theme.layout.touch.minimumTarget,
+              borderColor: tool === value ? theme.colors.border.active : theme.colors.border.default,
+              backgroundColor: tool === value ? theme.colors.surface.tabActive : theme.colors.surface.tileAlt
+            }
+          ],
+          children: /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              style: [
+                uiText,
+                { color: tool === value ? theme.colors.text.accent : theme.colors.text.primary }
+              ],
+              children: value === "pen" ? "\u753B\u7B14" : "\u6A61\u76AE"
+            }
+          )
+        },
+        value
+      )) })
+    ] }),
+    failureMessage ? /* @__PURE__ */ jsxs3(
+      View3,
+      {
+        accessibilityLiveRegion: "assertive",
+        style: [
+          styles2.failure,
+          {
+            backgroundColor: theme.colors.surface.actionDanger,
+            borderColor: theme.colors.status.error,
+            padding: theme.layout.contentPadding.compact,
+            gap: theme.layout.density.spacing.groupY
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              accessibilityRole: "alert",
+              style: [bodyText, { color: theme.colors.text.primary, flex: 1 }],
+              children: failureMessage
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ThemedButton2,
+            {
+              label: "\u91CD\u8BD5",
+              accessibilityLabel: "\u91CD\u8BD5\u8BFB\u53D6\u6216\u4FDD\u5B58\u624B\u8BB0",
+              onPress: retry,
+              variant: "danger",
+              style: {
+                minHeight: theme.layout.touch.minimumTarget,
+                minWidth: theme.layout.touch.minimumTarget
+              }
+            }
+          )
+        ]
+      }
+    ) : null,
+    state.notice ? /* @__PURE__ */ jsx5(Text2, { numberOfLines: 3, style: [bodyText, { color: theme.colors.text.secondary }], children: state.notice }) : null,
+    /* @__PURE__ */ jsxs3(View3, { style: styles2.reader, children: [
+      /* @__PURE__ */ jsx5(
+        NotebookReaderFrame,
+        {
+          scopeKey: `${accountId}/${sessionId}`,
+          active: isActive && appActive,
+          loading: readerLoading,
+          loadingColor: theme.colors.text.accent,
+          loadingBackground: theme.colors.surface.overlay,
+          readerProps: !readerLoading && hasCurrentWorkspace && state.document && state.workspace ? {
+            context: state.workspace.context,
+            document: state.document,
+            isActive: isActive && appActive,
+            tool,
+            retryToken,
+            onOperation: state.commitOperation,
+            onViewport: state.saveViewport,
+            onLayoutProfile: state.saveLayoutProfile,
+            onError: state.reportError,
+            onSaveStateChange: state.reportSaveState
+          } : null,
+          children: /* @__PURE__ */ jsxs3(View3, { style: styles2.empty, children: [
+            /* @__PURE__ */ jsx5(Text2, { style: [bodyText, { color: theme.colors.text.secondary }], children: "\u624B\u8BB0\u5C1A\u672A\u8BFB\u53D6\u3002\u6B63\u6587\u548C\u7B14\u8FF9\u4FDD\u7559\u5728\u672C\u673A\u3002" }),
+            /* @__PURE__ */ jsx5(ThemedButton2, { label: "\u91CD\u8BD5", onPress: state.reload, variant: "secondary" })
+          ] })
+        }
+      ),
+      statusLabel ? /* @__PURE__ */ jsx5(
+        View3,
+        {
+          pointerEvents: "none",
+          style: [
+            styles2.status,
+            {
+              minHeight: theme.layout.touch.minimumTarget,
+              backgroundColor: theme.colors.surface.panel
+            }
+          ],
+          accessibilityRole: "text",
+          accessibilityLabel: statusLabel,
+          children: /* @__PURE__ */ jsx5(Text2, { style: [uiText, { color: theme.colors.text.secondary }], children: statusLabel })
+        }
+      ) : null
+    ] })
+  ] });
+});
+var styles2 = StyleSheet2.create({
+  root: { flex: 1, minHeight: 0, gap: 6 },
+  toolbar: { flexDirection: "row", alignItems: "center", gap: 12, flexShrink: 0 },
+  tabScroller: { flex: 1, minWidth: 0 },
+  tabs: { flexDirection: "row", alignItems: "stretch", gap: 4 },
+  tab: {
+    minWidth: 88,
+    maxWidth: 260,
+    borderWidth: 1,
+    borderRadius: 5,
+    paddingHorizontal: 12,
+    justifyContent: "center"
+  },
+  add: { borderWidth: 1, borderRadius: 5, justifyContent: "center", alignItems: "center" },
+  toolGroup: { flexDirection: "row", flexShrink: 0 },
+  failure: { flexDirection: "row", alignItems: "center", borderWidth: 1, borderRadius: 5 },
+  status: {
+    position: "absolute",
+    top: 6,
+    left: 6,
+    zIndex: 1,
+    borderRadius: 5,
+    paddingHorizontal: 12,
+    justifyContent: "center"
+  },
+  tool: {
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    minWidth: 64,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  toolFirst: { borderTopLeftRadius: 5, borderBottomLeftRadius: 5 },
+  toolLast: { borderTopRightRadius: 5, borderBottomRightRadius: 5, marginLeft: -1 },
+  reader: { flex: 1, minHeight: 0, borderRadius: 5, overflow: "hidden" },
+  empty: { flex: 1, gap: 12, justifyContent: "center", alignItems: "center" }
+});
+
+// src/AppMarkdown.tsx
+import React6 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var AppMarkdown = React6.memo(function AppMarkdown2({
+  children,
+  variant = "body",
+  documentKey
+}) {
+  const instanceKey = React6.useId();
+  return /* @__PURE__ */ jsx6(
+    MarkdownView,
+    {
+      documentKey: documentKey ?? `app-markdown:${instanceKey}`,
+      markdown: children,
+      variant,
+      surface: "app",
+      scrollMode: "intrinsic"
+    }
+  );
+});
+
+// src/AppMarkdownSections.tsx
+import React7, { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef5, useState as useState3 } from "react";
+import { View as View4 } from "react-native";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var EMPTY_HEADER_HEIGHTS = {};
+var AppMarkdownSections = React7.memo(function AppMarkdownSections2({
+  documentKey,
+  sections,
+  variant = "body",
+  leadingWidth = 0,
+  columns = 1,
+  style
+}) {
+  const activeDocumentKey = useRef5(documentKey);
+  activeDocumentKey.current = documentKey;
+  const [measurement, setMeasurement] = useState3(null);
+  const [headerMeasurement, setHeaderMeasurement] = useState3({ documentKey, heights: {} });
+  const headerHeights = headerMeasurement.documentKey === documentKey ? headerMeasurement.heights : EMPTY_HEADER_HEIGHTS;
+  const blocks = useMemo4(
+    () => sections.map((section) => ({
+      id: section.id,
+      markdown: section.markdown,
+      variant: section.variant ?? variant,
+      beforeSpace: Math.max(0, section.headerHeight ?? 0, headerHeights[section.id] ?? 0),
+      fragments: section.fragments
+    })),
+    [sections, variant, headerHeights]
+  );
+  const onBlockMetrics = useCallback5(
+    (metrics2) => {
+      if (activeDocumentKey.current !== documentKey) return;
+      setMeasurement((current) => {
+        if (current?.documentKey === documentKey && current.metrics.length === metrics2.length && current.metrics.every(
+          (value, index) => value.id === metrics2[index].id && value.top === metrics2[index].top && value.height === metrics2[index].height && value.left === metrics2[index].left && value.width === metrics2[index].width
+        )) {
+          return current;
+        }
+        return { documentKey, metrics: metrics2 };
+      });
+    },
+    [documentKey]
+  );
+  const metrics = measurement?.documentKey === documentKey ? measurement.metrics : [];
+  const metricsById = new Map(metrics.map((metric) => [metric.id, metric]));
+  return /* @__PURE__ */ jsxs4(View4, { style, children: [
+    /* @__PURE__ */ jsx7(View4, { style: { marginLeft: leadingWidth }, children: /* @__PURE__ */ jsx7(
+      MarkdownBlocksView,
+      {
+        documentKey,
+        blocks,
+        columns,
+        variant,
+        surface: "app",
+        scrollMode: "intrinsic",
+        onBlockMetrics
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      View4,
+      {
+        pointerEvents: "box-none",
+        style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
+        children: sections.map((section) => {
+          const metric = metricsById.get(section.id);
+          if (!metric) return null;
+          return /* @__PURE__ */ jsxs4(React7.Fragment, { children: [
+            section.leading && leadingWidth > 0 ? /* @__PURE__ */ jsx7(
+              View4,
+              {
+                testID: `markdown-leading-${section.id}`,
+                style: {
+                  position: "absolute",
+                  top: metric.top,
+                  left: 0,
+                  width: leadingWidth,
+                  height: metric.height,
+                  justifyContent: "center"
+                },
+                children: section.leading
+              }
+            ) : null,
+            section.header ? /* @__PURE__ */ jsx7(
+              View4,
+              {
+                testID: `markdown-header-${section.id}`,
+                onLayout: (event) => {
+                  const height = Math.ceil(event.nativeEvent.layout.height);
+                  if (!Number.isFinite(height) || height < 0) return;
+                  setHeaderMeasurement((current) => {
+                    const heights = current.documentKey === documentKey ? current.heights : {};
+                    if (heights[section.id] === height) return current;
+                    return { documentKey, heights: { ...heights, [section.id]: height } };
+                  });
+                },
+                style: {
+                  position: "absolute",
+                  top: metric.top,
+                  left: leadingWidth + (metric.left ?? 0),
+                  ...metric.width === void 0 ? { right: 0 } : { width: metric.width },
+                  minHeight: section.headerHeight,
+                  justifyContent: "center"
+                },
+                children: section.header
+              }
+            ) : null
+          ] }, section.id);
+        })
+      }
+    )
+  ] });
+});
+export {
+  AppMarkdown,
+  AppMarkdownSections,
+  MarkdownBlocksView,
+  MarkdownDocumentView,
+  MarkdownView,
+  NotebookPage,
+  NotebookReaderFrame,
+  ReaderHost,
+  cleanupNotebookImportCopy,
+  isRecord,
+  notebookNativeStorage,
+  pickNotebookMarkdownFiles,
+  readNotebookMarkdownImport,
+  useMarkdownTheme
+};
+//# sourceMappingURL=index.js.map