@k2b/ui 0.2.0 → 0.4.0

package/dist/browser/content/FileView.js

@@ -16,21 +16,24 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-content-file
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__overlay>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__panel><div class=k2b-content-file-view__preview></div><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-markdown-editor__tool tabindex=-1><i>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__document>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__editor>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<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>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<a class=k2b-markdown-editor__tool><i class="ti ti-download">`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<p class=k2b-content-file-view__truncated>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__sheet><table class=k2b-content-file-view__table><thead><tr></tr></thead><tbody></tbody></table><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<th scope=col><span>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<tr>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<td>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media><img>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<object type=application/pdf class=k2b-content-file-view__pdf>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=audio><audio controls preload=metadata>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=video><video controls preload=metadata playsinline>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<a class=k2b-button data-variant=secondary data-size=sm download><i class="ti ti-download"aria-hidden=true></i><!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div>`);
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__truncated>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__document>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__editor>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<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>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<a class=k2b-markdown-editor__tool><i class="ti ti-download">`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__settings><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__sheet><table class=k2b-content-file-view__table><thead><tr></tr></thead><tbody></tbody></table><!$><!/><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<th scope=col><span>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<tr>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<td>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__pagination><!$><!/><span><!$><!/>–<!$><!/> / <!$><!/></span><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media><img>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<object type=application/pdf class=k2b-content-file-view__pdf>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=audio><audio controls preload=metadata>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=video><video controls preload=metadata playsinline>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<a class=k2b-button data-variant=secondary data-size=sm download><i class="ti ti-download"aria-hidden=true></i><!$><!/>`);
 /**
  * FileView — renders one file through a small renderer registry keyed by
  * media type / path. Editing is enabled purely by the presence of `save`;
@@ -42,12 +45,16 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-content-file
  */
 
 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";
@@ -202,6 +209,84 @@ function EditorToolButton(props) {
 
 // ── Built-in renderers ──────────────────────────────────────────────────────
 
+function MoreLines(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.count > 0;
+    },
+    get children() {
+      var _el$11 = _$getNextElement(_tmpl$6);
+      _$insert(_el$11, _$createComponent(Show, {
+        get when() {
+          return props.onClick;
+        },
+        get fallback() {
+          return (() => {
+            var _el$12 = _$getNextElement(_tmpl$7);
+            _$insert(_el$12, () => messages().previewMoreLines(props.count));
+            return _el$12;
+          })();
+        },
+        get children() {
+          return _$createComponent(Button, {
+            size: "sm",
+            variant: "ghost",
+            get onClick() {
+              return props.onClick;
+            },
+            get children() {
+              return messages().previewMoreLines(props.count);
+            }
+          });
+        }
+      }));
+      return _el$11;
+    }
+  });
+}
+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 [(() => {
+    var _el$13 = _$getNextElement(_tmpl$8);
+    _$insert(_el$13, _$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";
+          }
+        });
+      }
+    }));
+    _$effect(() => _el$13.classList.toggle("k2b-content-file-view__excerpt", !!(props.renderer.previewLines !== undefined)));
+    return _el$13;
+  })(), _$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);
@@ -228,22 +313,23 @@ function MarkdownRenderer(props) {
           }), _$createComponent(DownloadAction, props)];
         },
         get children() {
-          var _el$11 = _$getNextElement(_tmpl$6);
-          _$insert(_el$11, _$createComponent(MarkdownView, {
-            get markdown() {
+          var _el$14 = _$getNextElement(_tmpl$9);
+          _$insert(_el$14, _$createComponent(TextExcerpt, {
+            renderer: props,
+            get text() {
               return stripFrontmatter(props.editor?.draft() ?? props.content.content);
             },
-            headingScale: "compact"
+            markdown: true
           }));
-          return _el$11;
+          return _el$14;
         }
       });
     },
     children: _ => {
       const editor = props.editor;
       return (() => {
-        var _el$12 = _$getNextElement(_tmpl$7);
-        _$insert(_el$12, _$createComponent(MarkdownEditor, {
+        var _el$15 = _$getNextElement(_tmpl$0);
+        _$insert(_el$15, _$createComponent(MarkdownEditor, {
           "class": "k2b-content-file-view__markdown-field",
           get ["aria-label"]() {
             return `Edit ${props.file.path.slice(props.file.path.lastIndexOf("/") + 1)}`;
@@ -273,7 +359,7 @@ function MarkdownRenderer(props) {
             });
           }
         }));
-        return _el$12;
+        return _el$15;
       })();
     }
   });
@@ -290,12 +376,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);
             }
           });
         }
