@particle-academy/fancy-code 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -14,6 +14,40 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.15.0] - 2026-10-19
+
+### Added
+
+- **Office files open in the kit's own viewers.** `registerOfficeViewer(kind,
+  View, { read })` wires a viewer for `pptx`, `xlsx` or `docx` into
+  `FileViewer`, one line per format at app start:
+
+  ```ts
+  registerOfficeViewer("pptx", DeckFileView, { read: (b) => new PptxReader().read(b) });
+  ```
+
+  `DeckFileView` ships in fancy-slides and `WorkbookFileView` in fancy-sheets.
+  The viewer gets the file's contents in this order: the new `document` prop,
+  the contents the app's server already read (preferred); else the file at
+  `src`, read in the browser by the registered `read`; else the download card
+  as before. A file the reader cannot open shows the reason beside the
+  download. A registry rather than an import so fancy-code never depends on the
+  slide or sheet packages, and an app with neither cannot fail to build on them.
+  **Nothing to do** unless you want Office previews: unregistered formats behave
+  exactly as in 0.14.
+
+## [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

package/dist/index.cjs

@@ -1721,6 +1721,18 @@ function MarkdownEditor({
   );
 }
 MarkdownEditor.displayName = "MarkdownEditor";
+
+// src/office-viewers.ts
+var registry = /* @__PURE__ */ new Map();
+function registerOfficeViewer(kind, View, options = {}) {
+  registry.set(kind, { View, read: options.read });
+}
+function officeViewerFor(kind) {
+  return registry.get(kind);
+}
+function clearOfficeViewers() {
+  registry.clear();
+}
 var OFFICE_EXT = { docx: "docx", xlsx: "xlsx", xlsm: "xlsx", pptx: "pptx" };
 var OFFICE_MIME = {
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
@@ -1780,6 +1792,7 @@ function FileViewer({
   mediaProps,
   view = "rendered",
   frameProps,
+  document,
   className,
   style
 }) {
@@ -1812,12 +1825,24 @@ function FileViewer({
         "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" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          OfficeFile,
+          {
+            kind: resolved.officeKind,
+            document,
+            src,
+            mime,
+            filename,
+            frameProps
+          }
+        )
       }
     );
   }
   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",
@@ -1870,6 +1895,57 @@ function FileViewer({
   );
 }
 FileViewer.displayName = "FileViewer";
+function OfficeFile({
+  kind,
+  document,
+  src,
+  mime,
+  filename,
+  frameProps
+}) {
+  const registration = officeViewerFor(kind);
+  const read = registration?.read;
+  const [state, setState] = react.useState({ status: "idle" });
+  react.useEffect(() => {
+    if (!registration || document !== void 0 || !src || !read) return;
+    let live = true;
+    setState({ status: "reading" });
+    fetch(src).then(async (response) => {
+      if (!response.ok) throw new Error(`The file could not be fetched (${response.status}).`);
+      const bytes = new Uint8Array(await response.arrayBuffer());
+      const doc = read(bytes);
+      if (live) setState({ status: "read", document: doc });
+    }).catch((error) => {
+      if (live) setState({ status: "failed", message: error instanceof Error ? error.message : String(error) });
+    });
+    return () => {
+      live = false;
+    };
+  }, [registration, document, src, read]);
+  const fallback = /* @__PURE__ */ jsxRuntime.jsx(reactFancy.MediaViewer, { src: src ?? "", mime, alt: filename, className: "h-full w-full" });
+  if (!registration) return fallback;
+  const View = registration.View;
+  if (document !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(View, { document, filename, frameProps });
+  if (state.status === "read") return /* @__PURE__ */ jsxRuntime.jsx(View, { document: state.document, filename, frameProps });
+  if (state.status === "reading") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-center p-6 text-sm text-zinc-500", children: [
+      "Opening ",
+      filename ?? "the file",
+      "\u2026"
+    ] });
+  }
+  if (state.status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col gap-2 p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Callout, { color: "red", children: [
+        filename ?? "This file",
+        " could not be opened: ",
+        state.message
+      ] }),
+      fallback
+    ] });
+  }
+  return fallback;
+}
 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("");
@@ -2009,6 +2085,7 @@ exports.CodeEditor = CodeEditor;
 exports.CodeEditorInputTag = CodeEditorInputTag;
 exports.FileViewer = FileViewer;
 exports.MarkdownEditor = MarkdownEditor;
+exports.clearOfficeViewers = clearOfficeViewers;
 exports.diffMarkColor = diffMarkColor;
 exports.diffRemovedColor = diffRemovedColor;
 exports.getLanguage = getLanguage;
@@ -2017,7 +2094,9 @@ exports.getRegisteredThemes = getRegisteredThemes;
 exports.getTheme = getTheme;
 exports.gutterDiffMark = gutterDiffMark;
 exports.hasDeletedAtEnd = hasDeletedAtEnd;
+exports.officeViewerFor = officeViewerFor;
 exports.registerLanguage = registerLanguage;
+exports.registerOfficeViewer = registerOfficeViewer;
 exports.registerTheme = registerTheme;
 exports.renderMarkdown = renderMarkdown;
 exports.resolveFileKind = resolveFileKind;