@k2b/ui 0.2.0 → 0.4.0

package/dist/ssr/content/FileView.js

@@ -7,21 +7,25 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-content-file-view__action\"",
   _tmpl$3 = ["<div class=\"k2b-content-file-view__overlay\">", "</div>"],
   _tmpl$4 = ["<div class=\"k2b-content-file-view__panel\"><div class=\"k2b-content-file-view__preview\">", "</div>", "</div>"],
   _tmpl$5 = ["<button type=\"button\" class=\"k2b-markdown-editor__tool\"", " tabindex=\"-1\"", "><i", "></i></button>"],
-  _tmpl$6 = ["<div class=\"k2b-content-file-view__document\">", "</div>"],
-  _tmpl$7 = ["<div class=\"k2b-content-file-view__editor\">", "</div>"],
-  _tmpl$8 = ["<div class=\"k2b-content-file-view__editor\"><div class=\"k2b-markdown-editor\" data-fill=\"true\" role=\"group\"", "><div class=\"k2b-markdown-editor__toolbar k2b-content-file-view__code-toolbar\"><span class=\"k2b-content-file-view__code-language\">", "</span><span class=\"k2b-markdown-editor__trailing\">", "", "</span></div><div class=\"k2b-markdown-editor__surface\"><textarea class=\"k2b-content-file-view__code-input\"", " spellcheck=\"false\"></textarea></div></div></div>"],
-  _tmpl$9 = ["<a class=\"k2b-markdown-editor__tool\"", "><i class=\"ti ti-download\"></i></a>"],
-  _tmpl$0 = ["<p class=\"k2b-content-file-view__truncated\">", "</p>"],
-  _tmpl$1 = ["<div class=\"k2b-content-file-view__sheet\"><table class=\"k2b-content-file-view__table\"><thead><tr>", "</tr></thead><tbody>", "</tbody></table>", "</div>"],
-  _tmpl$10 = ["<th scope=\"col\"><span>", "</span></th>"],
-  _tmpl$11 = ["<tr>", "</tr>"],
-  _tmpl$12 = ["<td>", "</td>"],
-  _tmpl$13 = ["<div class=\"k2b-content-file-view__media\"><img", "></div>"],
-  _tmpl$14 = ["<object", " type=\"application/pdf\" class=\"k2b-content-file-view__pdf\"", "></object>"],
-  _tmpl$15 = ["<div class=\"k2b-content-file-view__media\" data-kind=\"audio\"><audio controls preload=\"metadata\"", ">", "</audio></div>"],
-  _tmpl$16 = ["<div class=\"k2b-content-file-view__media\" data-kind=\"video\"><video controls preload=\"metadata\" playsinline", ">", "</video></div>"],
-  _tmpl$17 = ["<a class=\"k2b-button\" data-variant=\"secondary\" data-size=\"sm\"", " download><i class=\"ti ti-download\" aria-hidden=\"true\"></i>", "</a>"],
-  _tmpl$18 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$6 = ["<div class=\"k2b-content-file-view__truncated\">", "</div>"],
+  _tmpl$7 = ["<span>", "</span>"],
+  _tmpl$8 = ["<div class=\"", "\">", "</div>"],
+  _tmpl$9 = ["<div class=\"k2b-content-file-view__document\">", "</div>"],
+  _tmpl$0 = ["<div class=\"k2b-content-file-view__editor\">", "</div>"],
+  _tmpl$1 = ["<div class=\"k2b-content-file-view__editor\"><div class=\"k2b-markdown-editor\" data-fill=\"true\" role=\"group\"", "><div class=\"k2b-markdown-editor__toolbar k2b-content-file-view__code-toolbar\"><span class=\"k2b-content-file-view__code-language\">", "</span><span class=\"k2b-markdown-editor__trailing\">", "", "</span></div><div class=\"k2b-markdown-editor__surface\"><textarea class=\"k2b-content-file-view__code-input\"", " spellcheck=\"false\"></textarea></div></div></div>"],
+  _tmpl$10 = ["<a class=\"k2b-markdown-editor__tool\"", "><i class=\"ti ti-download\"></i></a>"],
+  _tmpl$11 = ["<div class=\"k2b-content-file-view__settings\">", "", "", "</div>"],
+  _tmpl$12 = ["<div class=\"k2b-content-file-view__sheet\"><table class=\"k2b-content-file-view__table\"><thead><tr>", "</tr></thead><tbody>", "</tbody></table>", "", "</div>"],
+  _tmpl$13 = ["<th scope=\"col\"><span>", "</span></th>"],
+  _tmpl$14 = ["<tr>", "</tr>"],
+  _tmpl$15 = ["<td>", "</td>"],
+  _tmpl$16 = ["<div class=\"k2b-content-file-view__pagination\">", "<span>", "\u2013", " / ", "</span>", "</div>"],
+  _tmpl$17 = ["<div class=\"k2b-content-file-view__media\"><img", "></div>"],
+  _tmpl$18 = ["<object", " type=\"application/pdf\" class=\"k2b-content-file-view__pdf\"", "></object>"],
+  _tmpl$19 = ["<div class=\"k2b-content-file-view__media\" data-kind=\"audio\"><audio", " controls preload=\"metadata\"", ">", "</audio></div>"],
+  _tmpl$20 = ["<div class=\"k2b-content-file-view__media\" data-kind=\"video\"><video", " controls preload=\"metadata\" playsinline", ">", "</video></div>"],
+  _tmpl$21 = ["<a class=\"k2b-button\" data-variant=\"secondary\" data-size=\"sm\"", " download><i class=\"ti ti-download\" aria-hidden=\"true\"></i>", "</a>"],
+  _tmpl$22 = ["<div class=\"", "\"", ">", "</div>"];
 /**
  * FileView — renders one file through a small renderer registry keyed by
  * media type / path. Editing is enabled purely by the presence of `save`;
@@ -33,12 +37,16 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-content-file-view__action\"",
  */
 
 import { mutation } from "@k2b/stdlib/solid";
