@tangle-network/sandbox-ui 0.131.2 → 0.131.4

package/dist/{WorkflowGraph-YhtQWa5b.js → WorkflowGraph-Cx6SkrNJ.js}

@@ -1,4 +1,4 @@
-import { A as wfEdgeId, D as isStructuralKind, E as buildWorkflowGraph, F as shortModel, I as clampPreview, L as fmtCost, R as fmtDuration, S as COMPACT_NODE_SIZE, _ as kindAccent, a as NodeMark, b as problemTitle, c as RESTING_SHADOW, g as emptySlotLabel, h as edgeColor, j as worstSeverity, k as triggerNodeIndex, l as STATUS_COLOR, m as StatusPill, n as classifyOutput, o as ProblemMarker, p as StatusFooter, s as ProblemMessages, t as NodeOutputBody, u as STATUS_LABEL, v as problemBorder, x as statusBorder, y as problemSurface, z as fmtTokens } from "./node-output-BQr2Dgy5.js";
+import { A as wfEdgeId, D as isStructuralKind, E as buildWorkflowGraph, F as shortModel, I as clampPreview, L as fmtCost, R as fmtDuration, S as COMPACT_NODE_SIZE, _ as kindAccent, a as NodeMark, b as problemTitle, c as RESTING_SHADOW, g as emptySlotLabel, h as edgeColor, j as worstSeverity, k as triggerNodeIndex, l as STATUS_COLOR, m as StatusPill, n as classifyOutput, o as ProblemMarker, p as StatusFooter, s as ProblemMessages, t as NodeOutputBody, u as STATUS_LABEL, v as problemBorder, x as statusBorder, y as problemSurface, z as fmtTokens } from "./node-output-BdfG5lt4.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Maximize2, Minimize2, Plus, X } from "lucide-react";

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;
     }
@@ -5487,9 +5496,18 @@
     .lg\:flex-row {
       flex-direction: row;
     }
+    .lg\:flex-nowrap {
+      flex-wrap: nowrap;
+    }
     .lg\:items-center {
       align-items: center;
     }
+    .lg\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+    .lg\:overflow-x-auto {
+      overflow-x: auto;
+    }
     .lg\:p-0 {
       padding: 0px;
     }

package/dist/integrations.js

@@ -1,4 +1,4 @@
-import { n as normalizeProviderId, r as providerLogoCandidates, t as ProviderIcon } from "./provider-logo-BiuiO_c2.js";
+import { n as normalizeProviderId, r as providerLogoCandidates, t as ProviderIcon } from "./provider-logo-X9PkbMIX.js";
 import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";

package/dist/{node-output-BQr2Dgy5.js → node-output-BdfG5lt4.js}

@@ -1,5 +1,5 @@
 import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
-import { t as ProviderIcon } from "./provider-logo-BiuiO_c2.js";
+import { t as ProviderIcon } from "./provider-logo-X9PkbMIX.js";
 import { StatusPill } from "@tangle-network/ui/primitives";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";

package/dist/{provider-logo-BiuiO_c2.js → provider-logo-X9PkbMIX.js}

@@ -21,6 +21,7 @@ function normalizeProviderId(id) {
 * normalized id does not match the simpleicons slug (compound brands,
 * Google/Microsoft suite members, renamed brands).
 */
+const PH0NY_MARK = `data:image/svg+xml,${encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><rect width=\"64\" height=\"64\" rx=\"12\" fill=\"#ffffff\"/><text x=\"32\" y=\"38.5\" text-anchor=\"middle\" textLength=\"50\" lengthAdjust=\"spacingAndGlyphs\" font-family=\"Inter, system-ui, -apple-system, Segoe UI, sans-serif\" font-size=\"19\" font-weight=\"500\" fill=\"#533afd\">ph0ny</text></svg>")}`;
 const PROVIDER_LOGO_SLUGS = {
 	gmail: "gmail",
 	googlemail: "gmail",
@@ -182,7 +183,8 @@ const PROVIDER_LOGO_URLS = {
 	sanity: "https://cdn.simpleicons.org/sanity",
 	sentry: "https://cdn.simpleicons.org/sentry",
 	opsgenie: "https://cdn.simpleicons.org/opsgenie",
-	phony: "https://www.google.com/s2/favicons?sz=64&domain_url=https://ph0ny.com",
+	phony: PH0NY_MARK,
+	ph0ny: PH0NY_MARK,
 	docuseal: "https://www.google.com/s2/favicons?sz=64&domain_url=https://docuseal.com",
 	braze: "https://www.google.com/s2/favicons?sz=64&domain_url=https://braze.com",
 	pipedream: "https://www.google.com/s2/favicons?sz=64&domain_url=https://pipedream.com",

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;
     }
@@ -5487,9 +5496,18 @@
     .lg\:flex-row {
       flex-direction: row;
     }
+    .lg\:flex-nowrap {
+      flex-wrap: nowrap;
+    }
     .lg\:items-center {
       align-items: center;
     }
+    .lg\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+    .lg\:overflow-x-auto {
+      overflow-x: auto;
+    }
     .lg\:p-0 {
       padding: 0px;
     }

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
-import { C as TRIGGER_NODE_ID, E as buildWorkflowGraph, F as shortModel, M as actionPathLabel, N as humanizeIdentifier, O as triggerNodeId, P as parseActionPath, T as branchNodeId, a as NodeMark, d as STATUS_PILL, f as STATUS_TONE, i as KIND_ICON, k as triggerNodeIndex, l as STATUS_COLOR, m as StatusPill, n as classifyOutput, r as condenseText, t as NodeOutputBody, u as STATUS_LABEL, w as actionNodeId } from "./node-output-BQr2Dgy5.js";
+import { C as TRIGGER_NODE_ID, E as buildWorkflowGraph, F as shortModel, M as actionPathLabel, N as humanizeIdentifier, O as triggerNodeId, P as parseActionPath, T as branchNodeId, a as NodeMark, d as STATUS_PILL, f as STATUS_TONE, i as KIND_ICON, k as triggerNodeIndex, l as STATUS_COLOR, m as StatusPill, n as classifyOutput, r as condenseText, t as NodeOutputBody, u as STATUS_LABEL, w as actionNodeId } from "./node-output-BdfG5lt4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-YhtQWa5b.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-Cx6SkrNJ.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.131.2",
+  "version": "0.131.4",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -133,8 +133,8 @@
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0",
-    "@tangle-network/brand": "^1.19.2",
-    "@tangle-network/ui": "^11.30.0",
+    "@tangle-network/brand": "^1.19.3",
+    "@tangle-network/ui": "^11.30.1",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
@@ -223,8 +223,8 @@
     "@storybook/react-vite": "^10.6.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "3.0.0",
-    "@tangle-network/brand": "1.19.2",
-    "@tangle-network/ui": "11.30.0",
+    "@tangle-network/brand": "1.19.3",
+    "@tangle-network/ui": "11.30.1",
     "@tanstack/react-query": "^5.104.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",