@k2b/ui 0.1.0-rc.0

package/dist/ssr/content/FileView.js

@@ -0,0 +1,612 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<button type=\"button\" class=\"k2b-content-file-view__action\"", "><i class=\"", "\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$2 = ["<a class=\"k2b-content-file-view__action\"", "><i class=\"", "\" aria-hidden=\"true\"></i><span class=\"k2b-sr-only\">", "</span></a>"],
+  _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>"];
+/**
+ * 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 _$ssr(_tmpl$, _$ssrAttribute("title", _$escape(props.title, true), false) + _$ssrAttribute("aria-label", _$escape(props.title, true), false), `ti ${_$escape(props.icon, true)}`);
+    },
+    children: href => _$ssr(_tmpl$2, _$ssrAttribute("href", _$escape(href(), true), false) + _$ssrAttribute("download", _$escape(props.download ?? "", true), false) + _$ssrAttribute("title", _$escape(props.title, true), false) + _$ssrAttribute("aria-label", _$escape(props.title, true), false), `ti ${_$escape(props.icon, true)}`, _$escape(props.title))
+  });
+}
+
+/** Scrollable preview panel with the floating action cluster overlaid top-right. */
+function OverlayPanel(props) {
+  return _$ssr(_tmpl$4, _$escape(props.children), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.actions;
+    },
+    get children() {
+      return _$ssr(_tmpl$3, _$escape(props.actions));
+    }
+  })));
+}
+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 _$ssr(_tmpl$5, _$ssrAttribute("title", _$escape(props.title, true), false) + _$ssrAttribute("aria-label", _$escape(props.title, true), false), _$ssrAttribute("disabled", props.disabled, true), _$ssrAttribute("class", _$escape(props.icon, true), false));
+}
+
+// ── Built-in renderers ──────────────────────────────────────────────────────
+
+function MarkdownRenderer(props) {
+  const messages = useUiMessages();
+  const [editing, setEditing] = createSignal(false);
+  return _$createComponent(Show, {
+    get when() {
+      return 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() {
+          return _$ssr(_tmpl$6, _$escape(_$createComponent(MarkdownView, {
+            get markdown() {
+              return stripFrontmatter(props.editor?.draft() ?? props.content.content);
+            },
+            headingScale: "compact"
+          })));
+        }
+      });
+    },
+    children: _ => {
+      const editor = props.editor;
+      return _$ssr(_tmpl$7, _$escape(_$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)
+          });
+        }
+      })));
+    }
+  });
+}
+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.
+    _$ssr(_tmpl$8, _$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))
+    })), _$escape(_$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()
+    })), _$ssrAttribute("value", _$escape(editor().draft(), true), false))
+  });
+}
+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() {
+      return _$ssr(_tmpl$6, _$escape(_$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
+          });
+        }
+      })));
+    }
+  });
+}
+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() {
+          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, {
+            get when() {
+              return preview().truncated;
+            },
+            get children() {
+              return _$ssr(_tmpl$0, _$escape(messages().previewLimited));
+            }
+          })));
+        }
+      });
+    }
+  });
+}
+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() {
+      return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(mediaSource(props), true), false) + _$ssrAttribute("alt", _$escape(props.file.path, true), false));
+    }
+  });
+}
+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 => _$ssr(_tmpl$14, _$ssrAttribute("data", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(props.file.path, true), false))
+  });
+}
+function AudioRenderer(props) {
+  const messages = useUiMessages();
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      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));
+    }
+  });
+}
+function VideoRenderer(props) {
+  const messages = useUiMessages();
+  return _$createComponent(OverlayPanel, {
+    get actions() {
+      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));
+    }
+  });
+}
+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 => _$ssr(_tmpl$17, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(messages().download))
+      });
+    }
+  });
+}
+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 _$ssr(_tmpl$18, `k2b-content-file-view ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(Switch, {
+    get children() {
+      return [_$createComponent(Match, {
+        get when() {
+          return 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 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();
+            }
+          });
+        }
+      })];
+    }
+  })));
+}
+//# sourceMappingURL=FileView.js.map