@@ -304,39 +388,39 @@ 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.
     (() => {
-      var _el$13 = _$getNextElement(_tmpl$8),
-        _el$14 = _el$13.firstChild,
-        _el$15 = _el$14.firstChild,
-        _el$16 = _el$15.firstChild,
-        _el$17 = _el$16.nextSibling,
+      var _el$16 = _$getNextElement(_tmpl$1),
+        _el$17 = _el$16.firstChild,
         _el$18 = _el$17.firstChild,
-        [_el$19, _co$2] = _$getNextMarker(_el$18.nextSibling),
+        _el$19 = _el$18.firstChild,
         _el$20 = _el$19.nextSibling,
-        [_el$21, _co$3] = _$getNextMarker(_el$20.nextSibling),
-        _el$22 = _el$15.nextSibling,
-        _el$23 = _el$22.firstChild;
-      _el$14.$$keydown = event => {
+        _el$21 = _el$20.firstChild,
+        [_el$22, _co$2] = _$getNextMarker(_el$21.nextSibling),
+        _el$23 = _el$22.nextSibling,
+        [_el$24, _co$3] = _$getNextMarker(_el$23.nextSibling),
+        _el$25 = _el$18.nextSibling,
+        _el$26 = _el$25.firstChild;
+      _el$17.$$keydown = event => {
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
           event.preventDefault();
           if (editor().dirty() && !editor().saving()) void editor().save();
         }
       };
-      _$insert(_el$16, () => codeLanguage(props.file.path));
-      _$insert(_el$17, _$createComponent(Show, {
+      _$insert(_el$19, () => codeLanguage(props.file.path));
+      _$insert(_el$20, _$createComponent(Show, {
         get when() {
           return props.downloadHref;
         },
         children: href => (() => {
-          var _el$24 = _$getNextElement(_tmpl$9);
+          var _el$27 = _$getNextElement(_tmpl$10);
           _$effect(_p$ => {
             var _v$11 = href(),
               _v$12 = props.file.path.slice(props.file.path.lastIndexOf("/") + 1),
               _v$13 = messages().download,
               _v$14 = messages().download;
-            _v$11 !== _p$.e && _$setAttribute(_el$24, "href", _p$.e = _v$11);
-            _v$12 !== _p$.t && _$setAttribute(_el$24, "download", _p$.t = _v$12);
-            _v$13 !== _p$.a && _$setAttribute(_el$24, "title", _p$.a = _v$13);
-            _v$14 !== _p$.o && _$setAttribute(_el$24, "aria-label", _p$.o = _v$14);
+            _v$11 !== _p$.e && _$setAttribute(_el$27, "href", _p$.e = _v$11);
+            _v$12 !== _p$.t && _$setAttribute(_el$27, "download", _p$.t = _v$12);
+            _v$13 !== _p$.a && _$setAttribute(_el$27, "title", _p$.a = _v$13);
+            _v$14 !== _p$.o && _$setAttribute(_el$27, "aria-label", _p$.o = _v$14);
             return _p$;
           }, {
             e: undefined,
@@ -344,10 +428,10 @@ function TextRenderer(props) {
             a: undefined,
             o: undefined
           });
-          return _el$24;
+          return _el$27;
         })()
-      }), _el$19, _co$2);
-      _$insert(_el$17, _$createComponent(EditorToolButton, {
+      }), _el$22, _co$2);
+      _$insert(_el$20, _$createComponent(EditorToolButton, {
         get icon() {
           return editor().saving() ? "ti ti-loader-2 k2b-spin" : "ti ti-device-floppy";
         },
@@ -358,13 +442,13 @@ function TextRenderer(props) {
           return !editor().dirty() || editor().saving();
         },
         onClick: () => void editor().save()
-      }), _el$21, _co$3);
-      _el$23.$$input = event => editor().setDraft(event.currentTarget.value);
-      _$setAttribute(_el$23, "spellcheck", false);
-      _$effect(() => _$setAttribute(_el$14, "aria-label", messages().textEditor));
-      _$effect(() => _$setProperty(_el$23, "value", editor().draft()));
+      }), _el$24, _co$3);
+      _el$26.$$input = event => editor().setDraft(event.currentTarget.value);
+      _$setAttribute(_el$26, "spellcheck", false);
+      _$effect(() => _$setAttribute(_el$17, "aria-label", messages().textEditor));
+      _$effect(() => _$setProperty(_el$26, "value", editor().draft()));
       _$runHydrationEvents();
-      return _el$13;
+      return _el$16;
     })()
   });
 }
