@tangle-network/sandbox-ui 0.131.2 → 0.131.3

package/dist/assets.js

@@ -440,6 +440,7 @@ function videoPosterUrl(content) {
 	}
 	return null;
 }
+const FADE_OUT = "[mask-image:linear-gradient(to_bottom,black_75%,transparent)]";
 function formatDuration(seconds) {
 	const whole = Math.max(0, Math.round(seconds));
 	return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
@@ -462,7 +463,7 @@ function Thumbnail({ spec }) {
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex h-full flex-col overflow-hidden rounded-md border border-border bg-card shadow-sm",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-0.5 border-b border-border px-3 py-2",
+					className: "flex shrink-0 flex-col gap-0.5 border-b border-border px-3 py-2",
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "truncate text-xs text-muted-foreground",
@@ -478,18 +479,18 @@ function Thumbnail({ spec }) {
 						})
 					]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-1 flex-col gap-1 overflow-hidden px-3 py-2",
+					className: cn("flex min-h-0 flex-1 flex-col gap-1 overflow-hidden px-3 py-2", FADE_OUT),
 					style: {
 						background: palette.paper,
 						color: palette.ink,
 						fontFamily: brand.fontFamily
 					},
 					children: [hero?.type === "hero" && /* @__PURE__ */ jsx("div", {
-						className: "line-clamp-2 text-sm font-bold leading-snug",
+						className: "line-clamp-2 shrink-0 text-sm font-bold leading-snug",
 						style: { color: palette.accent },
 						children: hero.headline
 					}), body?.type === "body" && /* @__PURE__ */ jsx("div", {
-						className: "line-clamp-4 text-xs leading-relaxed opacity-75",
+						className: "text-xs leading-relaxed opacity-75",
 						children: body.text
 					})]
 				})]
@@ -555,15 +556,15 @@ function Thumbnail({ spec }) {
 			className: "flex h-full flex-col gap-2 overflow-hidden p-4",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					className: "text-xs font-medium text-muted-foreground",
+					className: "shrink-0 text-xs font-medium text-muted-foreground",
 					children: COPY_PLATFORM_LABEL[cc.platform] ?? cc.platform
 				}),
 				cc.headline && /* @__PURE__ */ jsx("div", {
-					className: "line-clamp-3 text-base font-semibold leading-snug",
+					className: "line-clamp-2 shrink-0 text-base font-semibold leading-snug sm:line-clamp-3",
 					children: cc.headline
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "line-clamp-5 text-sm leading-relaxed text-muted-foreground",
+					className: cn("min-h-0 flex-1 overflow-hidden text-sm leading-relaxed text-muted-foreground [overflow-wrap:anywhere]", FADE_OUT),
 					children: cc.body
 				})
 			]
@@ -596,10 +597,10 @@ function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, cl
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 px-2.5 py-2",
+				className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-2.5 py-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate text-xs text-muted-foreground",
+						className: "min-w-0 truncate text-xs text-muted-foreground",
 						children: formatLabel
 					}),
 					/* @__PURE__ */ jsx(Badge, {

package/dist/globals.css

@@ -2999,6 +2999,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .\[mask-image\:linear-gradient\(to_bottom\,black_75\%\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,black 75%,transparent);
+  }
   .fill-current {
     fill: currentcolor;
   }
@@ -5270,6 +5273,12 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
     }
+    .sm\:line-clamp-3 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+    }
     .sm\:grid {
       display: grid;
     }

package/dist/styles.css

@@ -2999,6 +2999,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .\[mask-image\:linear-gradient\(to_bottom\,black_75\%\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,black 75%,transparent);
+  }
   .fill-current {
     fill: currentcolor;
   }
@@ -5270,6 +5273,12 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
     }
+    .sm\:line-clamp-3 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+    }
     .sm\:grid {
       display: grid;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.131.2",
+  "version": "0.131.3",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {