@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/markdown/MarkdownTable.jsx

@@ -0,0 +1,443 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Modal, ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconCopy, IconMaximize, IconX } from "@tabler/icons-react-native";
+import { ChatIconButton } from "../ai/icon-button";
+import { withAlpha } from "../palette";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle } from "../Sheet";
+import { SheetRow } from "../SheetRow";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { markdownTableColumnWidths, markdownTableText } from "./tableText";
+
+/**
+ * Web `.markdown table` and its Streamdown wrapper: text at 0.93em with
+ * line-height 1.5, cells `0.45rem 0.75rem`, header cells semibold, rows split
+ * by the border at 70% (the header's in the full border), the table 0.65rem
+ * inside the code-block panel (padding `0.25rem 0.3rem 0.4rem`), below the
+ * row of table actions (`flex justify-end gap-1`, 24 buttons, then `gap-2`).
+ */
+export const MARKDOWN_TABLE = {
+  fontScale: 0.93,
+  lineHeight: 1.5,
+  cellPaddingX: 12,
+  cellPaddingY: 7,
+  panelPadding: {
+    top: 4,
+    x: 5,
+    bottom: 6
+  },
+  tableMargin: 10,
+  /** The web action row: 24 buttons in a 27 row. */
+  actionsHeight: 27,
+  /**
+   * The web buttons sit 4 apart; here 16, so each slops to 44 without
+   * taking its neighbour's taps.
+   */
+  actionsGap: 16
+};
+
+/**
+ * The full-screen table sizes each column to its text, as the web table does
+ * (`markdownTableColumnWidths`). 8.5 a character fits the 12 mono of inline
+ * code with its chip padding, so a code cell does not wrap; body text is narrower.
+ */
+const FULL_SCREEN_COLUMN = {
+  charWidth: 8.5,
+  min: 72,
+  max: 320
+};
+
+/** The web Copy table menu, in its order. */
+const COPY_FORMATS = [{
+  format: "markdown",
+  title: "Markdown"
+}, {
+  format: "csv",
+  title: "CSV"
+}, {
+  format: "tsv",
+  title: "TSV"
+}];
+/**
+ * The cells as rows. `widths` gives every column its own width (the
+ * full-screen view, which scrolls sideways); without it the columns share the
+ * width equally and the cells wrap, so they line up in a chat column.
+ */
+function TableRows(t0) {
+  const $ = _c(17);
+  const {
+    header,
+    rows,
+    color,
+    widths
+  } = t0;
+  const scheme = useScheme();
+  const {
+    cellPaddingX,
+    cellPaddingY
+  } = MARKDOWN_TABLE;
+  let t1;
+  if ($[0] !== scheme) {
+    t1 = index => index === 1 ? tokens.color.border[scheme] : withAlpha(tokens.color.border[scheme], 0.7);
+    $[0] = scheme;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const rule = t1;
+  let t2;
+  if ($[2] !== color || $[3] !== rule || $[4] !== widths) {
+    t2 = (cells, index_0) => <View key={index_0} style={{
+      flexDirection: "row",
+      borderTopWidth: index_0 > 0 ? 1 : 0,
+      borderTopColor: rule(index_0)
+    }}>{cells.map((cell, cellIndex) => <View key={cellIndex} style={[{
+        paddingHorizontal: cellPaddingX,
+        paddingVertical: cellPaddingY
+      }, widths ? {
+        width: widths[cellIndex]
+      } : {
+        flex: 1
+      }]}><Text style={{
+          color
+        }}>{cell}</Text></View>)}</View>;
+    $[2] = color;
+    $[3] = rule;
+    $[4] = widths;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const row = t2;
+  let t3;
+  if ($[6] !== header || $[7] !== row) {
+    t3 = row(header, 0);
+    $[6] = header;
+    $[7] = row;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== row || $[10] !== rows) {
+    let t5;
+    if ($[12] !== row) {
+      t5 = (cells_0, index_1) => row(cells_0, index_1 + 1);
+      $[12] = row;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    t4 = rows.map(t5);
+    $[9] = row;
+    $[10] = rows;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[14] !== t3 || $[15] !== t4) {
+    t5 = <>{t3}{t4}</>;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+
+/**
+ * A markdown table on the web's panel, with the web table actions a phone
+ * can use: Copy table (a sheet of Markdown, CSV and TSV, as the web menu)
+ * and View fullscreen (the table at its own column widths, scrolling
+ * sideways, for a table too wide for the chat). The web's Download table is
+ * left out: a phone saves a file through a share sheet, which native-ui does
+ * not bundle, and the copy formats carry the same text.
+ */
+export function MarkdownTable(t0) {
+  const $ = _c(65);
+  const {
+    header,
+    rows,
+    data,
+    color,
+    onCopy
+  } = t0;
+  const scheme = useScheme();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const [copyOpen, setCopyOpen] = useState(false);
+  const [fullScreen, setFullScreen] = useState(false);
+  const {
+    panelPadding,
+    tableMargin,
+    actionsHeight,
+    actionsGap
+  } = MARKDOWN_TABLE;
+  const muted = tokens.color.muted[scheme];
+  const t1 = tokens.color.surfaceSecondary[scheme];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      borderRadius: tokens.radius.lg,
+      backgroundColor: t1,
+      paddingTop: panelPadding.top,
+      paddingHorizontal: panelPadding.x,
+      paddingBottom: panelPadding.bottom
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const panel = t2;
+  let t3;
+  if ($[2] !== data || $[3] !== onCopy) {
+    t3 = async format => {
+      setCopyOpen(false);
+      await onCopy?.(markdownTableText(data, format));
+    };
+    $[2] = data;
+    $[3] = onCopy;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const copy = t3;
+  let t4;
+  if ($[5] !== muted || $[6] !== onCopy) {
+    t4 = onCopy ? <ChatIconButton icon={IconCopy} label="Copy table" size="xs" iconColor={muted} onPress={() => setCopyOpen(true)} /> : null;
+    $[5] = muted;
+    $[6] = onCopy;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const copyButton = t4;
+  let t5;
+  if ($[8] !== data) {
+    t5 = markdownTableColumnWidths(data, {
+      ...FULL_SCREEN_COLUMN,
+      padding: MARKDOWN_TABLE.cellPaddingX * 2
+    });
+    $[8] = data;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const widths = t5;
+  let t6;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      height: actionsHeight,
+      gap: actionsGap
+    };
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => setFullScreen(true);
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== muted) {
+    t8 = <ChatIconButton icon={IconMaximize} label="View fullscreen" size="xs" iconColor={muted} onPress={t7} />;
+    $[12] = muted;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== copyButton || $[15] !== t8) {
+    t9 = <View className="flex-row items-center justify-end" style={t6}>{copyButton}{t8}</View>;
+    $[14] = copyButton;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      marginTop: tableMargin,
+      marginBottom: tableMargin
+    };
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== color || $[19] !== header || $[20] !== rows) {
+    t11 = <View style={t10}><TableRows header={header} rows={rows} color={color} /></View>;
+    $[18] = color;
+    $[19] = header;
+    $[20] = rows;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  let t12;
+  if ($[22] !== copy || $[23] !== copyOpen || $[24] !== onCopy) {
+    t12 = onCopy ? <Sheet open={copyOpen} onOpenChange={setCopyOpen}><SheetContent className="gap-3 px-3"><SheetHeader className="px-2"><SheetTitle>Copy table</SheetTitle></SheetHeader><SheetBody contentContainerClassName="gap-3">{COPY_FORMATS.map(t13 => {
+            const {
+              format: format_0,
+              title
+            } = t13;
+            return <SheetRow key={format_0} title={title} onPress={() => void copy(format_0)} />;
+          })}</SheetBody></SheetContent></Sheet> : null;
+    $[22] = copy;
+    $[23] = copyOpen;
+    $[24] = onCopy;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  const t13 = reduceMotion ? "none" : "fade";
+  let t14;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => setFullScreen(false);
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  const t15 = tokens.color.background[scheme];
+  let t16;
+  if ($[27] !== insets.bottom || $[28] !== insets.left || $[29] !== insets.right || $[30] !== insets.top || $[31] !== t15) {
+    t16 = {
+      backgroundColor: t15,
+      paddingTop: insets.top,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    };
+    $[27] = insets.bottom;
+    $[28] = insets.left;
+    $[29] = insets.right;
+    $[30] = insets.top;
+    $[31] = t15;
+    $[32] = t16;
+  } else {
+    t16 = $[32];
+  }
+  let t17;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = {
+      gap: actionsGap
+    };
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  let t18;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = () => setFullScreen(false);
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  let t19;
+  if ($[35] !== muted) {
+    t19 = <ChatIconButton icon={IconX} label="Exit fullscreen" iconColor={muted} onPress={t18} />;
+    $[35] = muted;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] !== copyButton || $[38] !== t19) {
+    t20 = <View className="flex-row items-center justify-end px-2 py-1.5" style={t17}>{copyButton}{t19}</View>;
+    $[37] = copyButton;
+    $[38] = t19;
+    $[39] = t20;
+  } else {
+    t20 = $[39];
+  }
+  let t21;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = {
+      padding: 16
+    };
+    $[40] = t21;
+  } else {
+    t21 = $[40];
+  }
+  let t22;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = {
+      flexGrow: 1
+    };
+    $[41] = t22;
+  } else {
+    t22 = $[41];
+  }
+  let t23;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = {
+      marginVertical: tableMargin
+    };
+    $[42] = t23;
+  } else {
+    t23 = $[42];
+  }
+  let t24;
+  if ($[43] !== color || $[44] !== header || $[45] !== rows || $[46] !== widths) {
+    t24 = <View style={t23}><TableRows header={header} rows={rows} color={color} widths={widths} /></View>;
+    $[43] = color;
+    $[44] = header;
+    $[45] = rows;
+    $[46] = widths;
+    $[47] = t24;
+  } else {
+    t24 = $[47];
+  }
+  let t25;
+  if ($[48] !== panel || $[49] !== t24) {
+    t25 = <ScrollView contentContainerStyle={t21}><ScrollView horizontal={true} contentContainerStyle={t22}><View style={panel}>{t24}</View></ScrollView></ScrollView>;
+    $[48] = panel;
+    $[49] = t24;
+    $[50] = t25;
+  } else {
+    t25 = $[50];
+  }
+  let t26;
+  if ($[51] !== t16 || $[52] !== t20 || $[53] !== t25) {
+    t26 = <View className="flex-1" accessibilityViewIsModal={true} style={t16}>{t20}{t25}</View>;
+    $[51] = t16;
+    $[52] = t20;
+    $[53] = t25;
+    $[54] = t26;
+  } else {
+    t26 = $[54];
+  }
+  let t27;
+  if ($[55] !== fullScreen || $[56] !== t13 || $[57] !== t26) {
+    t27 = <Modal visible={fullScreen} animationType={t13} statusBarTranslucent={true} onRequestClose={t14}>{t26}</Modal>;
+    $[55] = fullScreen;
+    $[56] = t13;
+    $[57] = t26;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  let t28;
+  if ($[59] !== panel || $[60] !== t11 || $[61] !== t12 || $[62] !== t27 || $[63] !== t9) {
+    t28 = <View style={panel}>{t9}{t11}{t12}{t27}</View>;
+    $[59] = panel;
+    $[60] = t11;
+    $[61] = t12;
+    $[62] = t27;
+    $[63] = t9;
+    $[64] = t28;
+  } else {
+    t28 = $[64];
+  }
+  return t28;
+}

package/dist/markdown/tableText.js

@@ -0,0 +1,68 @@
+/**
+ * A markdown table as text, for the table's copy actions: the formats and
+ * escaping of the web table controls (Streamdown's Copy table: Markdown, CSV
+ * and TSV), from each cell's plain text.
+ */
+
+/** CSV: a cell with a comma, quote or line break is quoted, its quotes doubled. Lines join with `\n`. */
+function toCsv({
+  headers,
+  rows
+}) {
+  const cell = text => /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+  return [...(headers.length > 0 ? [headers] : []), ...rows].map(row => row.map(cell).join(",")).join("\n");
+}
+
+/** TSV: tabs and line breaks in a cell are written as `\t`, `\n` and `\r`. */
+function toTsv({
+  headers,
+  rows
+}) {
+  const cell = text => text.replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+  return [...(headers.length > 0 ? [headers] : []), ...rows].map(row => row.map(cell).join("\t")).join("\n");
+}
+const MARKDOWN_ESCAPES = {
+  "\\": "\\\\",
+  "|": "\\|",
+  "\n": "<br>",
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;"
+};
+
+/** GitHub markdown: pipes and backslashes escaped, line breaks as `<br>`, short rows padded to the header. */
+function toMarkdown({
+  headers,
+  rows
+}) {
+  if (headers.length === 0) return "";
+  const cell = text => text.replace(/[\\|\n&<>]/g, char => MARKDOWN_ESCAPES[char] ?? char);
+  const line = cells => `| ${cells.join(" | ")} |`;
+  return [line(headers.map(cell)), line(headers.map(() => "---")), ...rows.map(row => line(row.length < headers.length ? headers.map((_, index) => cell(row[index] ?? "")) : row.map(cell)))].join("\n");
+}
+
+/** The table in one of the copy formats. */
+export function markdownTableText(data, format) {
+  if (format === "csv") return toCsv(data);
+  if (format === "tsv") return toTsv(data);
+  return toMarkdown(data);
+}
+
+/**
+ * Column widths for the full-screen table, where columns size to their text
+ * as the web table does: React Native has no table layout, so the longest
+ * line in each column, at `charWidth` a character plus the cell padding,
+ * clamped to `[min, max]`.
+ */
+export function markdownTableColumnWidths(data, {
+  charWidth,
+  padding,
+  min,
+  max
+}) {
+  return data.headers.map((header, column) => {
+    const cells = [header, ...data.rows.map(row => row[column] ?? "")];
+    const longest = Math.max(...cells.flatMap(text => text.split("\n").map(line => line.length)));
+    return Math.min(max, Math.max(min, Math.ceil(longest * charWidth + padding)));
+  });
+}