@@ -390,109 +474,332 @@ function JsonRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      var _el$25 = _$getNextElement(_tmpl$6);
-      _$insert(_el$25, _$createComponent(Show, {
+      var _el$28 = _$getNextElement(_tmpl$9);
+      _$insert(_el$28, _$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;
             },
-            maxRows: 200
+            get fallback() {
+              return _$createComponent(TextExcerpt, {
+                renderer: props,
+                get text() {
+                  return JSON.stringify(parsedValue(), null, 2);
+                }
+              });
+            },
+            get children() {
+              return _$createComponent(StructuredDataPreview, {
+                get data() {
+                  return parsedValue();
+                },
+                maxRows: 200
+              });
+            }
           });
         }
       }));
-      return _el$25;
+      return _el$28;
     }
   });
 }
 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(() => (() => {
+    var _el$29 = _$getNextElement(_tmpl$11),
+      _el$30 = _el$29.firstChild,
+      [_el$31, _co$4] = _$getNextMarker(_el$30.nextSibling),
+      _el$32 = _el$31.nextSibling,
+      [_el$33, _co$5] = _$getNextMarker(_el$32.nextSibling),
+      _el$34 = _el$33.nextSibling,
+      [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling);
+    _$insert(_el$29, _$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
+        });
+      }
+    }), _el$31, _co$4);
+    _$insert(_el$29, _$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
+        });
+      }
+    }), _el$33, _co$5);
+    _$insert(_el$29, _$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
+        });
+      }
+    }), _el$35, _co$6);
+    return _el$29;
+  })(), {
+    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() {
-          var _el$26 = _$getNextElement(_tmpl$1),
-            _el$27 = _el$26.firstChild,
-            _el$28 = _el$27.firstChild,
-            _el$29 = _el$28.firstChild,
-            _el$30 = _el$28.nextSibling,
-            _el$32 = _el$27.nextSibling,
-            [_el$33, _co$4] = _$getNextMarker(_el$32.nextSibling);
-          _$insert(_el$29, _$createComponent(For, {
-            get each() {
-              return headers();
+          return _$createComponent(Show, {
+            get when() {
+              return headers().length > 0;
             },
-            children: (header, index) => (() => {
-              var _el$34 = _$getNextElement(_tmpl$10),
-                _el$35 = _el$34.firstChild;
-              _$insert(_el$35, () => header || messages().column({
-                number: index() + 1
-              }));
-              return _el$34;
-            })()
-          }));
-          _$insert(_el$30, _$createComponent(For, {
-            get each() {
-              return rows();
+            get fallback() {
+              return _$createComponent(Placeholder, {
+                icon: "ti ti-table",
+                get title() {
+                  return messages().emptyFile;
+                },
+                get description() {
+                  return messages().delimitedFileEmpty;
+                }
+              });
             },
-            children: row => (() => {
-              var _el$36 = _$getNextElement(_tmpl$11);
-              _$insert(_el$36, _$createComponent(For, {
+            get children() {
+              var _el$36 = _$getNextElement(_tmpl$12),
+                _el$37 = _el$36.firstChild,
+                _el$38 = _el$37.firstChild,
+                _el$39 = _el$38.firstChild,
+                _el$40 = _el$38.nextSibling,
+                _el$42 = _el$37.nextSibling,
+                [_el$43, _co$7] = _$getNextMarker(_el$42.nextSibling),
+                _el$44 = _el$43.nextSibling,
+                [_el$45, _co$8] = _$getNextMarker(_el$44.nextSibling);
+              _$insert(_el$39, _$createComponent(For, {
                 get each() {
                   return headers();
                 },
-                children: (_, index) => (() => {
-                  var _el$37 = _$getNextElement(_tmpl$12);
-                  _$insert(_el$37, () => row[index()] ?? "");
-                  return _el$37;
+                children: (header, index) => (() => {
+                  var _el$46 = _$getNextElement(_tmpl$13),
+                    _el$47 = _el$46.firstChild;
+                  _$insert(_el$47, () => header || messages().column({
+                    number: index() + 1
+                  }));
+                  return _el$46;
+                })()
+              }));
+              _$insert(_el$40, _$createComponent(For, {
+                get each() {
+                  return rows();
+                },
+                children: row => (() => {
+                  var _el$48 = _$getNextElement(_tmpl$14);
+                  _$insert(_el$48, _$createComponent(For, {
+                    get each() {
+                      return headers();
+                    },
+                    children: (_, index) => (() => {
+                      var _el$49 = _$getNextElement(_tmpl$15);
+                      _$insert(_el$49, () => row[index()] ?? "");
+                      return _el$49;
+                    })()
+                  }));
+                  return _el$48;
                 })()
               }));
+              _$insert(_el$36, _$createComponent(Show, {
+                get when() {
+                  return preview().columnsTruncated;
+                },
+                get children() {
+                  var _el$41 = _$getNextElement(_tmpl$6);
+                  _$insert(_el$41, () => messages().previewColumnsLimited);
+                  return _el$41;
+                }
+              }), _el$43, _co$7);
+              _$insert(_el$36, _$createComponent(Show, {
+                get when() {
+                  return props.previewLines !== undefined;
+                },
+                get fallback() {
+                  return _$createComponent(Show, {
+                    get when() {
+                      return preview().totalRows > 201;
+                    },
+                    get children() {
+                      var _el$50 = _$getNextElement(_tmpl$16),
+                        _el$60 = _el$50.firstChild,
+                        [_el$61, _co$10] = _$getNextMarker(_el$60.nextSibling),
+                        _el$51 = _el$61.nextSibling,
+                        _el$54 = _el$51.firstChild,
+                        [_el$55, _co$9] = _$getNextMarker(_el$54.nextSibling),
+                        _el$52 = _el$55.nextSibling,
+                        _el$56 = _el$52.nextSibling,
+                        [_el$57, _co$0] = _$getNextMarker(_el$56.nextSibling),
+                        _el$53 = _el$57.nextSibling,
+                        _el$58 = _el$53.nextSibling,
+                        [_el$59, _co$1] = _$getNextMarker(_el$58.nextSibling),
+                        _el$62 = _el$51.nextSibling,
+                        [_el$63, _co$11] = _$getNextMarker(_el$62.nextSibling);
+                      _$insert(_el$50, _$createComponent(Button, {
+                        size: "sm",
+                        variant: "ghost",
+                        get disabled() {
+                          return page() === 0;
+                        },
+                        onClick: () => setPage(page() - 1),
+                        get children() {
+                          return messages().previous;
+                        }
+                      }), _el$61, _co$10);
+                      _$insert(_el$51, () => page() * pageSize() + 1, _el$55, _co$9);
+                      _$insert(_el$51, () => Math.min((page() + 1) * pageSize(), preview().totalRows - 1), _el$57, _co$0);
+                      _$insert(_el$51, () => preview().totalRows - 1, _el$59, _co$1);
+                      _$insert(_el$50, _$createComponent(Button, {
+                        size: "sm",
+                        variant: "ghost",
+                        get disabled() {
+                          return (page() + 1) * pageSize() >= preview().totalRows - 1;
+                        },
+                        onClick: () => setPage(page() + 1),
+                        get children() {
+                          return messages().next;
+                        }
+                      }), _el$63, _co$11);
+                      return _el$50;
+                    }
+                  });
+                },
+                get children() {
+                  return _$createComponent(MoreLines, {
+                    get count() {
+                      return preview().totalRows - rows().length - 1;
+                    },
+                    get onClick() {
+                      return props.onExpandPreview;
+                    }
+                  });
+                }
+              }), _el$45, _co$8);
               return _el$36;
-            })()
-          }));
-          _$insert(_el$26, _$createComponent(Show, {
-            get when() {
-              return preview().truncated;
-            },
-            get children() {
-              var _el$31 = _$getNextElement(_tmpl$0);
-              _$insert(_el$31, () => messages().previewLimited);
-              return _el$31;
             }
-          }), _el$33, _co$4);
-          return _el$26;
+          });
         }
       });
     }
@@ -505,19 +812,23 @@ function ImageRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      var _el$38 = _$getNextElement(_tmpl$13),
-        _el$39 = _el$38.firstChild;
+      var _el$64 = _$getNextElement(_tmpl$17),
+        _el$65 = _el$64.firstChild;
+      _$addEventListener(_el$65, "error", props.onPreviewError);
       _$effect(_p$ => {
-        var _v$15 = mediaSource(props),
-          _v$16 = props.file.path;
-        _v$15 !== _p$.e && _$setAttribute(_el$39, "src", _p$.e = _v$15);
-        _v$16 !== _p$.t && _$setAttribute(_el$39, "alt", _p$.t = _v$16);
+        var _v$15 = props.crossOrigin,
+          _v$16 = mediaSource(props),
+          _v$17 = props.file.path;
+        _v$15 !== _p$.e && _$setAttribute(_el$65, "crossorigin", _p$.e = _v$15);
+        _v$16 !== _p$.t && _$setAttribute(_el$65, "src", _p$.t = _v$16);
+        _v$17 !== _p$.a && _$setAttribute(_el$65, "alt", _p$.a = _v$17);
         return _p$;
       }, {
         e: undefined,
-        t: undefined
+        t: undefined,
+        a: undefined
       });
-      return _el$38;
+      return _el$64;
     }
   });
 }
@@ -538,18 +849,18 @@ function PdfRenderer(props) {
       });
     },
     children: href => (() => {
-      var _el$40 = _$getNextElement(_tmpl$14);
+      var _el$66 = _$getNextElement(_tmpl$18);
       _$effect(_p$ => {
-        var _v$17 = href(),
-          _v$18 = props.file.path;
-        _v$17 !== _p$.e && _$setAttribute(_el$40, "data", _p$.e = _v$17);
-        _v$18 !== _p$.t && _$setAttribute(_el$40, "aria-label", _p$.t = _v$18);
+        var _v$18 = href(),
+          _v$19 = props.file.path;
+        _v$18 !== _p$.e && _$setAttribute(_el$66, "data", _p$.e = _v$18);
+        _v$19 !== _p$.t && _$setAttribute(_el$66, "aria-label", _p$.t = _v$19);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$40;
+      return _el$66;
     })()
   });
 }
