@flytedan/flytebot-design-system 0.12.10 → 0.12.12

package/dist/index.cjs

@@ -73,6 +73,8 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   EntityRow: () => EntityRow,
   EntityRowMetrics: () => EntityRowMetrics,
+  FILE_VIEWER_CSV_ROW_LIMIT: () => FILE_VIEWER_CSV_ROW_LIMIT,
+  FILE_VIEWER_TEXT_LIMIT: () => FILE_VIEWER_TEXT_LIMIT,
   FeatureGate: () => FeatureGate,
   FileChip: () => FileChip,
   FileGrid: () => FileGrid,
@@ -80,6 +82,7 @@ __export(index_exports, {
   FilePickButton: () => FilePickButton,
   FileStrip: () => FileStrip,
   FileTile: () => FileTile,
+  FileViewer: () => FileViewer,
   FilterBar: () => FilterBar,
   Flag: () => Flag,
   FlytedeskBrand: () => FlytedeskBrand,
@@ -184,6 +187,7 @@ __export(index_exports, {
   markdownToText: () => markdownToText,
   meterFormats: () => meterFormats,
   modifierLabel: () => modifierLabel,
+  parseDelimited: () => parseDelimited,
   pastedTextName: () => pastedTextName,
   pluralizeUnit: () => pluralizeUnit,
   preferenceScore: () => preferenceScore,
@@ -3159,13 +3163,15 @@ function EntityRow({
       onPointerDown,
       className: ["fd-erow", tone === "danger" ? "fd-erow-danger" : "", className].filter(Boolean).join(" "),
       style: {
-        // display/alignItems/gap moved to the .fd-erow stylesheet rule (MP-114
-        // follow-up): an inline style always wins over a stylesheet rule regardless of
-        // specificity or media/container query, which would have made it impossible
-        // for the narrow-container rule below to ever switch this row from a flex row
-        // to a grid (see that rule's own comment for why it needs to).
+        // display/alignItems/gap/padding moved to the .fd-erow stylesheet rule
+        // (MP-114 follow-ups): an inline style always wins over a stylesheet rule
+        // regardless of specificity or media/container query, which would have made
+        // it impossible for the narrow-container rule below to ever switch this row
+        // from a flex row to a grid — and padding specifically is also read back by
+        // .fd-tlist-footer's own indent calc(), as --erow-pad-x, so it has to be a
+        // real, readable stylesheet value rather than a number only this component
+        // ever sees.
         height: "100%",
-        padding: "0 12px",
         cursor: draggable ? "grab" : void 0,
         // Own the gesture on touch too — without this, a touch-drag on a draggable row
         // starts the page scrolling instead of (or as well as) the pointer drag.
@@ -3173,7 +3179,12 @@ function EntityRow({
         ...style
       },
       children: [
-        draggable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
+        draggable ? (
+          // font-size moved to the .fd-erow-grip stylesheet rule, same reason as the
+          // row's own padding above: .fd-tlist-footer's indent reads it back as
+          // --erow-grip-size.
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { flex: "none", color: "var(--text-muted)" } })
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-body", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-titleline", children: [
             titleIcon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -4665,7 +4676,7 @@ function useStagedFiles(upload, opts) {
     patch(att.id, { progress: 0, error: void 0 });
     Promise.resolve().then(() => upload(att.file, (p) => patch(att.id, { progress: Math.max(0, Math.min(99, p)) }), ac ? ac.signal : void 0)).then((res) => {
       const r = res || {};
-      patch(att.id, { progress: 100, url: r.url || att.url, thumb: r.thumb || att.thumb, error: void 0, remote: true });
+      patch(att.id, Object.assign({}, r, { id: r.id || att.id, progress: 100, error: void 0 }));
       o.onUploaded && o.onUploaded(att);
     }).catch((err) => {
       if (ac && ac.signal.aborted) return;
@@ -9661,7 +9672,9 @@ function ChatComposer({
   const submit = () => {
     if (!canSend) return;
     onSubmit(text.trim(), staged.items.map((f) => {
-      const { file: _file, ...rest } = f;
+      const { file, blobUrl, ...rest } = f;
+      void file;
+      void blobUrl;
       return rest;
     }));
     change("");
@@ -10356,8 +10369,219 @@ function AgentChatPanel({
   );
 }
 
-// src/kits/query.ts
+// src/components/files/FileViewer.tsx
 var React47 = __toESM(require("react"), 1);
+var import_jsx_runtime78 = require("react/jsx-runtime");
+function previewKindOf(file) {
+  const mime = (file.mime || "").toLowerCase();
+  const ext = extensionOf(file.name || "");
+  if (isImage(mime, file.name)) return "image";
+  if (mime === "application/pdf" || ext === "pdf") return "pdf";
+  if (mime === "text/markdown" || ext === "md" || ext === "markdown") return "markdown";
+  if (mime === "application/json" || ext === "json") return "json";
+  if (mime === "text/csv" || mime === "text/tab-separated-values" || ext === "csv" || ext === "tsv") return "csv";
+  if (mime.startsWith("text/") || ext === "txt" || ext === "log") return "text";
+  return "none";
+}
+var FILE_VIEWER_TEXT_LIMIT = 5e5;
+var FILE_VIEWER_CSV_ROW_LIMIT = 500;
+function parseDelimited(text, delimiter) {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (inQuotes) {
+      if (c === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else inQuotes = false;
+      } else field += c;
+      continue;
+    }
+    if (c === '"') {
+      inQuotes = true;
+      continue;
+    }
+    if (c === delimiter) {
+      row.push(field);
+      field = "";
+      continue;
+    }
+    if (c === "\n") {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+      continue;
+    }
+    if (c === "\r") continue;
+    field += c;
+  }
+  if (field.length || row.length) {
+    row.push(field);
+    rows.push(row);
+  }
+  return rows;
+}
+function usePreview(file, kind, resolveUrl) {
+  const [state, setState] = React47.useState({ status: "loading" });
+  const [attempt, setAttempt] = React47.useState(0);
+  const resolveRef = React47.useRef(resolveUrl);
+  React47.useEffect(() => {
+    resolveRef.current = resolveUrl;
+  }, [resolveUrl]);
+  React47.useEffect(() => {
+    if (kind === "none") {
+      setState({ status: "ready" });
+      return;
+    }
+    let dead = false;
+    const ac = typeof AbortController !== "undefined" ? new AbortController() : void 0;
+    setState({ status: "loading" });
+    resolveRef.current("inline").then((url) => {
+      if (dead) return void 0;
+      if (kind === "image" || kind === "pdf") {
+        setState({ status: "ready", url });
+        return void 0;
+      }
+      return fetch(url, ac ? { signal: ac.signal } : void 0).then((res) => {
+        if (!res.ok) throw new Error("The preview didn't load (" + res.status + ").");
+        return res.text();
+      }).then((body) => {
+        if (dead) return;
+        setState({ status: "ready", url, text: body.length > FILE_VIEWER_TEXT_LIMIT ? body.slice(0, FILE_VIEWER_TEXT_LIMIT) : body });
+      });
+    }).catch((err) => {
+      if (dead || ac && ac.signal.aborted) return;
+      setState({ status: "error", error: err && err.message || "The preview didn't load." });
+    });
+    return () => {
+      dead = true;
+      if (ac) ac.abort();
+    };
+  }, [file.id, kind, attempt]);
+  return { ...state, retry: React47.useCallback(() => setAttempt((a) => a + 1), []) };
+}
+function PreviewBody({ file, kind, state }) {
+  if (kind === "image") return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("img", { className: "fd-fv-image", src: state.url, alt: file.name || "Preview" });
+  if (kind === "pdf") return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("iframe", { className: "fd-fv-pdf", src: state.url, title: file.name || "PDF preview" });
+  if (kind === "markdown") return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Markdown, { className: "fd-fv-markdown", source: state.text || "" });
+  if (kind === "json") {
+    let pretty = state.text || "";
+    try {
+      pretty = JSON.stringify(JSON.parse(pretty), null, 2);
+    } catch {
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CodeBlock, { code: pretty, language: "json" });
+  }
+  if (kind === "csv") {
+    const tsv = extensionOf(file.name || "") === "tsv" || (file.mime || "").toLowerCase().includes("tab-separated");
+    const rows = parseDelimited(state.text || "", tsv ? "	" : ",").filter((r) => r.length > 1 || r[0] !== "");
+    const head = rows[0] || [];
+    const dataRows = rows.slice(1);
+    const shown = dataRows.slice(0, FILE_VIEWER_CSV_ROW_LIMIT);
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "fd-fv-csv", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("table", { className: "fd-fv-csv-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tr", { children: head.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("th", { children: c }, i)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tbody", { children: shown.map((r, ri) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tr", { children: head.map((_, ci) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("td", { children: r[ci] ?? "" }, ci)) }, ri)) })
+      ] }),
+      dataRows.length > FILE_VIEWER_CSV_ROW_LIMIT ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("p", { className: "fd-fv-csv-note fd-body-sm fd-muted", children: [
+        "Showing the first ",
+        FILE_VIEWER_CSV_ROW_LIMIT.toLocaleString(),
+        " of ",
+        dataRows.length.toLocaleString(),
+        " rows."
+      ] }) : null
+    ] });
+  }
+  if (kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CodeBlock, { code: state.text || "", language: extensionOf(file.name || "") || void 0 });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "fd-fv-fallback", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "fd-fv-fallback-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("i", { className: "ph ph-" + iconForMime(file.mime, file.name) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "fd-fv-fallback-title", children: "No preview available" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "fd-fv-fallback-meta", children: [
+      file.mime || "Unknown type",
+      file.size ? " \xB7 " + formatBytes(file.size) : ""
+    ] })
+  ] });
+}
+function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", onClose, actions, className = "" }) {
+  const kind = React47.useMemo(() => previewKindOf(file), [file]);
+  const preview = usePreview(file, kind, resolveUrl);
+  const [tab, setTab] = React47.useState("preview");
+  const [downloading, setDownloading] = React47.useState(false);
+  const [downloadError, setDownloadError] = React47.useState(null);
+  const hasSide = sidePanel != null;
+  React47.useEffect(() => {
+    setTab("preview");
+  }, [file.id]);
+  const download = () => {
+    setDownloading(true);
+    setDownloadError(null);
+    resolveUrl("attachment").then((url) => {
+      const a = document.createElement("a");
+      a.href = url;
+      a.rel = "noopener";
+      a.download = file.name || "";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    }).catch((err) => setDownloadError(err && err.message || "Download failed.")).finally(() => setDownloading(false));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    "section",
+    {
+      className: ["fd-fv", hasSide && tab === "side" ? "is-tab-side" : "is-tab-preview", className].filter(Boolean).join(" "),
+      "aria-label": file.name || "File",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("header", { className: "fd-fv-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "fd-fv-head-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("i", { className: "ph ph-" + iconForMime(file.mime, file.name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "fd-fv-head-titles", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "fd-fv-head-title", title: file.name, children: file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "fd-fv-head-meta", children: [
+              file.mime || "Unknown type",
+              file.size ? " \xB7 " + formatBytes(file.size) : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "fd-fv-head-actions", children: [
+            actions,
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Button, { variant: "secondary", size: "sm", icon: "download-simple", loading: downloading, onClick: download, children: "Download" }),
+            onClose ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(IconButton, { icon: "x", label: "Close", onClick: onClose }) : null
+          ] })
+        ] }),
+        downloadError ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "fd-fv-download-error", role: "alert", children: downloadError }) : null,
+        hasSide ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          Tabs,
+          {
+            className: "fd-fv-tabs",
+            tabs: [{ value: "preview", label: "Preview" }, { value: "side", label: sidePanelLabel }],
+            value: tab,
+            onChange: (v) => setTab(v)
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "fd-fv-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "fd-fv-preview", role: "region", "aria-label": "Preview of " + (file.name || "file"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            LoadingRegion,
+            {
+              state: preview.status === "loading" ? "loading" : preview.status === "error" ? "error" : "ready",
+              error: preview.error,
+              label: "Loading preview of " + (file.name || "file"),
+              onRetry: preview.status === "error" ? preview.retry : void 0,
+              skeleton: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Skeleton, { shape: "card", h: 220 }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(PreviewBody, { file, kind, state: preview })
+            }
+          ) }),
+          hasSide ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "fd-fv-side", role: "region", "aria-label": sidePanelLabel, children: sidePanel }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/kits/query.ts
+var React48 = __toESM(require("react"), 1);
 function eqFilter(get2) {
   return (row, value) => Array.isArray(value) ? value.includes(get2(row)) : get2(row) === value;
 }
