@flytedan/flytebot-design-system 0.12.11 → 0.12.13

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,
@@ -772,6 +776,11 @@ function SegmentedControl({ options = [], value, onChange, className = "", ...re
   }) });
 }
 
+// src/components/textExposure.ts
+function truncationTitle(content) {
+  return typeof content === "string" || typeof content === "number" ? String(content) : void 0;
+}
+
 // src/components/surfaces/Card.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Card({
@@ -793,7 +802,7 @@ function Card({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cls, ...rest, children: [
     title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fd-card-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fd-card-head-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
       action
     ] }) : null,
     padded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fd-card-body", children }) : children,
@@ -869,7 +878,7 @@ function Drawer({ open = true, title, onClose, footer, children, className = "",
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fd-card-head-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
           onClose ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { className: "ph ph-x" }) }) : null
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
@@ -1151,7 +1160,12 @@ function Topbar({
     onMenu ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Menu", onClick: onMenu, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-list" }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: "fd-crumb", "aria-label": "Breadcrumb", children: crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React6.Fragment, { children: [
       i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-caret-right", style: { fontSize: 11, opacity: 0.6 }, "aria-hidden": "true" }) : null,
-      i === crumbs.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fd-crumb-current", children: c.label }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      i === crumbs.length - 1 ? (
+        // MP-141: the current crumb mixes a static route label with (usually) a
+        // user-entered campaign name and is single-line by design — exposure,
+        // not wrapping, is the fix here, same rule as every other identifier.
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fd-crumb-current", title: truncationTitle(c.label), children: c.label })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "a",
         {
           href: c.href || "#",
@@ -2746,12 +2760,12 @@ function SegmentedMeter({
     legend ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { className: "fd-segmeter-legend", children: [
       items.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-dot", style: { background: fill(s, i) }, "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-key", children: s.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-key", title: truncationTitle(s.label), children: s.label }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-val fd-tabular", children: format(s.value) })
       ] }, s.id || s.label || i)),
       safeTotal && used < safeTotal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "is-remainder", children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-dot is-empty", "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-key", children: remainderLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-key", title: truncationTitle(remainderLabel), children: remainderLabel }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fd-segmeter-val fd-tabular", children: format(safeTotal - used) })
       ] }) : null
     ] }) : null
@@ -3193,7 +3207,11 @@ function EntityRow({
                   /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title })
                 ]
               }
-            ) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title }),
+            ) }) : (
+              // MP-141: dense-row identifier, no Tooltip wrapper in this branch — a native
+              // `title` is the exposure mechanism, same rule as every other identifier.
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", title: truncationTitle(title), children: title })
+            ),
             meta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-meta", children: meta }) : null
           ] }),
           hasStrip ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-strip", children: [
@@ -4672,7 +4690,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;
@@ -9668,7 +9686,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("");
@@ -10363,8 +10383,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;
 }
@@ -10396,22 +10627,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(() => {
@@ -10753,6 +10984,8 @@ function createVersionStore(initialState, options) {
   EmptyState,
   EntityRow,
   EntityRowMetrics,
+  FILE_VIEWER_CSV_ROW_LIMIT,
+  FILE_VIEWER_TEXT_LIMIT,
   FeatureGate,
   FileChip,
   FileGrid,
@@ -10760,6 +10993,7 @@ function createVersionStore(initialState, options) {
   FilePickButton,
   FileStrip,
   FileTile,
+  FileViewer,
   FilterBar,
   Flag,
   FlytedeskBrand,
@@ -10864,6 +11098,7 @@ function createVersionStore(initialState, options) {
   markdownToText,
   meterFormats,
   modifierLabel,
+  parseDelimited,
   pastedTextName,
   pluralizeUnit,
   preferenceScore,