@@ -560,20 +871,24 @@ function AudioRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      var _el$41 = _$getNextElement(_tmpl$15),
-        _el$42 = _el$41.firstChild;
-      _$insert(_el$42, () => messages().audioUnsupported);
+      var _el$67 = _$getNextElement(_tmpl$19),
+        _el$68 = _el$67.firstChild;
+      _$addEventListener(_el$68, "error", props.onPreviewError);
+      _$insert(_el$68, () => messages().audioUnsupported);
       _$effect(_p$ => {
-        var _v$19 = mediaSource(props),
-          _v$20 = props.file.path;
-        _v$19 !== _p$.e && _$setAttribute(_el$42, "src", _p$.e = _v$19);
-        _v$20 !== _p$.t && _$setAttribute(_el$42, "aria-label", _p$.t = _v$20);
+        var _v$20 = props.crossOrigin,
+          _v$21 = mediaSource(props),
+          _v$22 = props.file.path;
+        _v$20 !== _p$.e && _$setAttribute(_el$68, "crossorigin", _p$.e = _v$20);
+        _v$21 !== _p$.t && _$setAttribute(_el$68, "src", _p$.t = _v$21);
+        _v$22 !== _p$.a && _$setAttribute(_el$68, "aria-label", _p$.a = _v$22);
         return _p$;
       }, {
         e: undefined,
-        t: undefined
+        t: undefined,
+        a: undefined
       });
