@k2b/ui 0.1.0-rc.0

package/dist/browser/content/FileView.js

@@ -0,0 +1,842 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-content-file-view__action><i aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<a class=k2b-content-file-view__action><i aria-hidden=true></i><span class=k2b-sr-only>`),
+  _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>`);
+/**
+ * FileView — renders one file through a small renderer registry keyed by
+ * media type / path. Editing is enabled purely by the presence of `save`;
+ * without it every renderer is read-only. IDE-style chrome: editors reuse
+ * the markdown editor's surface (toolbar with an in-toolbar save, Ctrl/Cmd+S),
+ * previews are quiet paper panels with icon-only actions overlaid top-right.
+ * Custom renderers are passed per instance, which keeps SSR requests and
+ * independently mounted applications isolated.
+ */
+
+import { mutation } from "@k2b/stdlib/solid";
+import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch, untrack } from "solid-js";
+import { toast } from "../feedback/toast";
+import { MarkdownEditor } from "../inputs/markdown/MarkdownEditor";
+import { useUiMessages } from "../intl/messages";
+import Placeholder from "../surfaces/Placeholder";
+import CodeDisplay from "./CodeDisplay";
+import { fileViewExtension, getFileViewPreviewKind, parseDelimitedText } from "./file-view-preview";
+import MarkdownView from "./MarkdownView";
+import StructuredDataPreview from "./StructuredDataPreview";
+export { canPreviewFile, getFileViewPreviewKind } from "./file-view-preview";
+const codeLanguage = path => {
+  const extension = fileViewExtension(path);
+  if (extension === "ts" || extension === "mts" || extension === "cts") return "ts";
+  if (extension === "tsx") return "tsx";
+  if (extension === "js" || extension === "mjs" || extension === "cjs") return "js";
+  if (extension === "jsx") return "jsx";
+  if (extension === "md" || extension === "markdown") return "md";
+  return "text";
+};
+const isMarkdown = (file, content) => content.encoding === "utf8" && getFileViewPreviewKind({
+  ...file,
+  mediaType: content.mediaType || file.mediaType
+}) === "markdown";
+
+/** Rendered previews hide a leading YAML frontmatter block — it's metadata, not content. */
+const stripFrontmatter = text => {
+  const match = /^---\r?\n[\s\S]*?\r?\n---\r?\n?/.exec(text.trimStart());
+  return match ? text.trimStart().slice(match[0].length) : text;
+};
+
+/** Icon-only action, IDE style — sits in the floating top-right cluster of previews. */
+function OverlayAction(props) {
+  const classes = "k2b-content-file-view__action";
+  return _$createComponent(Show, {
+    get when() {
+      return props.href;
+    },
+    get fallback() {
+      return (() => {
+        var _el$ = _$getNextElement(_tmpl$),
+          _el$2 = _el$.firstChild;
+        _$addEventListener(_el$, "click", props.onClick, true);
+        _$effect(_p$ => {
+          var _v$ = props.title,
+            _v$2 = props.title,
+            _v$3 = `ti ${props.icon}`;
+          _v$ !== _p$.e && _$setAttribute(_el$, "title", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$className(_el$2, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        _$runHydrationEvents();
+        return _el$;
+      })();
+    },
+    children: href => (() => {
+      var _el$3 = _$getNextElement(_tmpl$2),
+        _el$4 = _el$3.firstChild,
+        _el$5 = _el$4.nextSibling;
+      _$insert(_el$5, () => props.title);
+      _$effect(_p$ => {
+        var _v$4 = href(),
+          _v$5 = props.download ?? "",
+          _v$6 = props.title,
+          _v$7 = props.title,
+          _v$8 = `ti ${props.icon}`;
+        _v$4 !== _p$.e && _$setAttribute(_el$3, "href", _p$.e = _v$4);
+        _v$5 !== _p$.t && _$setAttribute(_el$3, "download", _p$.t = _v$5);
+        _v$6 !== _p$.a && _$setAttribute(_el$3, "title", _p$.a = _v$6);
+        _v$7 !== _p$.o && _$setAttribute(_el$3, "aria-label", _p$.o = _v$7);
+        _v$8 !== _p$.i && _$className(_el$4, _p$.i = _v$8);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      return _el$3;
+    })()
+  });
+}
+
+/** Scrollable preview panel with the floating action cluster overlaid top-right. */
+function OverlayPanel(props) {
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$4),
+      _el$7 = _el$6.firstChild,
+      _el$9 = _el$7.nextSibling,
+      [_el$0, _co$] = _$getNextMarker(_el$9.nextSibling);
+    _$insert(_el$7, () => props.children);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return props.actions;
+      },
+      get children() {
+        var _el$8 = _$getNextElement(_tmpl$3);
+        _$insert(_el$8, () => props.actions);
+        return _el$8;
+      }
+    }), _el$0, _co$);
+    return _el$6;
+  })();
+}
+const DownloadAction = props => {
+  const messages = useUiMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.downloadHref;
+    },
+    children: href => _$createComponent(OverlayAction, {
+      icon: "ti-download",
+      get title() {
+        return messages().download;
+      },
+      get href() {
+        return href();
+      },
+      get download() {
+        return props.file.path.slice(props.file.path.lastIndexOf("/") + 1);
+      }
+    })
+  });
+};
+
+/** Toolbar-styled icon button — reuses the package markdown-editor tool primitive. */
+function EditorToolButton(props) {
+  return (() => {
+    var _el$1 = _$getNextElement(_tmpl$5),
+      _el$10 = _el$1.firstChild;
+    _$addEventListener(_el$1, "click", props.onClick, true);
+    _el$1.$$mousedown = e => e.preventDefault();
+    _$effect(_p$ => {
+      var _v$9 = props.title,
+        _v$0 = props.title,
+        _v$1 = props.disabled,
+        _v$10 = props.icon;
+      _v$9 !== _p$.e && _$setAttribute(_el$1, "title", _p$.e = _v$9);
+      _v$0 !== _p$.t && _$setAttribute(_el$1, "aria-label", _p$.t = _v$0);
+      _v$1 !== _p$.a && _$setProperty(_el$1, "disabled", _p$.a = _v$1);
+      _v$10 !== _p$.o && _$className(_el$10, _p$.o = _v$10);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    _$runHydrationEvents();
+    return _el$1;
+  })();
+}
+
+// ── Built-in renderers ──────────────────────────────────────────────────────
+
+function MarkdownRenderer(props) {
+  const messages = useUiMessages();
+  const [editing, setEditing] = createSignal(false);
+  return _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.editor)() && editing();
+    },
+    get fallback() {
+      return _$createComponent(OverlayPanel, {
+        get actions() {
+          return [_$createComponent(Show, {
+            get when() {
+              return props.editor;
+            },
+            get children() {
+              return _$createComponent(OverlayAction, {
+                icon: "ti-pencil",
+                get title() {
+                  return messages().edit;
+                },
+                onClick: () => setEditing(true)
+              });
+            }
+          }), _$createComponent(DownloadAction, props)];
+        },
+        get children() {
+          var _el$11 = _$getNextElement(_tmpl$6);
+          _$insert(_el$11, _$createComponent(MarkdownView, {
+            get markdown() {
+              return stripFrontmatter(props.editor?.draft() ?? props.content.content);
+            },
+            headingScale: "compact"
+          }));
+          return _el$11;
+        }
+      });
+    },
+    children: _ => {
+      const editor = props.editor;
+      return (() => {
+        var _el$12 = _$getNextElement(_tmpl$7);
+        _$insert(_el$12, _$createComponent(MarkdownEditor, {
+          "class": "k2b-content-file-view__markdown-field",
+          get ["aria-label"]() {
+            return `Edit ${props.file.path.slice(props.file.path.lastIndexOf("/") + 1)}`;
+          },
+          fill: true,
+          get value() {
+            return editor.draft();
+          },
+          get onValueChange() {
+            return editor.setDraft;
+          },
+          showStats: false,
+          onSave: () => void editor.save(),
+          get saveDisabled() {
+            return !editor.dirty();
+          },
+          get saving() {
+            return editor.saving();
+          },
+          get toolbarTrailing() {
+            return _$createComponent(EditorToolButton, {
+              icon: "ti ti-eye",
+              get title() {
+                return messages().preview;
+              },
+              onClick: () => setEditing(false)
+            });
+          }
+        }));
+        return _el$12;
+      })();
+    }
+  });
+}
+function TextRenderer(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.editor;
+    },
+    get fallback() {
+      return _$createComponent(OverlayPanel, {
+        get actions() {
+          return _$createComponent(DownloadAction, props);
+        },
+        get children() {
+          return _$createComponent(CodeDisplay, {
+            get code() {
+              return props.content.content;
+            },
+            get language() {
+              return codeLanguage(props.file.path);
+            }
+          });
+        }
+      });
+    },
+    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,
+        _el$18 = _el$17.firstChild,
+        [_el$19, _co$2] = _$getNextMarker(_el$18.nextSibling),
+        _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 => {
+        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, {
+        get when() {
+          return props.downloadHref;
+        },
+        children: href => (() => {
+          var _el$24 = _$getNextElement(_tmpl$9);
+          _$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);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          return _el$24;
+        })()
+      }), _el$19, _co$2);
+      _$insert(_el$17, _$createComponent(EditorToolButton, {
+        get icon() {
+          return editor().saving() ? "ti ti-loader-2 k2b-spin" : "ti ti-device-floppy";
+        },
+        get title() {
+          return messages().saveShortcut;
+        },
+        get disabled() {
+          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()));
+      _$runHydrationEvents();
+      return _el$13;
+    })()
+  });
+}
+function JsonRenderer(props) {
+  const parsed = createMemo(() => {
+    try {
+      return {
+        ok: true,
+        value: JSON.parse(props.content.content)
+      };
+    } catch {
+      return {
+        ok: false
+      };
+    }
+  });
+  const parsedValue = () => {
+    const result = parsed();
+    return result.ok ? result.value : null;
+  };
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      return _$createComponent(DownloadAction, props);
+    },
+    get children() {
+      var _el$25 = _$getNextElement(_tmpl$6);
+      _$insert(_el$25, _$createComponent(Show, {
+        get when() {
+          return parsed().ok;
+        },
+        get fallback() {
+          return _$createComponent(CodeDisplay, {
+            get code() {
+              return props.content.content;
+            },
+            language: "text"
+          });
+        },
+        get children() {
+          return _$createComponent(StructuredDataPreview, {
+            get data() {
+              return parsedValue();
+            },
+            maxRows: 200
+          });
+        }
+      }));
+      return _el$25;
+    }
+  });
+}
+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 headers = createMemo(() => preview().rows[0] ?? []);
+  const rows = createMemo(() => preview().rows.slice(1));
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      return _$createComponent(DownloadAction, props);
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          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() {
+          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();
+            },
+            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();
+            },
+            children: row => (() => {
+              var _el$36 = _$getNextElement(_tmpl$11);
+              _$insert(_el$36, _$createComponent(For, {
+                get each() {
+                  return headers();
+                },
+                children: (_, index) => (() => {
+                  var _el$37 = _$getNextElement(_tmpl$12);
+                  _$insert(_el$37, () => row[index()] ?? "");
+                  return _el$37;
+                })()
+              }));
+              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;
+        }
+      });
+    }
+  });
+}
+const mediaSource = props => props.previewHref ?? `data:${props.content.mediaType};base64,${props.content.content}`;
+function ImageRenderer(props) {
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      return _$createComponent(DownloadAction, props);
+    },
+    get children() {
+      var _el$38 = _$getNextElement(_tmpl$13),
+        _el$39 = _el$38.firstChild;
+      _$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);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$38;
+    }
+  });
+}
+function PdfRenderer(props) {
+  const messages = useUiMessages();
+  const href = () => props.previewHref ?? props.downloadHref;
+  return _$createComponent(Show, {
+    get when() {
+      return href();
+    },
+    get fallback() {
+      return _$createComponent(Placeholder, {
+        icon: "ti ti-file-type-pdf",
+        title: "PDF",
+        get description() {
+          return messages().noInlinePreview;
+        }
+      });
+    },
+    children: href => (() => {
+      var _el$40 = _$getNextElement(_tmpl$14);
+      _$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);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$40;
+    })()
+  });
+}
+function AudioRenderer(props) {
+  const messages = useUiMessages();
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      return _$createComponent(DownloadAction, props);
+    },
+    get children() {
+      var _el$41 = _$getNextElement(_tmpl$15),
+        _el$42 = _el$41.firstChild;
+      _$insert(_el$42, () => 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);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$41;
+    }
+  });
+}
+function VideoRenderer(props) {
+  const messages = useUiMessages();
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      return _$createComponent(DownloadAction, props);
+    },
+    get children() {
+      var _el$43 = _$getNextElement(_tmpl$16),
+        _el$44 = _el$43.firstChild;
+      _$insert(_el$44, () => 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);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$43;
+    }
+  });
+}
+function BinaryRenderer(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Placeholder, {
+    icon: "ti ti-file-unknown",
+    get title() {
+      return messages().noPreview;
+    },
+    get description() {
+      return props.content.mediaType || messages().binaryFile;
+    },
+    get action() {
+      return _$createComponent(Show, {
+        get when() {
+          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;
+        })()
+      });
+    }
+  });
+}
+const BUILTIN_RENDERERS = [{
+  id: "markdown",
+  match: isMarkdown,
+  component: MarkdownRenderer,
+  editable: true
+}, {
+  id: "image",
+  match: (file, content) => getFileViewPreviewKind({
+    ...file,
+    mediaType: content.mediaType || file.mediaType
+  }) === "image",
+  component: ImageRenderer
+}, {
+  id: "pdf",
+  match: (file, content) => getFileViewPreviewKind({
+    ...file,
+    mediaType: content.mediaType || file.mediaType
+  }) === "pdf",
+  component: PdfRenderer
+}, {
+  id: "json",
+  match: (file, content) => content.encoding === "utf8" && getFileViewPreviewKind({
+    ...file,
+    mediaType: content.mediaType || file.mediaType
+  }) === "json",
+  component: JsonRenderer
+}, {
+  id: "delimited-text",
+  match: (file, content) => content.encoding === "utf8" && getFileViewPreviewKind({
+    ...file,
+    mediaType: content.mediaType || file.mediaType
+  }) === "delimited-text",
+  component: DelimitedTextRenderer
+}, {
+  id: "audio",
+  match: (file, content) => getFileViewPreviewKind({
+    ...file,
+    mediaType: content.mediaType || file.mediaType
+  }) === "audio",
+  component: AudioRenderer
+}, {
+  id: "video",
+  match: (file, content) => getFileViewPreviewKind({
+    ...file,
+    mediaType: content.mediaType || file.mediaType
+  }) === "video",
+  component: VideoRenderer
+}, {
+  id: "text",
+  match: (_file, content) => content.encoding === "utf8",
+  component: TextRenderer,
+  editable: true
+}, {
+  id: "binary",
+  match: () => true,
+  component: BinaryRenderer
+}];
+
+// ── Component ───────────────────────────────────────────────────────────────
+
+export const formatFileViewSize = bytes => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+export default function FileView(props) {
+  const messages = useUiMessages();
+  const [draft, setDraft] = createSignal("");
+  const [savedDraft, setSavedDraft] = createSignal("");
+  const [nativeRevision, setNativeRevision] = createSignal(0);
+  const dirty = createMemo(() => draft() !== savedDraft());
+  const instanceRenderers = () => props.renderers ?? [];
+  const saveMutation = mutation.create({
+    mutation: async input => {
+      await props.save(input.content);
+      return input;
+    },
+    onSuccess: saved => {
+      if (props.file.path === saved.path) setSavedDraft(saved.content);
+      toast.success(messages().fileSaved);
+    },
+    onError: error => toast.error(error.message)
+  });
+  const nativePreviewHref = createMemo(() => {
+    const kind = getFileViewPreviewKind(props.file);
+    const href = props.previewHref ?? (kind === "pdf" ? props.downloadHref : null);
+    if (!href) return null;
+    const separator = href.includes("?") ? "&" : "?";
+    return `${href}${separator}preview-revision=${nativeRevision()}`;
+  });
+  const browserPreviewContent = createMemo(() => {
+    const kind = getFileViewPreviewKind(props.file);
+    if (kind !== "image" && kind !== "pdf" && kind !== "audio" && kind !== "video") return null;
+    const href = nativePreviewHref();
+    if (!href) return null;
+    const candidate = {
+      encoding: "base64",
+      content: "",
+      mediaType: props.file.mediaType ?? "application/octet-stream"
+    };
+    return instanceRenderers().some(renderer => renderer.match(props.file, candidate)) ? null : candidate;
+  });
+  const [content, {
+    refetch
+  }] = createResource(() => browserPreviewContent() ? null : {
+    path: props.file.path,
+    revision: props.revision
+  }, async () => {
+    saveMutation.abort();
+    // `load` is an imperative source adapter. Host signal reads inside it
+    // must not turn this resource into a hidden reactive feedback loop.
+    const loaded = await untrack(() => props.load());
+    const loadedDraft = loaded.encoding === "utf8" ? loaded.content : "";
+    setDraft(loadedDraft);
+    setSavedDraft(loadedDraft);
+    return loaded;
+  });
+  createEffect(() => {
+    if (!props.registerRefresh) return;
+    const unregister = props.registerRefresh(async () => {
+      if (browserPreviewContent()) setNativeRevision(value => value + 1);else await refetch();
+    });
+    if (unregister) onCleanup(unregister);
+  });
+  const resolvedContent = createMemo(() => browserPreviewContent() ?? content());
+  const renderer = createMemo(() => {
+    const loaded = resolvedContent();
+    if (!loaded) return null;
+    return [...instanceRenderers(), ...BUILTIN_RENDERERS].find(candidate => candidate.match(props.file, loaded)) ?? null;
+  });
+  createEffect(() => {
+    props.onDirtyChange?.(dirty());
+  });
+  const save = async () => {
+    if (!props.save || saveMutation.loading()) return;
+    await saveMutation.mutate({
+      path: props.file.path,
+      content: draft()
+    });
+  };
+  const editor = () => props.save && renderer()?.editable && resolvedContent()?.encoding === "utf8" ? {
+    draft,
+    setDraft,
+    dirty,
+    saving: saveMutation.loading,
+    save
+  } : null;
+  return (() => {
+    var _el$49 = _$getNextElement(_tmpl$18);
+    _$insert(_el$49, _$createComponent(Switch, {
+      get children() {
+        return [_$createComponent(Match, {
+          get when() {
+            return _$memo(() => !!content.loading)() && content() === undefined;
+          },
+          get children() {
+            return _$createComponent(Placeholder, {
+              icon: "ti ti-loader-2",
+              get title() {
+                return messages().loading;
+              }
+            });
+          }
+        }), _$createComponent(Match, {
+          get when() {
+            return content.error;
+          },
+          get children() {
+            return _$createComponent(Placeholder, {
+              icon: "ti ti-alert-circle",
+              get title() {
+                return messages().failedLoadFile;
+              },
+              get description() {
+                return String(content.error?.message ?? "");
+              }
+            });
+          }
+        }), _$createComponent(Match, {
+          get when() {
+            return _$memo(() => !!resolvedContent())() && renderer();
+          },
+          children: active => {
+            const Renderer = active().component;
+            return _$createComponent(Renderer, {
+              get file() {
+                return props.file;
+              },
+              get content() {
+                return resolvedContent();
+              },
+              get previewHref() {
+                return nativePreviewHref();
+              },
+              get downloadHref() {
+                return props.downloadHref ?? null;
+              },
+              get editor() {
+                return editor();
+              }
+            });
+          }
+        })];
+      }
+    }));
+    _$effect(() => _$className(_el$49, `k2b-content-file-view ${props.class ?? ""}`));
+    return _el$49;
+  })();
+}
+_$delegateEvents(["click", "mousedown", "keydown", "input"]);
+//# sourceMappingURL=FileView.js.map