@tangle-network/ui 1.0.0

package/src/files/file-artifact-pane.tsx

@@ -0,0 +1,183 @@
+import { lazy, Suspense } from "react";
+import { Download, X } from "lucide-react";
+import {
+  type DocumentEditorBackend,
+  type DocumentEditorMode,
+  type DocumentEditorPaneCollaborationConfig,
+} from "../editor/document-editor-pane";
+import { ArtifactPane, type ArtifactPaneProps } from "../primitives/artifact-pane";
+import { FilePreview, type FilePreviewProps } from "./file-preview";
+import { FileTabs, type FileTabData } from "./file-tabs";
+
+const LazyDocumentEditorPane = lazy(async () => {
+  const module = await import("../editor/document-editor-pane");
+  return { default: module.DocumentEditorPane };
+});
+
+export interface FileArtifactPaneEditorOptions {
+  enabled?: boolean;
+  mode?: DocumentEditorMode;
+  defaultMode?: DocumentEditorMode;
+  onModeChange?: (mode: DocumentEditorMode) => void;
+  backend?: DocumentEditorBackend;
+  collaboration?: DocumentEditorPaneCollaborationConfig;
+  placeholder?: string;
+  autoFocus?: boolean;
+  readOnly?: boolean;
+  saving?: boolean;
+  saveLabel?: string;
+  onChange?: (markdown: string) => void;
+  onSave?: (markdown: string) => Promise<void> | void;
+  previewClassName?: string;
+  editorClassName?: string;
+}
+
+export interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
+  path?: string;
+  tabs?: FileTabData[];
+  activeTabId?: string;
+  onTabSelect?: (id: string) => void;
+  onTabClose?: (id: string) => void;
+  eyebrow?: ArtifactPaneProps["eyebrow"];
+  meta?: ArtifactPaneProps["meta"];
+  toolbar?: ArtifactPaneProps["toolbar"];
+  footer?: ArtifactPaneProps["footer"];
+  className?: string;
+  editor?: FileArtifactPaneEditorOptions;
+}
+
+/**
+ * FileArtifactPane — opinionated artifact frame for file previews with tabs and
+ * header actions.
+ */
+export function FileArtifactPane({
+  filename,
+  content,
+  blobUrl,
+  mimeType,
+  onClose,
+  onDownload,
+  path,
+  tabs = [],
+  activeTabId,
+  onTabSelect,
+  onTabClose,
+  eyebrow = "Artifact",
+  meta,
+  toolbar,
+  footer,
+  className,
+  editor,
+}: FileArtifactPaneProps) {
+  const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
+  const paneTabs = showTabs ? (
+    <FileTabs
+      tabs={tabs}
+      activeId={activeTabId}
+      onSelect={onTabSelect}
+      onClose={onTabClose}
+    />
+  ) : undefined;
+  const isMarkdown =
+    mimeType === "text/markdown" ||
+    filename.toLowerCase().endsWith(".md") ||
+    path?.toLowerCase().endsWith(".md");
+  const isEditableMarkdown = isMarkdown && editor?.enabled;
+  const headerActions = (
+    <>
+      {onDownload && (
+        <button
+          type="button"
+          aria-label={`Download ${filename}`}
+          onClick={onDownload}
+          className="rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+        >
+          <Download className="h-4 w-4" />
+        </button>
+      )}
+      {onClose && (
+        <button
+          type="button"
+          aria-label={`Close ${filename}`}
+          onClick={onClose}
+          className="rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </>
+  );
+
+  if (isEditableMarkdown) {
+    return (
+      <Suspense
+        fallback={(
+          <ArtifactPane
+            eyebrow={eyebrow}
+            title={filename}
+            subtitle={path}
+            meta={meta}
+            toolbar={toolbar}
+            footer={footer}
+            className={className}
+            tabs={paneTabs}
+            headerActions={headerActions}
+          >
+            <div className="flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground">
+              Loading editor…
+            </div>
+          </ArtifactPane>
+        )}
+      >
+        <LazyDocumentEditorPane
+          eyebrow={eyebrow}
+          title={filename}
+          subtitle={path}
+          meta={meta}
+          toolbar={toolbar}
+          footer={footer}
+          className={className}
+          tabs={paneTabs}
+          headerActions={headerActions}
+          markdown={content ?? ""}
+          mode={editor.mode}
+          defaultMode={editor.defaultMode}
+          onModeChange={editor.onModeChange}
+          backend={editor.backend}
+          collaboration={editor.collaboration}
+          placeholder={editor.placeholder}
+          autoFocus={editor.autoFocus}
+          readOnly={editor.readOnly}
+          saving={editor.saving}
+          saveLabel={editor.saveLabel}
+          onChange={editor.onChange}
+          onSave={editor.onSave}
+          previewClassName={editor.previewClassName}
+          editorClassName={editor.editorClassName}
+        />
+      </Suspense>
+    );
+  }
+
+  return (
+    <ArtifactPane
+      eyebrow={eyebrow}
+      title={filename}
+      subtitle={path}
+      meta={meta}
+      toolbar={toolbar}
+      footer={footer}
+      className={className}
+      tabs={paneTabs}
+      headerActions={headerActions}
+    >
+      <FilePreview
+        filename={filename}
+        content={content}
+        blobUrl={blobUrl}
+        mimeType={mimeType}
+        hideHeader={true}
+      />
+    </ArtifactPane>
+  );
+}

package/src/files/file-preview.tsx

@@ -0,0 +1,342 @@
+/**
+ * FilePreview — universal file renderer.
+ *
+ * Renders any file type beautifully:
+ * - PDF: embedded viewer
+ * - CSV/XLSX: tabular preview
+ * - Code (py/json/yaml/ts/js): line-numbered viewer
+ * - Markdown: rendered prose
+ * - Images: inline display
+ * - Text: monospace preview
+ */
+
+import {
+  Download,
+  X,
+  FileText,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+import { Markdown } from "../markdown/markdown";
+
+export interface FilePreviewProps {
+  filename: string;
+  content?: string;
+  blobUrl?: string;
+  mimeType?: string;
+  onClose?: () => void;
+  onDownload?: () => void;
+  hideHeader?: boolean;
+  className?: string;
+}
+
+function getPreviewType(filename: string, mimeType?: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  if (mimeType?.startsWith("application/pdf") || ext === "pdf") return "pdf";
+  if (mimeType?.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return "image";
+  if (["csv"].includes(ext)) return "csv";
+  if (["xlsx", "xls"].includes(ext)) return "spreadsheet";
+  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext) || ["profile", "bashrc", "bash_logout", "env", "gitignore"].includes(ext)) return "code";
+  if (["json"].includes(ext)) return "json";
+  if (["yaml", "yml"].includes(ext)) return "yaml";
+  if (["md", "markdown"].includes(ext)) return "markdown";
+  if (["txt", "log", "text"].includes(ext)) return "text";
+  
+  // If we have no known extension but we do have a text plain content payload, fallback to text rather than "unknown"
+  if (mimeType?.startsWith("text/plain")) return "text";
+  
+  return "unknown";
+}
+
+function getPreviewLabel(previewType: string) {
+  switch (previewType) {
+    case "pdf":
+      return "PDF";
+    case "image":
+      return "Image";
+    case "csv":
+      return "CSV";
+    case "spreadsheet":
+      return "Spreadsheet";
+    case "code":
+      return "Code";
+    case "json":
+      return "JSON";
+    case "yaml":
+      return "YAML";
+    case "markdown":
+      return "Markdown";
+    case "text":
+      return "Text";
+    default:
+      return "File";
+  }
+}
+
+function CodePreview({ content, filename }: { content: string; filename: string }) {
+  const lines = content.split("\n");
+  const language = filename.split(".").pop()?.toUpperCase() || "TXT";
+
+  return (
+    <div className="relative bg-background rounded-[var(--radius-md)] border border-border overflow-hidden">
+      <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2.5">
+        <div className="flex gap-1.5">
+          <div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
+          <div className="w-3 h-3 rounded-full bg-[#FEBC2E]" />
+          <div className="w-3 h-3 rounded-full bg-[#8E59FF]" />
+        </div>
+        <div className="ml-2 min-w-0 flex-1 truncate text-xs font-mono text-muted-foreground">
+          {filename}
+        </div>
+        <div className="inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+          <span>{language}</span>
+          <span className="h-1 w-1 rounded-full bg-[var(--border-hover)]" />
+          <span>{lines.length} lines</span>
+        </div>
+      </div>
+      <div className="overflow-auto max-h-[70vh]">
+        <table className="w-full">
+          <tbody>
+            {lines.map((line, i) => (
+              <tr key={i} className="hover:bg-accent">
+                <td className="text-right pr-4 pl-4 py-0 select-none text-muted-foreground text-xs font-mono w-10 align-top leading-[1.55]">
+                  {i + 1}
+                </td>
+                <td className="pr-4 py-0 font-mono text-[13px] text-foreground leading-[1.55] whitespace-pre">
+                  {line || " "}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function parseCsvRow(line: string) {
+  const cells: string[] = [];
+  let current = "";
+  let inQuotes = false;
+
+  for (let index = 0; index < line.length; index += 1) {
+    const char = line[index];
+    const next = line[index + 1];
+
+    if (char === "\"") {
+      if (inQuotes && next === "\"") {
+        current += "\"";
+        index += 1;
+        continue;
+      }
+
+      inQuotes = !inQuotes;
+      continue;
+    }
+
+    if (char === "," && !inQuotes) {
+      cells.push(current.trim());
+      current = "";
+      continue;
+    }
+
+    current += char;
+  }
+
+  cells.push(current.trim());
+  return cells;
+}
+
+function CsvPreview({ content }: { content: string }) {
+  const lines = content
+    .trim()
+    .split(/\r?\n/)
+    .filter(Boolean);
+
+  if (lines.length === 0) return null;
+
+  const headers = parseCsvRow(lines[0]).map((header) => header.replace(/^"|"$/g, ""));
+  const rows = lines.slice(1).map((line) =>
+    parseCsvRow(line).map((cell) => cell.replace(/^"|"$/g, "")),
+  );
+
+  return (
+    <div className="overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-border">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-muted/50 sticky top-0">
+            {headers.map((h, i) => (
+              <th
+                key={i}
+                className="px-3 py-2 text-left text-xs font-semibold text-foreground border-b border-border whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="border-b border-border hover:bg-accent">
+              {row.map((cell, j) => (
+                <td
+                  key={j}
+                  className="px-3 py-1.5 text-foreground font-mono text-xs whitespace-nowrap"
+                >
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function ImagePreview({ src, filename }: { src: string; filename: string }) {
+  return (
+    <div className="flex items-center justify-center p-4 bg-background rounded-[var(--radius-md)] border border-border">
+      <img src={src} alt={filename} className="max-w-full max-h-[70vh] object-contain rounded" />
+    </div>
+  );
+}
+
+function PdfPreview({ blobUrl, filename }: { blobUrl: string; filename: string }) {
+  // Simple iframe-based PDF viewer. For richer rendering, consumers can
+  // swap in react-pdf at the app level.
+  return (
+    <div className="rounded-[var(--radius-md)] border border-border overflow-hidden bg-background">
+      <iframe
+        src={blobUrl}
+        title={filename}
+        className="w-full h-[70vh] border-0"
+      />
+    </div>
+  );
+}
+
+function TextPreview({ content }: { content: string }) {
+  return (
+    <pre className="bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]">
+      {content}
+    </pre>
+  );
+}
+
+function UnsupportedPreview({
+  filename,
+  title,
+  description,
+}: {
+  filename: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border bg-background px-6 py-16 text-center text-muted-foreground">
+      <FileText className="mb-3 h-12 w-12 opacity-30" />
+      <p className="text-sm text-foreground">{title}</p>
+      <p className="mt-1 max-w-md text-xs">{description}</p>
+      <p className="mt-4 text-[11px] uppercase tracking-[0.12em]">{filename}</p>
+    </div>
+  );
+}
+
+function MarkdownPreview({ content }: { content: string }) {
+  return (
+    <div className="rounded-[var(--radius-md)] border border-border bg-background p-5">
+      <Markdown className="prose-sm max-w-none">{content}</Markdown>
+    </div>
+  );
+}
+
+function EmptyPreview({ filename }: { filename: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+      <FileText className="h-12 w-12 mb-3 opacity-30" />
+      <p className="text-sm">Cannot preview {filename}</p>
+      <p className="text-xs mt-1">Download to view this file</p>
+    </div>
+  );
+}
+
+export function FilePreview({
+  filename,
+  content,
+  blobUrl,
+  mimeType,
+  onClose,
+  onDownload,
+  hideHeader = false,
+  className,
+}: FilePreviewProps) {
+  const previewType = getPreviewType(filename, mimeType);
+  const previewLabel = getPreviewLabel(previewType);
+  const hasRenderableSource =
+    Boolean(content) ||
+    Boolean(blobUrl) ||
+    previewType === "unknown" ||
+    previewType === "spreadsheet";
+
+  return (
+    <div className={cn("flex flex-col h-full", className)}>
+      {!hideHeader && (
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm font-medium text-foreground">{filename}</div>
+            <div className="mt-0.5 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">
+              {previewLabel}
+            </div>
+          </div>
+          {onDownload && (
+            <button
+              type="button"
+              onClick={onDownload}
+              aria-label={`Download ${filename}`}
+              className="p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Download className="h-4 w-4" />
+            </button>
+          )}
+          {onClose && (
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label={`Close ${filename}`}
+              className="p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto p-3">
+        {previewType === "pdf" && blobUrl && <PdfPreview blobUrl={blobUrl} filename={filename} />}
+        {previewType === "image" && blobUrl && <ImagePreview src={blobUrl} filename={filename} />}
+        {previewType === "csv" && typeof content === "string" && <CsvPreview content={content} />}
+        {(previewType === "code" || previewType === "json" || previewType === "yaml") && typeof content === "string" && (
+          <CodePreview content={content} filename={filename} />
+        )}
+        {previewType === "text" && typeof content === "string" && <TextPreview content={content} />}
+        {previewType === "markdown" && typeof content === "string" && <MarkdownPreview content={content} />}
+        {previewType === "spreadsheet" && (
+          <UnsupportedPreview
+            filename={filename}
+            title="Spreadsheet preview is not available in this surface"
+            description="Download the workbook or convert it to CSV when you need an inline preview."
+          />
+        )}
+        {previewType === "unknown" && typeof content !== "string" && <EmptyPreview filename={filename} />}
+        {previewType === "unknown" && typeof content === "string" && <TextPreview content={content} />}
+        {!hasRenderableSource && typeof content !== "string" && (
+          <UnsupportedPreview
+            filename={filename}
+            title="Preview data is not available yet"
+            description="This artifact can be shown once the app provides inline content or a downloadable blob."
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/files/file-tabs.tsx

@@ -0,0 +1,71 @@
+/**
+ * FileTabs — tab bar for open files in the preview panel.
+ */
+
+import { X, FileText, FileCode, FileSpreadsheet } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface FileTabData {
+  id: string;
+  name: string;
+  path: string;
+  dirty?: boolean;
+}
+
+export interface FileTabsProps {
+  tabs: FileTabData[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onClose: (id: string) => void;
+  className?: string;
+}
+
+function getTabIcon(name: string) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  if (["pdf"].includes(ext)) return FileText;
+  if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet;
+  return FileCode;
+}
+
+export function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps) {
+  if (tabs.length === 0) return null;
+
+  return (
+    <div className={cn("flex items-center border-b border-border bg-background overflow-x-auto", className)}>
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeId;
+        const Icon = getTabIcon(tab.name);
+
+        return (
+          <div
+            key={tab.id}
+            className={cn(
+              "group flex items-center border-r border-border shrink-0",
+              isActive
+                ? "bg-card text-foreground border-b-2 border-b-primary"
+                : "text-muted-foreground hover:bg-muted/50",
+            )}
+          >
+            <button
+              type="button"
+              onClick={() => onSelect(tab.id)}
+              className="flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60"
+            >
+              <Icon className="h-3 w-3 shrink-0" />
+              <span className="max-w-[120px] truncate">{tab.name}</span>
+              {tab.dirty && <span className="h-1.5 w-1.5 rounded-full bg-primary" />}
+            </button>
+            <button
+              type="button"
+              aria-label={`Close ${tab.name}`}
+              onClick={() => onClose(tab.id)}
+              className="mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 group-hover:opacity-100"
+            >
+              <X className="h-2.5 w-2.5" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}