-      return _el$41;
+      return _el$67;
     }
   });
 }
@@ -584,20 +899,24 @@ function VideoRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      var _el$43 = _$getNextElement(_tmpl$16),
-        _el$44 = _el$43.firstChild;
-      _$insert(_el$44, () => messages().videoUnsupported);
+      var _el$69 = _$getNextElement(_tmpl$20),
+        _el$70 = _el$69.firstChild;
+      _$addEventListener(_el$70, "error", props.onPreviewError);
+      _$insert(_el$70, () => messages().videoUnsupported);
       _$effect(_p$ => {
-        var _v$21 = mediaSource(props),
-          _v$22 = props.file.path;
-        _v$21 !== _p$.e && _$setAttribute(_el$44, "src", _p$.e = _v$21);
-        _v$22 !== _p$.t && _$setAttribute(_el$44, "aria-label", _p$.t = _v$22);
+        var _v$23 = props.crossOrigin,
+          _v$24 = mediaSource(props),
+          _v$25 = props.file.path;
+        _v$23 !== _p$.e && _$setAttribute(_el$70, "crossorigin", _p$.e = _v$23);
+        _v$24 !== _p$.t && _$setAttribute(_el$70, "src", _p$.t = _v$24);
+        _v$25 !== _p$.a && _$setAttribute(_el$70, "aria-label", _p$.a = _v$25);
         return _p$;
       }, {
         e: undefined,
-        t: undefined
+        t: undefined,
+        a: undefined
       });
