@tangle-network/ui 11.31.1 → 11.31.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.31.2
+
+### Patch Changes
+
+- 7789ba9: The Markdown table card and link chips now out-rank `.tangle-prose` rules inside the renderer. A consumer that ships an older copy of those rules no longer turns the table into its own scroller, adds cell borders, left-aligns figure headers, or underlines and recolors chips.
+
 ## 11.31.1
 
 ### Patch Changes

package/dist/markdown/markdown-table.js

@@ -32,10 +32,21 @@ function rowsOf(table) {
 }
 /** A column is numeric when every non-empty body cell is a figure. */
 function numericColumns(body) {
+	return columnKinds(body).map((kind) => kind === "figure");
+}
+/** Text this long wraps; shorter text keeps its column on one line. */
+const LONG_TEXT = 32;
+/**
+* How each column lays out: figures right-aligned, short text on one line,
+* long text wrapping at a readable width, so a phone scrolls the table instead
+* of crushing every column into a narrow stack.
+*/
+function columnKinds(body) {
 	const width = Math.max(0, ...body.map((row) => row.length));
 	return Array.from({ length: width }, (_, column) => {
 		const cells = body.map((row) => row[column] ?? "").filter(Boolean);
-		return cells.length > 0 && cells.every((cell) => NUMERIC_CELL.test(cell));
+		if (cells.length > 0 && cells.every((cell) => NUMERIC_CELL.test(cell))) return "figure";
+		return cells.some((cell) => cell.length > LONG_TEXT) ? "long" : "short";
 	});
 }
 function csvCell(value) {
@@ -46,6 +57,8 @@ function csvCell(value) {
 function tableCsv(rows) {
 	return rows.map((row) => row.map(csvCell).join(",")).join("\n");
 }
+const PROSE_TABLE = "[.tangle-prose_&]:table! [.tangle-prose_&]:m-0! [.tangle-prose_&]:overflow-visible! [.tangle-prose_&]:text-sm!";
+const PROSE_CELL = "[.tangle-prose_&]:px-3! [.tangle-prose_&]:py-2! [.tangle-prose_&]:border-t-0! [.tangle-prose_&]:border-l-0!";
 const TableColumns = createContext([]);
 const CellColumn = createContext(-1);
 function CopyCsvButton({ csv }) {
@@ -88,14 +101,14 @@ function CopyCsvButton({ csv }) {
 * scrolling inside the card when the columns outgrow a phone.
 */
 function MarkdownTable({ node, className, children, ...props }) {
-	const { csv, numeric, rowCount } = useMemo(() => {
+	const { csv, kinds, rowCount } = useMemo(() => {
 		const { header, body } = node ? rowsOf(node) : {
 			header: [],
 			body: []
 		};
 		return {
 			csv: tableCsv([...header, ...body]),
-			numeric: numericColumns(body),
+			kinds: columnKinds(body),
 			rowCount: body.length
 		};
 	}, [node]);
@@ -113,11 +126,11 @@ function MarkdownTable({ node, className, children, ...props }) {
 			"aria-label": "Table",
 			className: cn("overflow-x-auto", focusRingInset),
 			children: /* @__PURE__ */ jsx(TableColumns.Provider, {
-				value: numeric,
+				value: kinds,
 				children: /* @__PURE__ */ jsx("table", {
 					...props,
 					"data-markdown-table": "",
-					className: cn("w-full border-collapse text-sm text-foreground", className),
+					className: cn("w-full border-collapse text-sm text-foreground", PROSE_TABLE, className),
 					children
 				})
 			})
@@ -146,24 +159,24 @@ function MarkdownTableRow({ node: _node, children, ...props }) {
 		}) : child)
 	});
 }
-function useNumericCell() {
-	const numeric = useContext(TableColumns);
+function useColumnKind() {
+	const kinds = useContext(TableColumns);
 	const column = useContext(CellColumn);
-	return column >= 0 && numeric[column] === true;
+	return (column >= 0 ? kinds[column] : void 0) ?? "short";
 }
 function MarkdownTableHeaderCell({ node: _node, className, ...props }) {
-	const numeric = useNumericCell();
+	const numeric = useColumnKind() === "figure";
 	return /* @__PURE__ */ jsx("th", {
 		...props,
-		className: cn("whitespace-nowrap border-b border-border px-3 py-2 text-left font-semibold text-foreground", numeric && "text-right", className)
+		className: cn("whitespace-nowrap border-b border-border px-3 py-2 text-left font-semibold text-foreground", PROSE_CELL, numeric ? "text-right [.tangle-prose_&]:text-right!" : "[.tangle-prose_&]:text-left!", className)
 	});
 }
 function MarkdownTableCell({ node: _node, className, ...props }) {
-	const numeric = useNumericCell();
+	const kind = useColumnKind();
 	return /* @__PURE__ */ jsx("td", {
 		...props,
-		className: cn("border-b border-border/60 px-3 py-2 align-top", numeric ? "whitespace-nowrap text-right tabular-nums" : "min-w-[8rem]", className)
+		className: cn("border-b border-border/60 px-3 py-2 align-top", PROSE_CELL, kind === "figure" ? "whitespace-nowrap text-right tabular-nums" : kind === "long" ? "min-w-[14rem]" : "whitespace-nowrap", className)
 	});
 }
 //#endregion
-export { MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, numericColumns, tableCsv };
+export { MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, columnKinds, numericColumns, tableCsv };

package/dist/markdown/markdown.js

@@ -57,7 +57,7 @@ function MarkdownLink({ node: _node, children, className, ...props }) {
 			...props,
 			title: chip.title ?? props.title,
 			"data-link-chip": chip.kind,
-			className: cn("not-prose inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/60 px-2 py-0.5 align-middle text-[0.9375em] font-medium leading-6 text-foreground no-underline transition-colors hover:border-[var(--border-strong)] hover:bg-muted", focusRing, className),
+			className: cn("not-prose inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/60 px-2 py-0.5 align-middle text-[0.9375em] font-medium leading-6 text-foreground no-underline transition-colors hover:border-[var(--border-strong)] hover:bg-muted", "[.tangle-prose_&]:text-foreground! [.tangle-prose_&]:no-underline!", focusRing, className),
 			children: [/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": true,
 				className: "size-4 shrink-0 text-muted-foreground"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.31.1",
+  "version": "11.31.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -150,7 +150,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.19.6",
+    "@tangle-network/brand": "^1.20.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/markdown/markdown-table.test.tsx

@@ -1,7 +1,7 @@
 import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { Markdown } from "./markdown";
-import { numericColumns, tableCsv } from "./markdown-table";
+import { columnKinds, numericColumns, tableCsv } from "./markdown-table";
 
 const TABLE = [
   "| Variant | Impressions | CTR % | Spend $ | Note |",
@@ -23,10 +23,13 @@ describe("Markdown tables", () => {
     expect(headers.map((header) => header.textContent)).toEqual(["Variant", "Impressions", "CTR %", "Spend $", "Note"]);
     expect(headers[0].className).toContain("text-left");
     expect(headers[1].className).toContain("text-right");
+    // Inside `.tangle-prose`, a vendored header rule cannot left-align a figure column.
+    expect(headers[1].className).toContain("[.tangle-prose_&]:text-right!");
     const cells = within(table).getAllByRole("cell");
     expect(cells[1].className).toContain("text-right");
     expect(cells[1].className).toContain("tabular-nums");
     expect(cells[0].className).not.toContain("text-right");
+    expect(cells[0].className).toContain("whitespace-nowrap");
     expect(cells[4].className).not.toContain("tabular-nums");
   });
 
@@ -58,6 +61,7 @@ describe("Markdown tables", () => {
 
   it("treats a column as numeric only when every filled cell is a figure", () => {
     expect(numericColumns([["a", "1", "", "$2.50"], ["b", "x", "3", "-4%"]])).toEqual([false, false, true, true]);
+    expect(columnKinds([["Hero A", "1", "A long note that wraps across more than one line"]])).toEqual(["short", "figure", "long"]);
     expect(tableCsv([["a,b", " c"]])).toBe('"a,b"," c"');
   });
 });

package/src/markdown/markdown-table.tsx

@@ -50,10 +50,23 @@ function rowsOf(table: Element): { header: string[][]; body: string[][] } {
 
 /** A column is numeric when every non-empty body cell is a figure. */
 export function numericColumns(body: string[][]): boolean[] {
+  return columnKinds(body).map((kind) => kind === "figure");
+}
+
+/** Text this long wraps; shorter text keeps its column on one line. */
+const LONG_TEXT = 32;
+
+/**
+ * How each column lays out: figures right-aligned, short text on one line,
+ * long text wrapping at a readable width, so a phone scrolls the table instead
+ * of crushing every column into a narrow stack.
+ */
+export function columnKinds(body: string[][]): Array<"figure" | "short" | "long"> {
   const width = Math.max(0, ...body.map((row) => row.length));
   return Array.from({ length: width }, (_, column) => {
     const cells = body.map((row) => row[column] ?? "").filter(Boolean);
-    return cells.length > 0 && cells.every((cell) => NUMERIC_CELL.test(cell));
+    if (cells.length > 0 && cells.every((cell) => NUMERIC_CELL.test(cell))) return "figure";
+    return cells.some((cell) => cell.length > LONG_TEXT) ? "long" : "short";
   });
 }
 
@@ -68,7 +81,14 @@ export function tableCsv(rows: string[][]): string {
   return rows.map((row) => row.map(csvCell).join(",")).join("\n");
 }
 
-const TableColumns = createContext<boolean[]>([]);
+// Markdown wraps its output in `.tangle-prose`, and a consumer may ship an
+// older, unlayered copy of those rules (display: block on tables, cell
+// borders, left-aligned headers). Unlayered rules beat layered utilities at
+// any specificity, so these scoped overrides are important.
+const PROSE_TABLE = "[.tangle-prose_&]:table! [.tangle-prose_&]:m-0! [.tangle-prose_&]:overflow-visible! [.tangle-prose_&]:text-sm!";
+const PROSE_CELL = "[.tangle-prose_&]:px-3! [.tangle-prose_&]:py-2! [.tangle-prose_&]:border-t-0! [.tangle-prose_&]:border-l-0!";
+
+const TableColumns = createContext<Array<"figure" | "short" | "long">>([]);
 const CellColumn = createContext(-1);
 
 function CopyCsvButton({ csv }: { csv: string }) {
@@ -113,9 +133,9 @@ function CopyCsvButton({ csv }: { csv: string }) {
  * scrolling inside the card when the columns outgrow a phone.
  */
 export function MarkdownTable({ node, className, children, ...props }: ComponentProps<"table"> & ExtraProps) {
-  const { csv, numeric, rowCount } = useMemo(() => {
+  const { csv, kinds, rowCount } = useMemo(() => {
     const { header, body } = node ? rowsOf(node) : { header: [], body: [] };
-    return { csv: tableCsv([...header, ...body]), numeric: numericColumns(body), rowCount: body.length };
+    return { csv: tableCsv([...header, ...body]), kinds: columnKinds(body), rowCount: body.length };
   }, [node]);
   return (
     <div className="not-prose my-4 overflow-hidden rounded-lg border border-border bg-card">
@@ -125,8 +145,8 @@ export function MarkdownTable({ node, className, children, ...props }: Component
       </div>
       {/* A keyboard reaches a sideways-scrolling table only when it can take focus. */}
       <div tabIndex={0} role="region" aria-label="Table" className={cn("overflow-x-auto", focusRingInset)}>
-        <TableColumns.Provider value={numeric}>
-          <table {...props} data-markdown-table="" className={cn("w-full border-collapse text-sm text-foreground", className)}>
+        <TableColumns.Provider value={kinds}>
+          <table {...props} data-markdown-table="" className={cn("w-full border-collapse text-sm text-foreground", PROSE_TABLE, className)}>
             {children}
           </table>
         </TableColumns.Provider>
@@ -156,20 +176,21 @@ export function MarkdownTableRow({ node: _node, children, ...props }: ComponentP
   );
 }
 
-function useNumericCell(): boolean {
-  const numeric = useContext(TableColumns);
+function useColumnKind(): "figure" | "short" | "long" {
+  const kinds = useContext(TableColumns);
   const column = useContext(CellColumn);
-  return column >= 0 && numeric[column] === true;
+  return (column >= 0 ? kinds[column] : undefined) ?? "short";
 }
 
 export function MarkdownTableHeaderCell({ node: _node, className, ...props }: ComponentProps<"th"> & ExtraProps) {
-  const numeric = useNumericCell();
+  const numeric = useColumnKind() === "figure";
   return (
     <th
       {...props}
       className={cn(
         "whitespace-nowrap border-b border-border px-3 py-2 text-left font-semibold text-foreground",
-        numeric && "text-right",
+        PROSE_CELL,
+        numeric ? "text-right [.tangle-prose_&]:text-right!" : "[.tangle-prose_&]:text-left!",
         className,
       )}
     />
@@ -177,13 +198,15 @@ export function MarkdownTableHeaderCell({ node: _node, className, ...props }: Co
 }
 
 export function MarkdownTableCell({ node: _node, className, ...props }: ComponentProps<"td"> & ExtraProps) {
-  const numeric = useNumericCell();
+  const kind = useColumnKind();
   return (
     <td
       {...props}
       className={cn(
         "border-b border-border/60 px-3 py-2 align-top",
-        numeric ? "whitespace-nowrap text-right tabular-nums" : "min-w-[8rem]",
+        PROSE_CELL,
+        kind === "figure" ? "whitespace-nowrap text-right tabular-nums"
+          : kind === "long" ? "min-w-[14rem]" : "whitespace-nowrap",
         className,
       )}
     />

package/src/markdown/markdown.tsx

@@ -103,6 +103,8 @@ function MarkdownLink({ node: _node, children, className, ...props }: ComponentP
         data-link-chip={chip.kind}
         className={cn(
           "not-prose inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/60 px-2 py-0.5 align-middle text-[0.9375em] font-medium leading-6 text-foreground no-underline transition-colors hover:border-[var(--border-strong)] hover:bg-muted",
+          // An older, unlayered `.tangle-prose a` rule beats layered utilities.
+          "[.tangle-prose_&]:text-foreground! [.tangle-prose_&]:no-underline!",
           focusRing,
           className,
         )}