@@ -10389,22 +10613,22 @@ function compare(a, b, dir) {
 var API = null;
 var PREFS = null;
 function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
-  const [query, setQuery] = React47.useState(() => {
+  const [query, setQuery] = React48.useState(() => {
     const store = PREFS || window.PlannerPrefs;
     const saved = prefsKey && store ? store.getTable(prefsKey) : {};
     return { ...DEFAULTS, ...defaults || {}, ...saved.pageSize ? { pageSize: saved.pageSize } : {}, ...saved.sort ? { sort: saved.sort, dir: saved.dir || "desc" } : {} };
   });
-  const savePref = React47.useCallback((patch2) => {
+  const savePref = React48.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
-  const [res, setRes] = React47.useState(null);
-  const [loading, setLoading] = React47.useState(true);
-  const seq2 = React47.useRef(0);
+  const [res, setRes] = React48.useState(null);
+  const [loading, setLoading] = React48.useState(true);
+  const seq2 = React48.useRef(0);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     const id = ++seq2.current;
     setLoading(true);
     const t = setTimeout(() => {
@@ -10746,6 +10970,8 @@ function createVersionStore(initialState, options) {
   EmptyState,
   EntityRow,
   EntityRowMetrics,
+  FILE_VIEWER_CSV_ROW_LIMIT,
+  FILE_VIEWER_TEXT_LIMIT,
   FeatureGate,
   FileChip,
   FileGrid,
@@ -10753,6 +10979,7 @@ function createVersionStore(initialState, options) {
   FilePickButton,
   FileStrip,
   FileTile,
+  FileViewer,
   FilterBar,
   Flag,
   FlytedeskBrand,
@@ -10857,6 +11084,7 @@ function createVersionStore(initialState, options) {
   markdownToText,
   meterFormats,
   modifierLabel,
+  parseDelimited,
   pastedTextName,
   pluralizeUnit,
   preferenceScore,