-      return _el$43;
+      return _el$69;
     }
   });
 }
@@ -617,13 +936,13 @@ function BinaryRenderer(props) {
           return props.downloadHref;
         },
         children: href => (() => {
-          var _el$45 = _$getNextElement(_tmpl$17),
-            _el$46 = _el$45.firstChild,
-            _el$47 = _el$46.nextSibling,
-            [_el$48, _co$5] = _$getNextMarker(_el$47.nextSibling);
-          _$insert(_el$45, () => messages().download, _el$48, _co$5);
-          _$effect(() => _$setAttribute(_el$45, "href", href()));
-          return _el$45;
+          var _el$71 = _$getNextElement(_tmpl$21),
+            _el$72 = _el$71.firstChild,
+            _el$73 = _el$72.nextSibling,
+            [_el$74, _co$12] = _$getNextMarker(_el$73.nextSibling);
+          _$insert(_el$71, () => messages().download, _el$74, _co$12);
+          _$effect(() => _$setAttribute(_el$71, "href", href()));
+          return _el$71;
         })()
       });
     }
@@ -657,7 +976,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",
@@ -777,8 +1096,8 @@ export default function FileView(props) {
     save
   } : null;
   return (() => {
-    var _el$49 = _$getNextElement(_tmpl$18);
-    _$insert(_el$49, _$createComponent(Switch, {
+    var _el$75 = _$getNextElement(_tmpl$8);
+    _$insert(_el$75, _$createComponent(Switch, {
       get children() {
         return [_$createComponent(Match, {
           get when() {
@@ -814,6 +1133,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;
               },
@@ -823,6 +1154,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;
               },
@@ -834,8 +1171,20 @@ export default function FileView(props) {
         })];
       }
     }));
-    _$effect(() => _$className(_el$49, `k2b-content-file-view ${props.class ?? ""}`));
-    return _el$49;
+    _$effect(_p$ => {
+      var _v$26 = `k2b-content-file-view ${props.class ?? ""}`,
+        _v$27 = props.variant,
+        _v$28 = props.previewLines !== undefined ? "true" : undefined;
+      _v$26 !== _p$.e && _$className(_el$75, _p$.e = _v$26);
+      _v$27 !== _p$.t && _$setAttribute(_el$75, "data-variant", _p$.t = _v$27);
+      _v$28 !== _p$.a && _$setAttribute(_el$75, "data-excerpt", _p$.a = _v$28);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$75;
   })();
 }
 _$delegateEvents(["click", "mousedown", "keydown", "input"]);