feat(plugins): file panels (#7411)

* fix(files): report document MIME types for binary files File reads now carry the document's MIME type for binary files, so a file panel can hand the bytes to a viewer that needs the real type (application/pdf). * feat(plugins): file panels Plugins contribute file panels with addFilePanel. A file tab hosts the panels that claim the file: the built-in Markdown, HTML and image panels, plugin panels, and Source, Paseo's editor, which claims every text file and is always the last candidate. The panel is the tab body; the bar shows the document's status and a switcher between the file's panels (side by side up to three, two on a phone, a menu beyond that). Paseo asks which panel opens a file only when a plugin panel is among several candidates, once per open, and remembers the answer per extension or exact filename when told to. Open with in the tab menu and the switcher change the tab's panel; Always use remembers it. Opening a file at a line switches the tab to Source. Panels read and write the host's document, so dirty state, autosave and conflicts stay Paseo's. DocumentFrame shows bytes documents such as PDFs in the browser's viewer. Replaces the file tab's Preview/Source mode toggle. * feat(file-panels): choose and forget file panels in Settings > Files Settings > Files lists each extension or filename where a plugin panel competes with another candidate, or that has a remembered panel. Each row chooses the panel that opens it, or Ask every time; Ask again forgets the choice. Source appears as a candidate for text files. Panels no connected host offers can be forgotten but not chosen. * docs(plugins): file panel examples and author reference Adds the pdf-panel and markdown-panel examples, the File panels section of the plugin reference, and an e2e spec that installs both examples, opens a PDF in the browser viewer, and edits Markdown through Paseo's document across the switcher, Source, autosave and conflicts. * feat(file-panels): panels read and write through a file handle The file tab stats the file and mounts its panel without reading it. Every panel, built-in or plugin, gets a PluginFile handle: readText, readBytes, url, version-checked writeText/writeBytes (PluginFileConflictError unless force), and watch. useFileText, useFileBytes and useFileUrl read through it, and Loading joins @getpaseo/plugin/client/ui. Panels own their loading state. The host document pipeline, the explorer preview cache and the preview lifecycle are deleted. The daemon classifies a file version from a bounded sniff and writes base64 content as bytes behind fileByteWrites. A deleted file keeps its panel mounted; a read confirms the deletion first, so a remove-and-rewrite is not reported as one. Native Source decodes with builtins and highlights in idle-time slices, the lines around the opening line first, so a large file no longer blocks the JS thread. * fix(file-panels): Settings offers Source where the picker does, and review follow-ups - Settings > Files offers Source on every key except those a built-in panel of another kind (Image) claims, so a plugin that alone claims a text extension shows the same choices as the picker. - Delete the unused isSourceFilePanel. - The Markdown example warns with the file name when its unmount write fails, rather than dropping the edit silently. - Document that PluginFile stat fields are read at render time and that watch or the read hooks are how a panel learns they changed. * fix(plugins): file events are objects, deletion is a typed error, DocumentFrame owns its fallback - watch listeners receive { type: "changed" } | { type: "deleted" }, so later versions can add fields without breaking them. - PluginFileDeletedError joins PluginFileConflictError. The read hooks report a deleted file with it, and a write over a deleted file rejects with it; Source shows that as the deleted notice. PluginFileConflictError now means only "changed on disk". - DocumentFrame on Android shows Paseo's "<TYPE> files can't be shown on this device" message for documents its WebView cannot display, so the PDF example is useFileUrl + Loading + DocumentFrame with no platform branch. * test(file-panels): Settings offers Source for a remembered panel no host has * test(e2e): hide the developer error toast instead of clicking it away The locator handler that dismissed #error-toast could match a toast that closed before its click, then wait on it until the test timed out (agent-timeline-resume.spec.ts:45 failed every attempt on this branch). Hiding the toast with CSS keeps it off app actions with no race. * test(e2e): desktop browser-tabs hides developer toasts on its attached page
2026-10-23 01:32:40 +00:00 · 2026-10-21 10:49:04 +07:00
parent b36ff056ea
commit e464fd3bd3
149 changed files with 7364 additions and 3767 deletions
@@ -0,0 +1 @@
+node_modules/
@@ -0,0 +1,24 @@
+# Markdown file panel example
+
+Requires Paseo 0.13.0 or later. Install the editor dependencies, then install this directory:
+
+```sh
+cd plugin-examples/markdown-panel
+npm install
+paseo plugin install "$PWD"
+```
+
+Open a `.md` or `.markdown` file in Files. Choose **Rich Markdown — markdown-panel** in the
+picker. Check **Don't ask me again** to remember the choice on this device.
+
+The panel is a CodeMirror editor with Markdown highlighting, line numbers, undo, redo, and line
+wrapping. It reads the file once with `readText`, saves 500 ms after the last edit with
+`writeText`, and reports unsaved edits with `tab.setModified`. When the file changes on disk with
+nothing unsaved, it reads again; with unsaved edits, or when a write rejects with
+`PluginFileConflictError`, it offers **Reload** and **Overwrite**. The bar's switcher still offers
+Paseo's Markdown and Source panels. Native shows selectable, read-only text through `useFileText`.
+
+Paseo bundles the editor dependencies into this plugin. They are loaded only on web; the native
+path uses React Native primitives. DOM integration lives in `client/web.ts`.
+
+See the [file panel reference](https://paseo.sh/docs/plugins/reference#file-panels).
@@ -0,0 +1,176 @@
+import {
+  PluginFileConflictError,
+  PluginFileDeletedError,
+  type PluginFilePanelProps,
+  useFileText,
+} from "@getpaseo/plugin/client";
+import { Loading } from "@getpaseo/plugin/client/ui";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { type MarkdownEditorHandle, mountEditor } from "./web";
+
+const SAVE_DELAY_MS = 500;
+
+type EditorState = "loading" | "ready" | "conflict" | "deleted";
+
+/**
+ * Reads the file once, writes 500 ms after the last edit, and follows the disk while nothing is
+ * unsaved. With unsaved edits, a change on disk is a conflict: Reload or Overwrite.
+ */
+function MarkdownEditor({ file, tab, theme }: PluginFilePanelProps) {
+  const parent = useRef<View>(null);
+  const editor = useRef<MarkdownEditorHandle | null>(null);
+  const text = useRef("");
+  const unsaved = useRef<string | null>(null);
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const [state, setState] = useState<EditorState>("loading");
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      text.current = await file.readText();
+    } catch (cause) {
+      setError(messageOf(cause));
+      return;
+    }
+    unsaved.current = null;
+    tab.setModified(false);
+    editor.current?.setText(text.current);
+    setError(null);
+    setState("ready");
+  }, [file, tab]);
+
+  const save = useCallback(
+    async (force: boolean) => {
+      const next = unsaved.current;
+      if (next === null) return;
+      try {
+        await file.writeText(next, { force });
+      } catch (cause) {
+        if (cause instanceof PluginFileConflictError) setState("conflict");
+        else if (cause instanceof PluginFileDeletedError) setState("deleted");
+        else setError(messageOf(cause));
+        return;
+      }
+      if (unsaved.current === next) {
+        unsaved.current = null;
+        tab.setModified(false);
+      }
+      setError(null);
+      setState("ready");
+    },
+    [file, tab],
+  );
+
+  useLayoutEffect(() => {
+    editor.current = mountEditor(parent.current, text.current, theme, (next) => {
+      text.current = next;
+      unsaved.current = next;
+      tab.setModified(true);
+      clearTimeout(saveTimer.current);
+      saveTimer.current = setTimeout(() => void save(false), SAVE_DELAY_MS);
+    });
+    return () => {
+      editor.current?.destroy();
+      editor.current = null;
+    };
+  }, [save, tab, theme]);
+
+  useEffect(() => {
+    void load();
+    const unwatch = file.watch((event) => {
+      if (event.type === "deleted") setState("deleted");
+      else if (unsaved.current === null) void load();
+      else setState("conflict");
+    });
+    return () => {
+      unwatch();
+      clearTimeout(saveTimer.current);
+      // Switching panels keeps the edit. Closing the tab asks first and drops it if discarded.
+      // The panel is gone, so a failed write (a conflict, a lost connection) can only be reported.
+      if (unsaved.current !== null) {
+        void file.writeText(unsaved.current).catch((cause) => {
+          console.warn(`Unsaved edits to ${file.name} were not written: ${messageOf(cause)}`);
+        });
+      }
+    };
+  }, [file, load]);
+
+  const styles = useMemo(
+    () => ({
+      panel: { flex: 1, minHeight: 0, backgroundColor: theme.colors.surface0 },
+      editor: { flex: 1, minHeight: 0 },
+      banner: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        backgroundColor: theme.colors.surface1,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.border,
+      },
+      bannerText: { flex: 1, color: theme.colors.foreground },
+      error: { color: theme.colors.statusDanger, paddingHorizontal: 16, paddingVertical: 8 },
+      action: { color: theme.colors.accent },
+    }),
+    [theme],
+  );
+  const overwrite = useCallback(() => void save(true), [save]);
+  const reload = useCallback(() => void load(), [load]);
+
+  return (
+    <View style={styles.panel}>
+      {state === "conflict" ? (
+        <View style={styles.banner} testID="rich-markdown-conflict">
+          <Text style={styles.bannerText}>The file changed on disk.</Text>
+          <Pressable accessibilityRole="button" onPress={reload}>
+            <Text style={styles.action}>Reload</Text>
+          </Pressable>
+          <Pressable accessibilityRole="button" onPress={overwrite}>
+            <Text style={styles.action}>Overwrite</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      {state === "deleted" ? (
+        <View style={styles.banner}>
+          <Text style={styles.bannerText}>The file was deleted. Edits are kept here.</Text>
+        </View>
+      ) : null}
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      <View ref={parent} style={styles.editor} />
+      {state === "loading" && !error ? <Loading /> : null}
+    </View>
+  );
+}
+
+/** Native has no editor: selectable, read-only text that follows the disk. */
+function MarkdownText({ file, theme }: PluginFilePanelProps) {
+  const text = useFileText(file);
+  const styles = useMemo(
+    () => ({
+      screen: { flex: 1, backgroundColor: theme.colors.surface0 },
+      text: { color: theme.colors.foreground, padding: 16 },
+      error: { color: theme.colors.statusDanger, padding: 16 },
+    }),
+    [theme],
+  );
+  if (text.status === "loading") return <Loading />;
+  if (text.status === "error") return <Text style={styles.error}>{text.error.message}</Text>;
+  return (
+    <ScrollView style={styles.screen}>
+      <Text selectable style={styles.text}>
+        {text.text}
+      </Text>
+    </ScrollView>
+  );
+}
+
+export function RichMarkdownPanel(props: PluginFilePanelProps) {
+  if (props.layout.platform === "web") return <MarkdownEditor {...props} />;
+  return <MarkdownText {...props} />;
+}
+
+function messageOf(cause: unknown): string {
+  return cause instanceof Error ? cause.message : String(cause);
+}
@@ -0,0 +1,75 @@
+import type { PluginFilePanelProps } from "@getpaseo/plugin/client";
+import type { EditorView, EditorViewConfig } from "@codemirror/view";
+import { Platform } from "react-native";
+
+export interface MarkdownEditorHandle {
+  /** Replaces the editor's text without reporting it as an edit. */
+  setText(text: string): void;
+  destroy(): void;
+}
+
+/** DOM code stays here; native never evaluates the editor dependencies. */
+export function mountEditor(
+  parent: unknown,
+  text: string,
+  theme: PluginFilePanelProps["theme"],
+  onChange: (text: string) => void,
+): MarkdownEditorHandle | null {
+  if (Platform.OS !== "web" || !parent) return null;
+  const { EditorState } = require("@codemirror/state") as typeof import("@codemirror/state");
+  const { EditorView, keymap, lineNumbers } =
+    require("@codemirror/view") as typeof import("@codemirror/view");
+  const { defaultKeymap, history, historyKeymap } =
+    require("@codemirror/commands") as typeof import("@codemirror/commands");
+  const { markdown } =
+    require("@codemirror/lang-markdown") as typeof import("@codemirror/lang-markdown");
+  const { syntaxHighlighting, defaultHighlightStyle } =
+    require("@codemirror/language") as typeof import("@codemirror/language");
+  let applyingHostText = false;
+  const view: EditorView = new EditorView({
+    parent: parent as EditorViewConfig["parent"],
+    state: EditorState.create({
+      doc: text,
+      extensions: [
+        markdown(),
+        syntaxHighlighting(defaultHighlightStyle),
+        lineNumbers(),
+        history(),
+        keymap.of([...defaultKeymap, ...historyKeymap]),
+        EditorView.lineWrapping,
+        EditorView.contentAttributes.of({ "aria-label": "Rich Markdown editor" }),
+        EditorView.theme({
+          "&": {
+            height: "100%",
+            color: theme.colors.foreground,
+            backgroundColor: theme.colors.surface0,
+          },
+          ".cm-scroller": { overflow: "auto" },
+          ".cm-content": { padding: "16px", caretColor: theme.colors.foreground },
+          ".cm-gutters": {
+            backgroundColor: theme.colors.surface0,
+            color: theme.colors.foregroundMuted,
+            border: "none",
+          },
+        }),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && !applyingHostText) onChange(update.state.doc.toString());
+        }),
+      ],
+    }),
+  });
+  return {
+    setText(next) {
+      if (view.state.doc.toString() === next) return;
+      applyingHostText = true;
+      try {
+        view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: next } });
+      } finally {
+        applyingHostText = false;
+      }
+    },
+    destroy() {
+      view.destroy();
+    },
+  };
+}
@@ -0,0 +1,13 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { RichMarkdownPanel } from "./client/rich-markdown";
+
+export default function contribute(client: PluginClientContext) {
+  client.addFilePanel({
+    id: "rich-markdown",
+    title: "Rich Markdown",
+    icon: "FileType",
+    files: { extensions: ["md", "markdown"] },
+    Component: RichMarkdownPanel,
+  });
+  return () => {};
+}
@@ -0,0 +1,3 @@
+export default function contribute() {
+  return () => {};
+}
@@ -0,0 +1,247 @@
+{
+  "name": "@getpaseo/plugin-example-markdown-panel",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@getpaseo/plugin-example-markdown-panel",
+      "version": "0.1.0",
+      "dependencies": {
+        "@codemirror/commands": "^6.10.0",
+        "@codemirror/lang-markdown": "^6.3.0",
+        "@codemirror/language": "^6.12.0",
+        "@codemirror/state": "^6.5.0",
+        "@codemirror/view": "^6.43.0"
+      }
+    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
+      "integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.11.1.tgz",
+      "integrity": "sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.7.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.12",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.12.tgz",
+      "integrity": "sha512-pw2ReWKUqSkbvh76RAT4NYxiogRu+PWkR2ukAwO9uOgrm8uipkzjtKKtNpyeAQwHOqxEeSvAXZ6vr3AfyB9y/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.12"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+      "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.2.tgz",
+      "integrity": "sha512-AwBOdkWYuA//WcM0xO5PfHPUcmz/O2i5o0Nsg1U69SII/loCJlFI1Romd9xp2HYb1kYJRGZotyqRghuHH5n8Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.13.1.tgz",
+      "integrity": "sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/streamparser": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
+      "integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.42.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.7.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.6.tgz",
+      "integrity": "sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/streamparser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/streamparser/-/streamparser-6.0.0.tgz",
+      "integrity": "sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w==",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.43.14",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.14.tgz",
+      "integrity": "sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.7.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.3.tgz",
+      "integrity": "sha512-H0iErY4e43LpXbYDyBci5W4v/RwTgGV3YzYOlJPiGZ8RY8w51kVE+xLn1tg3Z6UmSfyETvtsUK3r7YsgDQEI7Q==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.9.tgz",
+      "integrity": "sha512-ZmzgvTOBdJWGIsY/ItAfN7UW8DV802oZG+jeG6E508SwEzz5YhuAajptpWPICvIyqYAD2+VjMdOS40GgGkyEOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.5.tgz",
+      "integrity": "sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
+      "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.6.tgz",
+      "integrity": "sha512-sEvOqpl4vJQca0NugSQK02vQPbc5KrvoojnYGoqqFgFO0MtcYhwGiHKVEB+LuXYJnfyXo4QPA8ztbrEa4Fw5NA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.11",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.11.tgz",
+      "integrity": "sha512-UwgZcl1R66H2hDzBrA7kWyYmX6s8p5TQ+e/t7CuvgCtBEPxbEPaHYHu+pJBvTvDotEJpuQkJjbXuHiw5Cixxgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.8.0.tgz",
+      "integrity": "sha512-X6w3A2NpyhdtGqTWRJB8gR4QDXBaFMbTOs780ZdZ15KKCfBXOQTKcB3Vr+W6tqJHVlealt53tLmHRvOqPTQgYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.4.tgz",
+      "integrity": "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==",
+      "license": "MIT"
+    },
+    "node_modules/crelt": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
+      "integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
+      "license": "MIT"
+    },
+    "node_modules/style-mod": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.4.tgz",
+      "integrity": "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw==",
+      "license": "MIT"
+    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    }
+  }
+}
@@ -0,0 +1,13 @@
+{
+  "name": "@getpaseo/plugin-example-markdown-panel",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@codemirror/commands": "^6.10.0",
+    "@codemirror/lang-markdown": "^6.3.0",
+    "@codemirror/language": "^6.12.0",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.43.0"
+  }
+}
@@ -0,0 +1,6 @@
+{
+  "id": "markdown-panel",
+  "requirements": {
+    "paseo": ">=0.13.0"
+  }
+}
@@ -0,0 +1,13 @@
+# PDF file panel example
+
+Requires Paseo 0.13.0 or later. Install this directory with
+`paseo plugin install /absolute/path/to/plugin-examples/pdf-panel`, then open a `.pdf` in Files.
+
+The panel resolves the file's local URL with `useFileUrl`, shows `Loading` until it does, and passes
+it to `DocumentFrame`. Where a platform cannot show a PDF inline (Android), `DocumentFrame` says so.
+The plugin does not construct daemon URLs.
+
+See the [file panel reference](https://paseo.sh/docs/plugins/reference#file-panels).
+
+Inline PDF rendering needs a daemon from Paseo 0.13.0 or later; see the
+[DocumentFrame reference](https://paseo.sh/docs/plugins/reference#documentframe).
@@ -0,0 +1,25 @@
+import { type PluginFilePanelProps, useFileUrl } from "@getpaseo/plugin/client";
+import { DocumentFrame, Loading } from "@getpaseo/plugin/client/ui";
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+
+const messageStyle = {
+  flex: 1,
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 24,
+} as const;
+
+export function PdfPanel({ file, theme }: PluginFilePanelProps) {
+  const url = useFileUrl(file);
+  const textStyle = useMemo(() => ({ color: theme.colors.statusDanger }), [theme]);
+  if (url.status === "loading") return <Loading />;
+  if (url.status === "error") {
+    return (
+      <View style={messageStyle}>
+        <Text style={textStyle}>{url.error.message}</Text>
+      </View>
+    );
+  }
+  return <DocumentFrame url={url.url} testID="pdf-panel" />;
+}
@@ -0,0 +1,13 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { PdfPanel } from "./client/pdf-panel";
+
+export default function contribute(client: PluginClientContext) {
+  client.addFilePanel({
+    id: "pdf",
+    title: "PDF",
+    icon: "FileText",
+    files: { extensions: ["pdf"] },
+    Component: PdfPanel,
+  });
+  return () => {};
+}
@@ -0,0 +1,3 @@
+export default function contribute() {
+  return () => {};
+}
@@ -0,0 +1,6 @@
+{
+  "id": "pdf-panel",
+  "requirements": {
+    "paseo": ">=0.13.0"
+  }
+}