-import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch, untrack } from "solid-js";
+import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, onMount, Show, Switch, untrack } from "solid-js";
+import { Button } from "../actions/Button";
+import { prompts } from "../feedback/prompts";
 import { toast } from "../feedback/toast";
 import { MarkdownEditor } from "../inputs/markdown/MarkdownEditor";
+import { Select } from "../inputs/Select";
 import { useUiMessages } from "../intl/messages";
 import Placeholder from "../surfaces/Placeholder";
 import CodeDisplay from "./CodeDisplay";
+import { decodeDelimitedContent, readDelimitedPreferences } from "./delimited-preferences";
 import { fileViewExtension, getFileViewPreviewKind, parseDelimitedText } from "./file-view-preview";
 import MarkdownView from "./MarkdownView";
 import StructuredDataPreview from "./StructuredDataPreview";
@@ -116,6 +124,73 @@ function EditorToolButton(props) {
 
 // ── Built-in renderers ──────────────────────────────────────────────────────
 
+function MoreLines(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.count > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.onClick;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$7, _$escape(messages().previewMoreLines(props.count)));
+        },
+        get children() {
+          return _$createComponent(Button, {
+            size: "sm",
+            variant: "ghost",
+            get onClick() {
+              return props.onClick;
+            },
+            get children() {
+              return messages().previewMoreLines(props.count);
+            }
+          });
+        }
+      })));
+    }
+  });
+}
+function TextExcerpt(props) {
+  const lines = createMemo(() => props.text.replace(/\r\n?/g, "\n").replace(/\n$/, "").split("\n"));
+  const limit = () => props.renderer.previewLines === undefined ? lines().length : Math.max(1, props.renderer.previewLines);
+  const text = () => lines().slice(0, limit()).join("\n");
+  return [_$ssr(_tmpl$8, props.renderer.previewLines !== undefined ? "k2b-content-file-view__excerpt" : "", _$escape(_$createComponent(Show, {
+    get when() {
+      return props.markdown;
+    },
+    get fallback() {
+      return _$createComponent(CodeDisplay, {
+        get code() {
+          return text();
+        },
+        get language() {
+          return codeLanguage(props.renderer.file.path);
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(MarkdownView, {
+        get markdown() {
+          return text();
+        },
+        get headingScale() {
+          return props.renderer.headingScale ?? "compact";
+        }
+      });
+    }
+  }))), _$createComponent(MoreLines, {
+    get count() {
+      return lines().length - limit();
+    },
+    get onClick() {
+      return props.renderer.onExpandPreview;
+    }
+  })];
+}
 function MarkdownRenderer(props) {
   const messages = useUiMessages();
   const [editing, setEditing] = createSignal(false);
@@ -142,18 +217,19 @@ function MarkdownRenderer(props) {
           }), _$createComponent(DownloadAction, props)];
         },
         get children() {
-          return _$ssr(_tmpl$6, _$escape(_$createComponent(MarkdownView, {
-            get markdown() {
+          return _$ssr(_tmpl$9, _$escape(_$createComponent(TextExcerpt, {
+            renderer: props,
+            get text() {
               return stripFrontmatter(props.editor?.draft() ?? props.content.content);
             },
-            headingScale: "compact"
+            markdown: true
           })));
         }
       });
     },
     children: _ => {
       const editor = props.editor;
-      return _$ssr(_tmpl$7, _$escape(_$createComponent(MarkdownEditor, {
+      return _$ssr(_tmpl$0, _$escape(_$createComponent(MarkdownEditor, {
         "class": "k2b-content-file-view__markdown-field",
         get ["aria-label"]() {
           return `Edit ${props.file.path.slice(props.file.path.lastIndexOf("/") + 1)}`;
@@ -198,12 +274,10 @@ function TextRenderer(props) {
           return _$createComponent(DownloadAction, props);
         },
         get children() {
-          return _$createComponent(CodeDisplay, {
-            get code() {
+          return _$createComponent(TextExcerpt, {
+            renderer: props,
+            get text() {
               return props.content.content;
-            },
-            get language() {
-              return codeLanguage(props.file.path);
             }
           });
         }
@@ -211,11 +285,11 @@ function TextRenderer(props) {
     },
     children: editor => // Same chrome as the markdown editor — literally the same classes, so
     // border, radius, focus ring, toolbar height and text metrics cannot drift.
-    _$ssr(_tmpl$8, _$ssrAttribute("aria-label", _$escape(messages().textEditor, true), false), _$escape(codeLanguage(props.file.path)), _$escape(_$createComponent(Show, {
+    _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(messages().textEditor, true), false), _$escape(codeLanguage(props.file.path)), _$escape(_$createComponent(Show, {
       get when() {
         return props.downloadHref;
       },
-      children: href => _$ssr(_tmpl$9, _$ssrAttribute("href", _$escape(href(), true), false) + _$ssrAttribute("download", _$escape(props.file.path.slice(props.file.path.lastIndexOf("/") + 1), true), false) + _$ssrAttribute("title", _$escape(messages().download, true), false) + _$ssrAttribute("aria-label", _$escape(messages().download, true), false))
+      children: href => _$ssr(_tmpl$10, _$ssrAttribute("href", _$escape(href(), true), false) + _$ssrAttribute("download", _$escape(props.file.path.slice(props.file.path.lastIndexOf("/") + 1), true), false) + _$ssrAttribute("title", _$escape(messages().download, true), false) + _$ssrAttribute("aria-label", _$escape(messages().download, true), false))
     })), _$escape(_$createComponent(EditorToolButton, {
       get icon() {
         return editor().saving() ? "ti ti-loader-2 k2b-spin" : "ti ti-device-floppy";
@@ -252,24 +326,39 @@ function JsonRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      return _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$9, _$escape(_$createComponent(Show, {
         get when() {
           return parsed().ok;
         },
         get fallback() {
-          return _$createComponent(CodeDisplay, {
-            get code() {
+          return _$createComponent(TextExcerpt, {
+            renderer: props,
+            get text() {
               return props.content.content;
-            },
-            language: "text"
+            }
           });
         },
         get children() {
-          return _$createComponent(StructuredDataPreview, {
-            get data() {
-              return parsedValue();
+          return _$createComponent(Show, {
+            get when() {
+              return props.previewLines === undefined;
+            },
+            get fallback() {
+              return _$createComponent(TextExcerpt, {
+                renderer: props,
+                get text() {
+                  return JSON.stringify(parsedValue(), null, 2);
+                }
+              });
             },
-            maxRows: 200
+            get children() {
+              return _$createComponent(StructuredDataPreview, {
+                get data() {
+                  return parsedValue();
+                },
+                maxRows: 200
+              });
+            }
           });
         }
       })));
@@ -278,56 +367,230 @@ function JsonRenderer(props) {
 }
 function DelimitedTextRenderer(props) {
   const messages = useUiMessages();
-  const delimiter = () => fileViewExtension(props.file.path) === "tsv" || props.content.mediaType === "text/tab-separated-values" ? "\t" : ",";
-  const preview = createMemo(() => parseDelimitedText(props.content.content, delimiter()));
+  const [preferences, setPreferences] = createSignal({
+    encoding: "utf-8",
+    delimiter: "auto",
+    view: "table"
+  });
+  onMount(() => {
+    if (!props.previewPreferencesKey) return;
+    try {
+      setPreferences(readDelimitedPreferences(localStorage.getItem(props.previewPreferencesKey)));
+    } catch {
+      /* Storage may be disabled. */
+    }
+  });
+  const update = patch => {
+    const next = {
+      ...preferences(),
+      ...patch
+    };
+    setPreferences(next);
+    if (props.previewPreferencesKey) {
+      try {
+        localStorage.setItem(props.previewPreferencesKey, JSON.stringify(next));
+      } catch {
+        /* Keep the local selection. */
+      }
+    }
+  };
+  const text = createMemo(() => decodeDelimitedContent(props.content, preferences().encoding));
+  const delimiter = () => preferences().delimiter === "auto" ? fileViewExtension(props.file.path) === "tsv" || props.content.mediaType === "text/tab-separated-values" ? "\t" : "," : preferences().delimiter;
+  const [page, setPage] = createSignal(0);
+  createEffect(() => {
+    text();
+    delimiter();
+    props.previewLines;
+    setPage(0);
+  });
+  const pageSize = () => props.previewLines === undefined ? 200 : Math.max(1, props.previewLines);
+  const preview = createMemo(() => parseDelimitedText(text(), delimiter(), {
+    rows: pageSize() + 1,
+    offset: page() * pageSize()
+  }));
+  const settings = () => prompts.dialog(() => _$ssr(_tmpl$11, _$escape(_$createComponent(Select, {
+    get label() {
+      return messages().csvEncoding;
+    },
+    get value() {
+      return preferences().encoding;
+    },
+    get disabled() {
+      return props.content.encoding !== "base64";
+    },
+    options: ["utf-8", "windows-1252", "utf-16le", "utf-16be"],
+    onValueChange: value => {
+      if (value) update({
+        encoding: value
+      });
+    }
+  })), _$escape(_$createComponent(Select, {
+    get label() {
+      return messages().csvSeparator;
+    },
+    get value() {
+      return preferences().delimiter;
+    },
+    get options() {
+      return [{
+        value: "auto",
+        label: messages().csvDefaultSeparator
+      }, {
+        value: ",",
+        label: messages().csvComma
+      }, {
+        value: ";",
+        label: messages().csvSemicolon
+      }, {
+        value: "\t",
+        label: messages().csvTab
+      }, {
+        value: "|",
+        label: "|"
+      }];
+    },
+    onValueChange: value => {
+      if (value) update({
+        delimiter: value
+      });
+    }
+  })), _$escape(_$createComponent(Select, {
+    get label() {
+      return messages().csvView;
+    },
+    get value() {
+      return preferences().view;
+    },
+    get options() {
+      return [{
+        value: "table",
+        label: messages().dataTable
+      }, {
+        value: "raw",
+        label: messages().csvRaw
+      }];
+    },
+    onValueChange: value => {
+      if (value === "table" || value === "raw") update({
+        view: value
+      });
+    }
+  }))), {
+    title: messages().csvSettings
+  });
   const headers = createMemo(() => preview().rows[0] ?? []);
   const rows = createMemo(() => preview().rows.slice(1));
   return _$createComponent(OverlayPanel, {
     get actions() {
-      return _$createComponent(DownloadAction, props);
+      return [_$createComponent(OverlayAction, {
+        icon: "ti-adjustments-horizontal",
+        get title() {
+          return messages().csvSettings;
+        },
+        onClick: () => void settings()
+      }), _$createComponent(DownloadAction, props)];
     },
     get children() {
       return _$createComponent(Show, {
         get when() {
-          return headers().length > 0;
+          return preferences().view === "table";
         },
         get fallback() {
-          return _$createComponent(Placeholder, {
-            icon: "ti ti-table",
-            get title() {
-              return messages().emptyFile;
-            },
-            get description() {
-              return messages().delimitedFileEmpty;
+          return _$createComponent(TextExcerpt, {
+            renderer: props,
+            get text() {
+              return text();
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$1, _$escape(_$createComponent(For, {
-            get each() {
-              return headers();
-            },
-            children: (header, index) => _$ssr(_tmpl$10, _$escape(header || messages().column({
-              number: index() + 1
-            })))
-          })), _$escape(_$createComponent(For, {
-            get each() {
-              return rows();
-            },
-            children: row => _$ssr(_tmpl$11, _$escape(_$createComponent(For, {
-              get each() {
-                return headers();
-              },
-              children: (_, index) => _$ssr(_tmpl$12, _$escape(row[index()] ?? ""))
-            })))
-          })), _$escape(_$createComponent(Show, {
+          return _$createComponent(Show, {
             get when() {
-              return preview().truncated;
+              return headers().length > 0;
+            },
+            get fallback() {
+              return _$createComponent(Placeholder, {
+                icon: "ti ti-table",
+                get title() {
+                  return messages().emptyFile;
+                },
+                get description() {
+                  return messages().delimitedFileEmpty;
+                }
+              });
             },
             get children() {
-              return _$ssr(_tmpl$0, _$escape(messages().previewLimited));
+              return _$ssr(_tmpl$12, _$escape(_$createComponent(For, {
+                get each() {
+                  return headers();
+                },
+                children: (header, index) => _$ssr(_tmpl$13, _$escape(header || messages().column({
+                  number: index() + 1
+                })))
+              })), _$escape(_$createComponent(For, {
+                get each() {
+                  return rows();
+                },
+                children: row => _$ssr(_tmpl$14, _$escape(_$createComponent(For, {
+                  get each() {
+                    return headers();
+                  },
+                  children: (_, index) => _$ssr(_tmpl$15, _$escape(row[index()] ?? ""))
+                })))
+              })), _$escape(_$createComponent(Show, {
+                get when() {
+                  return preview().columnsTruncated;
+                },
+                get children() {
+                  return _$ssr(_tmpl$6, _$escape(messages().previewColumnsLimited));
+                }
+              })), _$escape(_$createComponent(Show, {
+                get when() {
+                  return props.previewLines !== undefined;
+                },
+                get fallback() {
+                  return _$createComponent(Show, {
+                    get when() {
+                      return preview().totalRows > 201;
+                    },
+                    get children() {
+                      return _$ssr(_tmpl$16, _$escape(_$createComponent(Button, {
+                        size: "sm",
+                        variant: "ghost",
+                        get disabled() {
+                          return page() === 0;
+                        },
+                        onClick: () => setPage(page() - 1),
+                        get children() {
+                          return messages().previous;
+                        }
+                      })), _$escape(page()) * _$escape(pageSize()) + 1, _$escape(Math.min((page() + 1) * pageSize(), preview().totalRows - 1)), _$escape(preview().totalRows) - 1, _$escape(_$createComponent(Button, {
+                        size: "sm",
+                        variant: "ghost",
+                        get disabled() {
+                          return (page() + 1) * pageSize() >= preview().totalRows - 1;
+                        },
+                        onClick: () => setPage(page() + 1),
+                        get children() {
+                          return messages().next;
+                        }
+                      })));
+                    }
+                  });
+                },
+                get children() {
+                  return _$createComponent(MoreLines, {
+                    get count() {
+                      return preview().totalRows - rows().length - 1;
+                    },
+                    get onClick() {
+                      return props.onExpandPreview;
+                    }
+                  });
+                }
+              })));
             }
-          })));
+          });
         }
       });
     }
@@ -340,7 +603,7 @@ function ImageRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("alt", _$escape(props.file.path, true), false));
+      return _$ssr(_tmpl$17, _$ssrAttribute("crossorigin", _$escape(props.crossOrigin, true), false) + _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("alt", _$escape(props.file.path, true), false));
     }
   });
 }
@@ -360,7 +623,7 @@ function PdfRenderer(props) {
         }
       });
     },
-    children: href => _$ssr(_tmpl$14, _$ssrAttribute("data", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(props.file.path, true), false))
+    children: href => _$ssr(_tmpl$18, _$ssrAttribute("data", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(props.file.path, true), false))
   });
 }
 function AudioRenderer(props) {
@@ -370,7 +633,7 @@ function AudioRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      return _$ssr(_tmpl$15, _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("aria-label", _$escape(props.file.path, true), false), _$escape(messages().audioUnsupported));
+      return _$ssr(_tmpl$19, _$ssrAttribute("crossorigin", _$escape(props.crossOrigin, true), false), _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("aria-label", _$escape(props.file.path, true), false), _$escape(messages().audioUnsupported));
     }
   });
 }
@@ -381,7 +644,7 @@ function VideoRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      return _$ssr(_tmpl$16, _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("aria-label", _$escape(props.file.path, true), false), _$escape(messages().videoUnsupported));
+      return _$ssr(_tmpl$20, _$ssrAttribute("crossorigin", _$escape(props.crossOrigin, true), false), _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("aria-label", _$escape(props.file.path, true), false), _$escape(messages().videoUnsupported));
     }
   });
 }
@@ -400,7 +663,7 @@ function BinaryRenderer(props) {
         get when() {
           return props.downloadHref;
         },
-        children: href => _$ssr(_tmpl$17, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(messages().download))
+        children: href => _$ssr(_tmpl$21, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(messages().download))
       });
     }
   });
@@ -433,7 +696,7 @@ const BUILTIN_RENDERERS = [{
   component: JsonRenderer
 }, {
   id: "delimited-text",
-  match: (file, content) => content.encoding === "utf8" && getFileViewPreviewKind({
+  match: (file, content) => getFileViewPreviewKind({
     ...file,
     mediaType: content.mediaType || file.mediaType
   }) === "delimited-text",
@@ -552,7 +815,7 @@ export default function FileView(props) {
     saving: saveMutation.loading,
     save
   } : null;
-  return _$ssr(_tmpl$18, `k2b-content-file-view ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(Switch, {
+  return _$ssr(_tmpl$22, `k2b-content-file-view ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-variant", _$escape(props.variant, true), false) + _$ssrAttribute("data-excerpt", props.previewLines !== undefined ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Switch, {
     get children() {
       return [_$createComponent(Match, {
         get when() {
@@ -588,6 +851,18 @@ export default function FileView(props) {
         children: active => {
           const Renderer = active().component;
           return _$createComponent(Renderer, {
+            get previewLines() {
+              return props.previewLines;
+            },
+            get onExpandPreview() {
+              return props.onExpandPreview;
+            },
+            get headingScale() {
+              return props.headingScale;
+            },
+            get previewPreferencesKey() {
+              return props.previewPreferencesKey;
+            },
             get file() {
               return props.file;
             },
@@ -597,6 +872,12 @@ export default function FileView(props) {
             get previewHref() {
               return nativePreviewHref();
             },
+            get crossOrigin() {
+              return props.crossOrigin;
+            },
+            get onPreviewError() {
+              return props.onPreviewError;
+            },
             get downloadHref() {
               return props.downloadHref ?? null;
             },