@tangle-network/sandbox-ui 0.131.1 → 0.131.2

package/dist/assets.d.ts

@@ -237,6 +237,8 @@ interface CopyPreviewProps {
   content: CopyContent;
   className?: string;
 }
+export declare const COPY_PLATFORM_LABEL: Record<CopyPlatform, string>;
+/** Copy as it will read: the channel and its length budget, the headline, the body and its hashtags. */
 export declare function CopyPreview({ content, className }: CopyPreviewProps): import("react").JSX.Element;
 //#endregion
 //#region src/assets/preview/email-preview.d.ts
@@ -246,7 +248,25 @@ interface EmailPreviewProps {
   previewUrl?: string;
   className?: string;
 }
-export declare function EmailPreview({ content, brand, previewUrl, className }: EmailPreviewProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The colours an email body renders in. A brand whose text colour is light
+ * writes on a dark page; any brand colour that would not read on that page
+ * falls back to the page's own ink.
+ */
+export declare function emailPalette(brand: BrandTokens): {
+  scheme: string;
+  paper: "#111218" | "#ffffff";
+  ink: string;
+  accent: string;
+  button: string;
+  buttonText: string;
+  quote: string;
+};
+/**
+ * An email as a reader meets it: who it is from, the subject and the inbox
+ * preview line, then the body on the brand's page and in its typeface.
+ */
+export declare function EmailPreview({ content, brand, previewUrl, className }: EmailPreviewProps): import("react").JSX.Element;
 //#endregion
 //#region src/assets/preview/image-preview.d.ts
 type ImageFormat = "feed" | "story" | "carousel";

package/dist/assets.js

@@ -118,6 +118,283 @@ function ImagePreview({ content, brand, format = "feed", className }) {
 	});
 }
 //#endregion
