@tangle-network/ui 11.16.2 → 11.16.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @tangle-network/ui
 
+## 11.16.3
+
+### Patch Changes
+
+- 0132f5c: Terminal blocks wrap a long command, stdout and stderr at spaces first and break inside a token only when the token is longer than the line. `break-all` split `factory-playground` and `git` mid-word on a phone.
+- a95c717: Each scrollable terminal output region carries `role="region"`, so its `aria-label` (stdout, stderr, error) names a landmark screen readers announce. A label on a bare `<pre>` is prohibited ARIA, and axe flagged it on the platform run page.
+
 ## 11.16.2
 
 ### Patch Changes

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

@@ -138,7 +138,7 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			children: "$"
 		}),
 		/* @__PURE__ */ jsx("code", {
-			className: cn("min-w-0 flex-1 whitespace-pre-wrap break-all", expanded ? "" : "line-clamp-2"),
+			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "line-clamp-2"),
 			children: command
 		}),
 		/* @__PURE__ */ jsx(ExitBadge, {
@@ -172,20 +172,23 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			children: [
 				output.stdout ? /* @__PURE__ */ jsx("pre", {
 					tabIndex: 0,
+					role: "region",
 					"aria-label": "stdout",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed", focusRing),
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed", focusRing),
 					children: output.stdout
 				}) : null,
 				output.stderr ? /* @__PURE__ */ jsx("pre", {
 					tabIndex: 0,
+					role: "region",
 					"aria-label": "stderr",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
 					children: output.stderr
 				}) : null,
 				errorText ? /* @__PURE__ */ jsx("pre", {
 					tabIndex: 0,
+					role: "region",
 					"aria-label": "error",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
 					children: errorText
 				}) : null
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.2",
+  "version": "11.16.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -142,7 +142,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.10.0",
+    "@tangle-network/brand": "^1.10.1",
     "@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/tool-previews/command-preview.tsx

@@ -191,7 +191,7 @@ export const CommandPreview = memo(
         </span>
         <code
           className={cn(
-            "min-w-0 flex-1 whitespace-pre-wrap break-all",
+            "min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]",
             expanded ? "" : "line-clamp-2",
           )}
         >
@@ -237,9 +237,10 @@ export const CommandPreview = memo(
             {output.stdout ? (
               <pre
                 tabIndex={0}
+                role="region"
                 aria-label="stdout"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed",
+                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed",
                   focusRing,
                 )}
               >
@@ -249,9 +250,10 @@ export const CommandPreview = memo(
             {output.stderr ? (
               <pre
                 tabIndex={0}
+                role="region"
                 aria-label="stderr"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
                   focusRing,
                 )}
               >
@@ -261,9 +263,10 @@ export const CommandPreview = memo(
             {errorText ? (
               <pre
                 tabIndex={0}
+                role="region"
                 aria-label="error"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
                   focusRing,
                 )}
               >