@particle-academy/fancy-code 0.12.1 → 0.14.0

package/CHANGELOG.md

@@ -14,6 +14,49 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.14.0] - 2026-10-19
+
+### Changed
+
+- **Images and PDFs in `FileViewer` sit in the `FauxClient` frame**, like
+  documents: an image gets the frame's zoom bar (driving its own pan/zoom) and
+  full screen; a PDF gets full screen, with zoom left to the browser's PDF
+  toolbar, and its file name in the address bar. Revealed on hover.
+  **What to do:** nothing to keep the new look. To turn it off, pass
+  `mediaProps={{ imageProps: { frame: false } }}` (or `pdfProps`).
+- **Requires react-fancy 5.49.0 or later** (peer `>=5.49.0 <6.0.0`).
+
+## [0.13.0] - 2026-10-19
+
+### Added
+
+- **Documents render as a reader sees them.** `FileViewer` shows Markdown, HTML
+  and plain text through react-fancy's `ContentRenderer`, sanitised (a file is
+  untrusted), in the `FauxClient` frame every file viewer now carries: zoom and
+  full screen, revealed on hover. Plain text keeps its paragraphs and line
+  breaks and is escaped, so `*x*` stays asterisks. `view="source"` shows the
+  source in the code editor instead, as do editing (`readOnly={false}`) and
+  landing on a `line`. `frameProps` reaches the frame.
+- **Office files are recognised.** `.docx`, `.xlsx` and `.pptx` (by extension
+  or MIME type) resolve to `{ kind: "office", officeKind }`. They show
+  MediaViewer's no-preview card with a download until their viewers are wired
+  in. They used to be handed to the code editor as text.
+
+### Changed
+
+- **BREAKING:** a `.md`, `.html` or `.txt` file in `FileViewer` is rendered,
+  not shown as source. **What to do:** to keep the source, pass
+  `view="source"`. A viewer that lands on a `line` (a link into a file) already
+  shows the source, so file links need nothing.
+- **BREAKING (types):** `FileKind` gains `{ kind: "document"; format; language }`
+  and `{ kind: "office"; officeKind }`. **What to do:** only if you `switch` on
+  `resolveFileKind(...).kind` exhaustively: add the two cases, or a `default`.
+  `notes.txt` now resolves to `document`, not `text`.
+- The extension decides over a generic MIME type: a host that serves `app.ts`
+  as `text/plain` still gets the code editor.
+- **Requires react-fancy 5.48.1 or later** (peer `>=5.48.1 <6.0.0`, was
+  `>=4.9.0`), for the frame and for the sanitiser that strips `<title>`.
+
 ## [0.12.1] - 2026-10-18
 
 ### Security

package/dist/index.cjs

@@ -1721,10 +1721,45 @@ function MarkdownEditor({
   );
 }
 MarkdownEditor.displayName = "MarkdownEditor";
+var OFFICE_EXT = { docx: "docx", xlsx: "xlsx", xlsm: "xlsx", pptx: "pptx" };
+var OFFICE_MIME = {
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx"
+};
+var DOCUMENT_EXT = {
+  md: "markdown",
+  markdown: "markdown",
+  html: "html",
+  htm: "html",
+  txt: "text",
+  text: "text"
+};
+var DOCUMENT_MIME = {
+  "text/markdown": "markdown",
+  "text/x-markdown": "markdown",
+  "text/html": "html",
+  "text/plain": "text"
+};
+function extensionOf(filename) {
+  const name = (filename ?? "").split(/[?#]/)[0].split("/").pop() ?? "";
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
+}
 function resolveFileKind({ filename, mime }) {
   const media = reactFancy.resolveMediaType({ mime, src: filename });
   if (media !== "unknown") return { kind: "media", mediaKind: media };
-  return { kind: "text", language: fancyFileCommons.languageFromFilename(filename) };
+  const type = (mime ?? "").split(";")[0].trim().toLowerCase();
+  const ext = extensionOf(filename);
+  const office = OFFICE_MIME[type] ?? OFFICE_EXT[ext];
+  if (office) return { kind: "office", officeKind: office };
+  const language = fancyFileCommons.languageFromFilename(filename);
+  const format = DOCUMENT_EXT[ext] ?? (language === "plaintext" ? DOCUMENT_MIME[type] : void 0);
+  if (format) {
+    const lang = language !== "plaintext" ? language : format === "markdown" ? "markdown" : format === "html" ? "html" : "plaintext";
+    return { kind: "document", format, language: lang };
+  }
+  return { kind: "text", language };
 }
 function FileViewer({
   filename,
@@ -1743,12 +1778,48 @@ function FileViewer({
   minHeight,
   maxHeight,
   mediaProps,
+  view = "rendered",
+  frameProps,
   className,
   style
 }) {
   const resolved = fileKind ?? resolveFileKind({ filename, mime });
+  if (resolved.kind === "document" && view === "rendered" && readOnly && line == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "document",
+        "data-format": resolved.format,
+        className,
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.FauxClient, { variant: "device", controls: true, fill: true, bodyClassName: "overflow-auto", ...frameProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactFancy.ContentRenderer,
+          {
+            value: resolved.format === "text" ? textToHtml(value) : value,
+            format: resolved.format === "markdown" ? "markdown" : "html"
+          }
+        ) }) })
+      }
+    );
+  }
+  if (resolved.kind === "office") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "office",
+        "data-office-kind": resolved.officeKind,
+        className: reactFancy.cn("overflow-hidden", className),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.MediaViewer, { src: src ?? "", mime, alt: filename, className: "h-full w-full" })
+      }
+    );
+  }
   if (resolved.kind === "media") {
     const { className: mediaClassName, ...restMediaProps } = mediaProps ?? {};
+    restMediaProps.imageProps = { frame: true, frameProps, ...restMediaProps.imageProps };
+    restMediaProps.pdfProps = { frame: true, frameProps, ...restMediaProps.pdfProps };
     const fill = resolved.mediaKind !== "audio";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1801,6 +1872,10 @@ function FileViewer({
   );
 }
 FileViewer.displayName = "FileViewer";
+var ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+function textToHtml(text) {
+  return text.replace(/\r\n?/g, "\n").split(/\n{2,}/).filter((block) => block.trim() !== "").map((block) => `<p>${block.replace(/[&<>"']/g, (c) => ESCAPES[c]).replace(/\n/g, "<br>")}</p>`).join("");
+}
 
 // src/engine/markdown-render.ts
 function escapeHtml(s) {