+//#region src/assets/preview/email-preview.tsx
+/** sRGB relative luminance of a #rgb or #rrggbb colour; null for anything else. */
+function luminance(color) {
+	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
+	if (!hex) return null;
+	const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+	const [r, g, b] = [
+		0,
+		2,
+		4
+	].map((i) => {
+		const channel = parseInt(full.slice(i, i + 2), 16) / 255;
+		return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrast(a, b) {
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+}
+const PAPER = {
+	light: "#ffffff",
+	dark: "#111218"
+};
+const INK = {
+	light: "#16171d",
+	dark: "#f4f4f6"
+};
+/**
+* The colours an email body renders in. A brand whose text colour is light
+* writes on a dark page; any brand colour that would not read on that page
+* falls back to the page's own ink.
+*/
+function emailPalette(brand) {
+	const text = luminance(brand.textColor);
+	const scheme = text !== null && text > .5 ? "dark" : "light";
+	const paper = PAPER[scheme];
+	const paperLum = luminance(paper);
+	const readable = (color, minimum) => {
+		const lum = luminance(color);
+		return lum !== null && contrast(lum, paperLum) >= minimum;
+	};
+	const ink = readable(brand.textColor, 4.5) ? brand.textColor : INK[scheme];
+	const accent = readable(brand.primaryColor, 3) ? brand.primaryColor : ink;
+	const primary = luminance(brand.primaryColor);
+	const buttonText = primary !== null && contrast(primary, 1) < contrast(primary, 0) ? "#111111" : "#ffffff";
+	return {
+		scheme,
+		paper,
+		ink,
+		accent,
+		button: brand.primaryColor,
+		buttonText,
+		quote: brand.accentColor
+	};
+}
+function Button$1({ href, label, palette }) {
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick: (event) => event.preventDefault(),
+		className: "inline-block rounded-md px-5 py-2.5 text-sm font-semibold no-underline",
+		style: {
+			background: palette.button,
+			color: palette.buttonText
+		},
+		children: label
+	});
+}
+function Section({ section, palette }) {
+	const muted = {
+		color: palette.ink,
+		opacity: .72
+	};
+	switch (section.type) {
+		case "hero": return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-3 py-2 text-center",
+			children: [
+				section.imageUrl && /* @__PURE__ */ jsx("img", {
+					src: section.imageUrl,
+					alt: "",
+					className: "w-full rounded-md object-cover"
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold leading-tight tracking-tight",
+					style: { color: palette.accent },
+					children: section.headline
+				}),
+				section.subheadline && /* @__PURE__ */ jsx("p", {
+					className: "text-base leading-relaxed",
+					style: muted,
+					children: section.subheadline
+				}),
+				section.ctaLabel && /* @__PURE__ */ jsx("div", {
+					className: "pt-1",
+					children: /* @__PURE__ */ jsx(Button$1, {
+						href: section.ctaUrl ?? "#",
+						label: section.ctaLabel,
+						palette
+					})
+				})
+			]
+		});
+		case "body": return /* @__PURE__ */ jsx("p", {
+			className: "text-base leading-7 whitespace-pre-wrap",
+			children: section.text
+		});
+		case "feature": return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-4",
+			children: [section.imageUrl && /* @__PURE__ */ jsx("img", {
+				src: section.imageUrl,
+				alt: "",
+				className: "size-16 shrink-0 rounded-md object-cover"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-base font-semibold",
+					children: section.headline
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-sm leading-relaxed",
+					style: muted,
+					children: section.description
+				})]
+			})]
+		});
+		case "testimonial": return /* @__PURE__ */ jsxs("blockquote", {
+			className: "border-l-4 pl-4",
+			style: { borderColor: palette.quote },
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "text-base italic leading-relaxed",
+				children: [
+					"“",
+					section.quote,
+					"”"
+				]
+			}), /* @__PURE__ */ jsxs("footer", {
+				className: "mt-2 text-sm font-medium",
+				style: muted,
+				children: [section.author, section.role ? `, ${section.role}` : ""]
+			})]
+		});
+		case "cta": return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-2 py-2 text-center",
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				href: section.url,
+				label: section.label,
+				palette
+			}), section.subtext && /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				style: muted,
+				children: section.subtext
+			})]
+		});
+		case "divider": return /* @__PURE__ */ jsx("hr", {
+			className: "border-0 border-t",
+			style: {
+				borderColor: palette.ink,
+				opacity: .15
+			}
+		});
+		default: return null;
+	}
+}
+/**
+* An email as a reader meets it: who it is from, the subject and the inbox
+* preview line, then the body on the brand's page and in its typeface.
+*/
+function EmailPreview({ content, brand, previewUrl, className }) {
+	const palette = emailPalette(brand);
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("overflow-hidden rounded-lg border border-border bg-card shadow-sm", className),
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex flex-col gap-1 border-b border-border px-5 py-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
+						style: {
+							background: palette.button,
+							color: palette.buttonText
+						},
+						children: brand.businessName.trim().charAt(0).toUpperCase() || "?"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: brand.businessName
+					})]
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "text-base font-semibold leading-snug",
+					children: content.subject
+				}),
+				content.preheader && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: content.preheader
+				})
+			]
+		}), previewUrl ? /* @__PURE__ */ jsx("iframe", {
+			src: previewUrl,
+			title: "Email preview",
+			sandbox: "allow-same-origin",
+			className: "block h-[480px] w-full bg-white"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "px-5 py-8 sm:px-8",
+			style: {
+				background: palette.paper,
+				color: palette.ink,
+				fontFamily: brand.fontFamily
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "mx-auto flex max-w-[560px] flex-col gap-5",
+				children: content.sections.map((section, index) => /* @__PURE__ */ jsx(Section, {
+					section,
+					palette
+				}, index))
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/assets/preview/copy-preview.tsx
+const PLATFORM_LIMITS = {
+	instagram: 2200,
+	tiktok: 2200,
+	x: 280,
+	linkedin: 3e3,
+	sms: 160,
+	"email-subject": 60
+};
+const COPY_PLATFORM_LABEL = {
+	instagram: "Instagram",
+	tiktok: "TikTok",
+	x: "X",
+	linkedin: "LinkedIn",
+	sms: "SMS",
+	"email-subject": "Email subject"
+};
+/** Copy as it will read: the channel and its length budget, the headline, the body and its hashtags. */
+function CopyPreview({ content, className }) {
+	const limit = PLATFORM_LIMITS[content.platform];
+	const length = content.body.length;
+	const over = limit !== null && length > limit;
+	const near = !over && limit !== null && length >= limit * .9;
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("flex flex-col gap-4 rounded-xl border border-border bg-card p-6 shadow-sm", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					className: "text-xs",
+					children: COPY_PLATFORM_LABEL[content.platform] ?? content.platform
+				}), limit !== null && /* @__PURE__ */ jsxs("span", {
+					className: cn("text-xs tabular-nums", over ? "font-medium text-destructive" : near ? "text-warning" : "text-muted-foreground"),
+					children: [
+						length,
+						" / ",
+						limit,
+						" characters"
+					]
+				})]
+			}),
+			content.headline && /* @__PURE__ */ jsx("h3", {
+				className: "text-xl font-semibold leading-snug tracking-tight",
+				children: content.headline
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-base leading-7 whitespace-pre-wrap [overflow-wrap:anywhere]",
+				children: content.body
+			}),
+			content.hashtags && content.hashtags.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-x-2 gap-y-1 text-sm text-primary",
+				children: content.hashtags.map((tag) => /* @__PURE__ */ jsxs("span", { children: ["#", tag.replace(/^#/, "")] }, tag))
+			})
+		]
+	});
+}
+//#endregion
 //#region src/assets/labels.ts
 /** Reader-facing name for each asset format. */
 const ASSET_FORMAT_LABEL = {
@@ -177,15 +454,46 @@ function Thumbnail({ spec }) {
 	const { format, brand, content } = spec;
 	if (format === "email") {
 		const ec = content;
-		return /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full flex-col gap-1 p-3 text-sm",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "line-clamp-3 font-medium",
-				children: ec.subject
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-xs text-muted-foreground",
-				children: [ec.sections.length, " sections"]
-			})]
+		const palette = emailPalette(brand);
+		const hero = ec.sections.find((section) => section.type === "hero");
+		const body = ec.sections.find((section) => section.type === "body");
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex h-full flex-col p-3",
+			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",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: brand.businessName
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "line-clamp-2 text-sm font-semibold leading-snug",
+							children: ec.subject
+						}),
+						ec.preheader && /* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: ec.preheader
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-1 overflow-hidden px-3 py-2",
+					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",
+						style: { color: palette.accent },
+						children: hero.headline
+					}), body?.type === "body" && /* @__PURE__ */ jsx("div", {
+						className: "line-clamp-4 text-xs leading-relaxed opacity-75",
+						children: body.text
+					})]
+				})]
+			})
 		});
 	}
 	if (format.startsWith("image:")) {
@@ -196,7 +504,7 @@ function Thumbnail({ spec }) {
 			alt: "",
 			loading: "lazy",
 			decoding: "async",
-			className: "h-full w-full object-contain"
+			className: "h-full w-full object-contain p-2"
 		});
 		return /* @__PURE__ */ jsx("div", {
 			className: "h-full overflow-hidden",
@@ -218,7 +526,7 @@ function Thumbnail({ spec }) {
 					alt: "",
 					loading: "lazy",
 					decoding: "async",
-					className: "h-full w-full object-contain"
+					className: "h-full w-full object-contain p-2"
 				}) : /* @__PURE__ */ jsx("div", {
 					className: "flex h-full flex-col gap-1 p-3 text-sm",
 					children: /* @__PURE__ */ jsxs("div", {
@@ -244,14 +552,21 @@ function Thumbnail({ spec }) {
 	if (format.startsWith("copy:")) {
 		const cc = content;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full flex-col gap-1 p-3 text-sm",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "line-clamp-2 font-medium",
-				children: cc.headline
-			}), /* @__PURE__ */ jsx("div", {
-				className: "line-clamp-4 text-xs text-muted-foreground",
-				children: cc.body
-			})]
+			className: "flex h-full flex-col gap-2 overflow-hidden p-4",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "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",
+					children: cc.headline
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "line-clamp-5 text-sm leading-relaxed text-muted-foreground",
+					children: cc.body
+				})
+			]
 		});
 	}
 	return null;
