@tangle-network/ui 11.16.8 → 11.16.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.16.10
+
+### Patch Changes
+
+- 06b665d: A closed terminal command is two lines of plain text that end in an ellipsis when cut, with the whole command in its title, so a reader can see that text is missing. Terminal output wraps on every width again: scrolling it sideways on a phone clipped columns with no sign that more was there.
+
+## 11.16.9
+
+### Patch Changes
+
+- 272704e: On a phone, terminal output keeps its own lines and scrolls sideways inside the block, so listing columns stay aligned and hashes and URLs are not split mid-token. A closed command shows at most two lines at every width.
+
 ## 11.16.8
 
 ### Patch Changes

package/dist/tool-previews/command-preview.js

@@ -138,20 +138,12 @@ function ExitBadge({ output, status }) {
 		children: label
 	});
 }
-/**
-* A command split at its whitespace, each token in an inline box. Browsers
-* break after a hyphen, which split `--short` into `--` and `short` on a
-* phone. A box moves to the next line whole, and breaks inside only when it
-* is wider than the line (a full SHA). The text is unchanged, so a copy still
-* pastes the exact command.
-*/
-function CommandText({ command, all }) {
+function CommandText({ command }) {
 	const tokens = command.split(/(\s+)/);
-	const limit = all ? tokens.length : 128;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [tokens.slice(0, limit).map((token, i) => token.length > 0 && !/\s/.test(token) ? /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: tokens.map((token, i) => token.length > 0 && !/\s/.test(token) ? /* @__PURE__ */ jsx("span", {
 		className: "inline-block max-w-full [overflow-wrap:anywhere]",
 		children: token
-	}, i) : token), limit < tokens.length ? tokens.slice(limit).join("") : null] });
+	}, i) : token) });
 }
 /**
 * One shell command as a terminal block: a `$ command` prompt line with its
@@ -179,11 +171,9 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			children: "$"
 		}),
 		/* @__PURE__ */ jsx("code", {
+			title: expanded ? void 0 : command,
 			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "line-clamp-2"),
-			children: /* @__PURE__ */ jsx(CommandText, {
-				command,
-				all: expanded
-			})
+			children: expanded ? /* @__PURE__ */ jsx(CommandText, { command }) : command
 		}),
 		/* @__PURE__ */ jsx("span", {
 			className: "flex shrink-0 max-sm:order-last max-sm:basis-full max-sm:pl-4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.8",
+  "version": "11.16.10",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/tool-previews/command-preview.test.tsx

@@ -30,8 +30,9 @@ describe("CommandPreview", () => {
     expect(screen.getByText("exit 2").className).toContain("surface-danger");
   });
 
-  it("boxes each token so a phone wraps between flags", () => {
+  it("boxes each token of an opened command so a phone wraps between flags", () => {
     render(<CommandPreview part={part({ output: "M a" })} />);
+    fireEvent.click(screen.getByRole("button"));
     const flag = screen.getByText("--short");
     expect(flag.tagName).toBe("SPAN");
     expect(flag.className).toContain("inline-block");
@@ -61,6 +62,14 @@ describe("CommandPreview", () => {
     expect(screen.getByText("exit 0 · tool reported error").className).toContain("surface-warning");
   });
 
+  it("shows a closed command as plain text that ends in an ellipsis, whole in its title", () => {
+    render(<CommandPreview part={part({ output: "M a" })} />);
+    const code = screen.getByTestId("command-preview").querySelector("code");
+    expect(code?.className).toContain("line-clamp-2");
+    expect(code).toHaveAttribute("title", "git status --short");
+    expect(code?.querySelector("span")).toBeNull();
+  });
+
   it("is a quiet row until opened, then a dark terminal", () => {
     render(<CommandPreview part={part({ output: "M a" })} />);
     const block = screen.getByTestId("command-preview");

package/src/tool-previews/command-preview.tsx

@@ -187,23 +187,11 @@ function ExitBadge({
   );
 }
 
-/** A closed row shows two lines, so only its first tokens need their own
- *  box; a long script renders the rest as plain text. */
-const BOXED_TOKENS = 64;
-
-/**
- * A command split at its whitespace, each token in an inline box. Browsers
- * break after a hyphen, which split `--short` into `--` and `short` on a
- * phone. A box moves to the next line whole, and breaks inside only when it
- * is wider than the line (a full SHA). The text is unchanged, so a copy still
- * pastes the exact command.
- */
-function CommandText({ command, all }: { command: string; all: boolean }) {
+function CommandText({ command }: { command: string }) {
   const tokens = command.split(/(\s+)/);
-  const limit = all ? tokens.length : BOXED_TOKENS * 2;
   return (
     <>
-      {tokens.slice(0, limit).map((token, i) =>
+      {tokens.map((token, i) =>
         token.length > 0 && !/\s/.test(token) ? (
           // Tokens repeat (two spaces, two "&&"), so position is the key.
           <span key={i} className="inline-block max-w-full [overflow-wrap:anywhere]">
@@ -213,7 +201,6 @@ function CommandText({ command, all }: { command: string; all: boolean }) {
           token
         ),
       )}
-      {limit < tokens.length ? tokens.slice(limit).join("") : null}
     </>
   );
 }
@@ -256,12 +243,16 @@ export const CommandPreview = memo(
           $
         </span>
         <code
+          title={expanded ? undefined : command}
           className={cn(
             "min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]",
+            // Closed, two lines of plain text that end in an ellipsis when
+            // cut, with the whole command in the title. Opened, each token
+            // is a box that wraps whole (line-clamp does not count boxes).
             expanded ? "" : "line-clamp-2",
           )}
         >
-          <CommandText command={command} all={expanded} />
+          {expanded ? <CommandText command={command} /> : command}
         </code>
         {/* On a phone the badge takes its own line under the command, so the
             command keeps the row's width. */}