@@ -325,125 +640,6 @@ function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, cl
 	});
 }
 //#endregion
-//#region src/assets/preview/email-preview.tsx
-function EmailPreview({ content, brand, previewUrl, className }) {
-	if (previewUrl) return jsxs("div", {
-		className: cn("flex flex-col gap-1", className),
-		children: [
-			jsx("div", {
-				className: "text-xs text-muted-foreground font-medium truncate",
-				children: content.subject
-			}),
-			content.preheader && jsx("div", {
-				className: "text-xs text-muted-foreground/60 truncate",
-				children: content.preheader
-			}),
-			jsx("iframe", {
-				src: previewUrl,
-				className: "w-full rounded border border-border",
-				style: {
-					height: 480,
-					background: "#fff"
-				},
-				title: "Email preview",
-				sandbox: "allow-same-origin"
-			})
-		]
-	});
-	return jsxs("div", {
-		className: cn("flex flex-col gap-2", className),
-		children: [
-			jsx("div", {
-				className: "text-sm font-semibold truncate",
-				children: content.subject
-			}),
-			content.preheader && jsx("div", {
-				className: "text-xs text-muted-foreground truncate",
-				children: content.preheader
-			}),
-			jsx("div", {
-				className: "rounded border border-border p-4 space-y-3 overflow-y-auto",
-				style: {
-					maxHeight: 480,
-					fontFamily: brand.fontFamily,
-					color: brand.textColor
-				},
-				children: content.sections.map((section, i) => {
-					if (section.type === "hero") return jsxs("div", {
-						className: "text-center py-4 space-y-2",
-						children: [
-							section.imageUrl && jsx("img", {
-								src: section.imageUrl,
-								alt: "",
-								className: "mx-auto max-h-40 object-cover rounded"
-							}),
-							jsx("div", {
-								className: "text-xl font-bold",
-								style: { color: brand.primaryColor },
-								children: section.headline
-							}),
-							section.subheadline && jsx("div", {
-								className: "text-sm text-muted-foreground",
-								children: section.subheadline
-							}),
-							section.ctaLabel && jsx("a", {
-								href: section.ctaUrl ?? "#",
-								className: "inline-block px-4 py-2 rounded text-sm font-medium text-white",
-								style: { background: brand.primaryColor },
-								children: section.ctaLabel
-							})
-						]
-					}, i);
-					if (section.type === "body") return jsx("p", {
-						className: "text-sm leading-relaxed whitespace-pre-wrap",
-						children: section.text
-					}, i);
-					if (section.type === "feature") return jsxs("div", {
-						className: "flex gap-3 items-start",
-						children: [section.imageUrl && jsx("img", {
-							src: section.imageUrl,
-							alt: "",
-							className: "w-16 h-16 object-cover rounded shrink-0"
-						}), jsxs("div", { children: [jsx("div", {
-							className: "text-sm font-semibold",
-							children: section.headline
-						}), jsx("div", {
-							className: "text-xs text-muted-foreground mt-0.5",
-							children: section.description
-						})] })]
-					}, i);
-					if (section.type === "testimonial") return jsxs("blockquote", {
-						className: "border-l-2 pl-3 italic text-sm text-muted-foreground",
-						style: { borderColor: brand.accentColor },
-						children: [jsxs("p", { children: [
-							"\"",
-							section.quote,
-							"\""
-						] }), jsxs("footer", {
-							className: "mt-1 text-xs not-italic font-medium",
-							children: [section.author, section.role ? `, ${section.role}` : ""]
-						})]
-					}, i);
-					if (section.type === "cta") return jsxs("div", {
-						className: "text-center py-3 space-y-1",
-						children: [jsx("a", {
-							href: section.url,
-							className: "inline-block px-5 py-2.5 rounded font-medium text-white text-sm",
-							style: { background: brand.primaryColor },
-							children: section.label
-						}), section.subtext && jsx("p", {
-							className: "text-xs text-muted-foreground",
-							children: section.subtext
-						})]
-					}, i);
-					if (section.type === "divider") return jsx("hr", { className: "border-border" }, i);
-					return null;
-				})
-			})
-		]
-	});
-}
-//#endregion
 //#region src/assets/preview/video-preview.tsx
 function VideoPreview({ content, brand, onRenderRequest, isRendering, className }) {
 	if (content.renderedUrl) return /* @__PURE__ */ jsx("div", {
@@ -534,64 +730,6 @@ function VideoPreview({ content, brand, onRenderRequest, isRendering, className
 	});
 }
 //#endregion
-//#region src/assets/preview/copy-preview.tsx
-const PLATFORM_LIMITS = {
-	instagram: 2200,
-	tiktok: 2200,
-	x: 280,
-	linkedin: 3e3,
-	sms: 160,
-	"email-subject": 60
-};
-const PLATFORM_LABELS = {
-	instagram: "Instagram",
-	tiktok: "TikTok",
-	x: "X / Twitter",
-	linkedin: "LinkedIn",
-	sms: "SMS",
-	"email-subject": "Email Subject"
-};
-function CopyPreview({ content, className }) {
-	const limit = PLATFORM_LIMITS[content.platform];
-	const bodyLen = content.body.length;
-	const isOverLimit = limit !== null && bodyLen > limit;
-	const warningThreshold = limit !== null ? limit * .9 : null;
-	const isNearLimit = !isOverLimit && warningThreshold !== null && bodyLen >= warningThreshold;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col gap-2", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-xs font-medium text-muted-foreground",
-				children: PLATFORM_LABELS[content.platform]
-			}), limit !== null && /* @__PURE__ */ jsxs("span", {
-				className: cn("text-xs tabular-nums", isOverLimit ? "text-destructive font-medium" : isNearLimit ? "text-warning" : "text-muted-foreground"),
-				children: [
-					bodyLen,
-					" / ",
-					limit
-				]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "rounded border border-border p-3 space-y-2 bg-card",
-			children: [
-				content.headline && /* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold",
-					children: content.headline
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "text-sm whitespace-pre-wrap leading-relaxed",
-					children: content.body
-				}),
-				content.hashtags && content.hashtags.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "text-sm text-blue-500 flex flex-wrap gap-1",
-					children: content.hashtags.map((tag) => /* @__PURE__ */ jsxs("span", { children: ["#", tag] }, tag))
-				})
-			]
-		})]
-	});
-}
-//#endregion
 //#region src/assets/asset-editor.tsx
 function BrandPanel({ brand, onChange }) {
 	const [open, setOpen] = React$1.useState(false);
@@ -1126,4 +1264,4 @@ function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit
 	});
 }
 //#endregion
-export { ASSET_FORMAT_LABEL, ASSET_STATUS_LABEL, ApprovalQueue, AssetCard, AssetEditor, CopyPreview, EmailPreview, ImagePreview, VideoPreview, imageOnlyUrl, videoPosterUrl };
+export { ASSET_FORMAT_LABEL, ASSET_STATUS_LABEL, ApprovalQueue, AssetCard, AssetEditor, COPY_PLATFORM_LABEL, CopyPreview, EmailPreview, ImagePreview, VideoPreview, emailPalette, imageOnlyUrl, videoPosterUrl };

package/dist/globals.css

@@ -1007,9 +1007,6 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-40 {
-    max-height: calc(var(--spacing) * 40);
-  }
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
@@ -2184,9 +2181,9 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 0px;
   }
-  .border-l-2 {
+  .border-l-4 {
     border-left-style: var(--tw-border-style);
-    border-left-width: 2px;
+    border-left-width: 4px;
   }
   .border-dashed {
     --tw-border-style: dashed;
@@ -3747,9 +3744,6 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
-  .text-blue-500 {
-    color: var(--color-blue-500);
-  }
   .text-border {
     color: hsl(var(--border));
   }
@@ -3894,13 +3888,13 @@
   .italic {
     font-style: italic;
   }
-  .not-italic {
-    font-style: normal;
-  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .no-underline {
+    text-decoration-line: none;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -5376,6 +5370,9 @@
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
+    .sm\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
     .sm\:py-1 {
       padding-block: var(--spacing);
     }

package/dist/styles.css

@@ -1007,9 +1007,6 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-40 {
-    max-height: calc(var(--spacing) * 40);
-  }
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
@@ -2184,9 +2181,9 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 0px;
   }
-  .border-l-2 {
+  .border-l-4 {
     border-left-style: var(--tw-border-style);
-    border-left-width: 2px;
+    border-left-width: 4px;
   }
   .border-dashed {
     --tw-border-style: dashed;
@@ -3747,9 +3744,6 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
-  .text-blue-500 {
-    color: var(--color-blue-500);
-  }
   .text-border {
     color: hsl(var(--border));
   }
@@ -3894,13 +3888,13 @@
   .italic {
     font-style: italic;
   }
-  .not-italic {
-    font-style: normal;
-  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .no-underline {
+    text-decoration-line: none;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -5376,6 +5370,9 @@
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
+    .sm\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
     .sm\:py-1 {
       padding-block: var(--spacing);
     }

package/package.json

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