@tangle-network/sandbox-ui 0.130.1 → 0.131.0

package/dist/assets.d.ts

@@ -189,11 +189,13 @@ interface ApprovalQueueProps {
   onSave?: (spec: AssetSpec) => void;
   onRevisionRequest?: (id: string, instruction: string) => void;
   onRenderRequest?: (id: string) => void;
+  /** Opens one asset's detail view, with the ids the queue shows, in order, for previous and next. */
+  onOpen?: (id: string, visibleIds: string[]) => void;
   renderingIds?: Set<string>;
   previewUrls?: Record<string, string>;
   className?: string;
 }
-export declare function ApprovalQueue({ assets, variantCounts, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, renderingIds, previewUrls, className }: ApprovalQueueProps): React$1.JSX.Element;
+export declare function ApprovalQueue({ assets, variantCounts, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, onOpen, renderingIds, previewUrls, className }: ApprovalQueueProps): React$1.JSX.Element;
 //#endregion
 //#region src/assets/asset-card.d.ts
 interface AssetCardProps {
@@ -202,9 +204,15 @@ interface AssetCardProps {
   onApprove?: (id: string) => void;
   onReject?: (id: string) => void;
   onEdit?: (id: string) => void;
+  /** Opens the asset's detail view. When set, the thumbnail and card body are one click target. */
+  onOpen?: (id: string) => void;
   className?: string;
 }
-export declare function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }: AssetCardProps): import("react").JSX.Element;
+/** The URL of an image slide that is one picture with nothing layered on it. */
+export declare function imageOnlyUrl(content: ImageContent): string | null;
+/** The still frame a video asset carries: its first image scene or image slide. */
+export declare function videoPosterUrl(content: VideoContent): string | null;
+export declare function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, className }: AssetCardProps): import("react").JSX.Element;
 //#endregion
 //#region src/assets/asset-editor.d.ts
 interface AssetEditorProps {
@@ -218,6 +226,12 @@ interface AssetEditorProps {
 }
 export declare function AssetEditor({ spec, previewUrl, isRendering, onSave, onRenderRequest, onRevisionRequest, className }: AssetEditorProps): React$1.JSX.Element;
 //#endregion
+//#region src/assets/labels.d.ts
+/** Reader-facing name for each asset format. */
+export declare const ASSET_FORMAT_LABEL: Record<AssetFormat, string>;
+/** Reader-facing name for each review status. */
+export declare const ASSET_STATUS_LABEL: Record<AssetStatus, string>;
+//#endregion
 //#region src/assets/preview/copy-preview.d.ts
 interface CopyPreviewProps {
   content: CopyContent;

package/dist/assets.js

@@ -3,7 +3,7 @@ import { Badge, Button, Input, Label, Textarea } from "@tangle-network/ui/primit
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Fragment as Fragment$1 } from "react";
-import { Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, Film, GitBranch, Loader2, MessageSquare, Pencil, Play, Save, Search, X } from "lucide-react";
+import { Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, Film, GitBranch, Loader2, Maximize2, MessageSquare, Pencil, Play, Save, Search, X } from "lucide-react";
 //#region src/assets/preview/image-preview.tsx
 const ASPECT = {
 	feed: "aspect-square",
@@ -118,6 +118,29 @@ function ImagePreview({ content, brand, format = "feed", className }) {
 	});
 }
 //#endregion
+//#region src/assets/labels.ts
+/** Reader-facing name for each asset format. */
+const ASSET_FORMAT_LABEL = {
+	email: "Email",
+	"image:feed": "Feed image",
+	"image:story": "Story",
+	"image:carousel": "Carousel",
+	"video:reel": "Reel",
+	"video:feed": "Feed video",
+	"copy:caption": "Caption",
+	"copy:headline": "Headline",
+	"copy:sms": "SMS"
+};
+/** Reader-facing name for each review status. */
+const ASSET_STATUS_LABEL = {
+	draft: "Draft",
+	pending_review: "Pending review",
+	approved: "Approved",
+	rejected: "Rejected",
+	scheduled: "Scheduled",
+	published: "Published"
+};
+//#endregion
 //#region src/assets/asset-card.tsx
 const STATUS_VARIANT = {
 	draft: "secondary",
@@ -127,111 +150,173 @@ const STATUS_VARIANT = {
 	scheduled: "secondary",
 	published: "default"
 };
-const STATUS_LABEL = {
-	draft: "Draft",
-	pending_review: "Review",
-	approved: "Approved",
-	rejected: "Rejected",
-	scheduled: "Scheduled",
-	published: "Published"
-};
+/** The URL of an image slide that is one picture with nothing layered on it. */
+function imageOnlyUrl(content) {
+	const slide = content.slides[0];
+	return slide && slide.layers.length === 0 && slide.background.type === "image" ? slide.background.url : null;
+}
+/** The still frame a video asset carries: its first image scene or image slide. */
+function videoPosterUrl(content) {
+	for (const scene of content.scenes) {
+		if (scene.type === "image-reveal") return scene.imageUrl;
+		if (scene.type === "slide" && scene.slide.background.type === "image") return scene.slide.background.url;
+	}
+	return null;
+}
+function formatDuration(seconds) {
+	const whole = Math.max(0, Math.round(seconds));
+	return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
+}
+/** A short phrase that tells one asset from another of the same format. */
+function assetSummary(spec) {
+	if (spec.format === "email") return spec.content.subject || null;
+	if (spec.format.startsWith("copy:")) return spec.content.headline || null;
+	return null;
+}
 function Thumbnail({ spec }) {
 	const { format, brand, content } = spec;
 	if (format === "email") {
 		const ec = content;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "p-2 text-xs space-y-0.5",
+			className: "flex h-full flex-col gap-1 p-3 text-sm",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "font-medium truncate",
+				className: "line-clamp-3 font-medium",
 				children: ec.subject
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground truncate text-[10px]",
+				className: "text-xs text-muted-foreground",
 				children: [ec.sections.length, " sections"]
 			})]
 		});
 	}
-	if (format.startsWith("image:")) return /* @__PURE__ */ jsx("div", {
-		className: "overflow-hidden rounded",
-		style: { maxHeight: 120 },
-		children: /* @__PURE__ */ jsx(ImagePreview, {
-			content,
-			brand,
-			format: format === "image:story" ? "story" : "feed"
-		})
-	});
+	if (format.startsWith("image:")) {
+		const ic = content;
+		const url = imageOnlyUrl(ic);
+		if (url) return /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt: "",
+			loading: "lazy",
+			decoding: "async",
+			className: "h-full w-full object-contain"
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "h-full overflow-hidden",
+			children: /* @__PURE__ */ jsx(ImagePreview, {
+				content: ic,
+				brand,
+				format: format === "image:story" ? "story" : "feed"
+			})
+		});
+	}
 	if (format.startsWith("video:")) {
 		const vc = content;
+		const poster = videoPosterUrl(vc);
 		return /* @__PURE__ */ jsxs("div", {
-			className: "p-2 text-xs space-y-0.5",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "font-medium",
-				children: [vc.scenes.length, " scenes"]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground",
-				children: [vc.durationSeconds, "s video"]
-			})]
+			className: "relative h-full w-full",
+			children: [
+				poster ? /* @__PURE__ */ jsx("img", {
+					src: poster,
+					alt: "",
+					loading: "lazy",
+					decoding: "async",
+					className: "h-full w-full object-contain"
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex h-full flex-col gap-1 p-3 text-sm",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "font-medium",
+						children: [vc.scenes.length, " scenes"]
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute top-1/2 left-1/2 flex size-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white",
+					children: /* @__PURE__ */ jsx(Play, {
+						size: 18,
+						className: "translate-x-px",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute right-2 bottom-2 rounded bg-black/70 px-1.5 py-0.5 text-xs text-white tabular-nums",
+					children: formatDuration(vc.durationSeconds)
+				})
+			]
 		});
 	}
 	if (format.startsWith("copy:")) {
 		const cc = content;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "p-2 text-xs truncate space-y-0.5",
+			className: "flex h-full flex-col gap-1 p-3 text-sm",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "font-medium truncate",
+				className: "line-clamp-2 font-medium",
 				children: cc.headline
 			}), /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground line-clamp-2 text-[10px]",
+				className: "line-clamp-4 text-xs text-muted-foreground",
 				children: cc.body
 			})]
 		});
 	}
 	return null;
 }
-function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }) {
+function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, className }) {
+	const formatLabel = ASSET_FORMAT_LABEL[spec.format] ?? spec.format;
+	const statusLabel = ASSET_STATUS_LABEL[spec.status] ?? spec.status;
+	const summary = assetSummary(spec);
+	const hasActions = Boolean(onEdit || spec.status === "pending_review" && (onReject || onApprove));
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("rounded-lg border border-border bg-card flex flex-col overflow-hidden hover:border-border/80 transition-colors", className),
+		"data-asset-id": spec.id,
+		className: cn("group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-[border-color,box-shadow]", onOpen && "hover:border-primary/60 hover:shadow-md", className),
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "min-h-[80px] bg-muted/30",
-				children: /* @__PURE__ */ jsx(Thumbnail, { spec })
+			onOpen && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-asset-open": "",
+				onClick: () => onOpen(spec.id),
+				"aria-label": `Open ${formatLabel.toLowerCase()}${summary ? `: ${summary}` : ""}, ${statusLabel.toLowerCase()}`,
+				className: "absolute inset-0 z-[1] cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "px-2 py-1.5 flex items-center gap-1.5",
+				className: "relative aspect-square overflow-hidden bg-muted/40",
+				children: [/* @__PURE__ */ jsx(Thumbnail, { spec }), onOpen && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "pointer-events-none absolute top-2 right-2 flex size-7 items-center justify-center rounded-md bg-background/90 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+					children: /* @__PURE__ */ jsx(Maximize2, { size: 14 })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-2.5 py-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-[10px] text-muted-foreground flex-1 truncate",
-						children: spec.format
+						className: "min-w-0 flex-1 truncate text-xs text-muted-foreground",
+						children: formatLabel
 					}),
 					/* @__PURE__ */ jsx(Badge, {
 						variant: STATUS_VARIANT[spec.status],
-						className: "text-[10px] h-4 px-1.5",
-						children: STATUS_LABEL[spec.status]
+						className: "shrink-0 text-xs",
+						children: statusLabel
 					}),
 					variantCount !== void 0 && variantCount > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-0.5 text-[10px] text-muted-foreground",
-						children: [/* @__PURE__ */ jsx(GitBranch, { size: 10 }), variantCount]
+						className: "flex shrink-0 items-center gap-0.5 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsx(GitBranch, { size: 12 }), variantCount]
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex border-t border-border",
+			hasActions && /* @__PURE__ */ jsxs("div", {
+				className: "relative z-[2] flex border-t border-border bg-card",
 				children: [
 					onEdit && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => onEdit(spec.id),
-						className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+						className: "flex flex-1 items-center justify-center gap-1 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
 						children: [/* @__PURE__ */ jsx(Pencil, { size: 12 }), "Edit"]
 					}),
 					onReject && spec.status === "pending_review" && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => onReject(spec.id),
-						className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors border-l border-border",
+						className: "flex flex-1 items-center justify-center gap-1 border-l border-border py-2 text-xs text-muted-foreground transition-colors hover:bg-destructive/5 hover:text-destructive",
 						children: [/* @__PURE__ */ jsx(X, { size: 12 }), "Reject"]
 					}),
 					onApprove && spec.status === "pending_review" && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => onApprove(spec.id),
-						className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-green-600 hover:bg-green-600/5 transition-colors border-l border-border",
+						className: "flex flex-1 items-center justify-center gap-1 border-l border-border py-2 text-xs text-muted-foreground transition-colors hover:bg-green-600/5 hover:text-green-600",
 						children: [/* @__PURE__ */ jsx(Check, { size: 12 }), "Approve"]
 					})
 				]
@@ -886,7 +971,7 @@ const STATUS_OPTIONS = [
 		label: "Published"
 	}
 ];
-function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, renderingIds = /* @__PURE__ */ new Set(), previewUrls = {}, className }) {
+function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, onOpen, renderingIds = /* @__PURE__ */ new Set(), previewUrls = {}, className }) {
 	const [search, setSearch] = React$1.useState("");
 	const [formatFilter, setFormatFilter] = React$1.useState("all");
 	const [statusFilter, setStatusFilter] = React$1.useState("pending_review");
@@ -1013,10 +1098,11 @@ function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit
 				variantCount: variantCounts[a.id],
 				onApprove,
 				onReject,
-				onEdit: () => setEditingId(a.id)
+				onEdit: () => setEditingId(a.id),
+				onOpen: onOpen ? (id) => onOpen(id, filtered.map((asset) => asset.id)) : void 0
 			}, a.id))
 		})]
 	});
 }
 //#endregion
-export { ApprovalQueue, AssetCard, AssetEditor, CopyPreview, EmailPreview, ImagePreview, VideoPreview };
+export { ASSET_FORMAT_LABEL, ASSET_STATUS_LABEL, ApprovalQueue, AssetCard, AssetEditor, CopyPreview, EmailPreview, ImagePreview, VideoPreview, imageOnlyUrl, videoPosterUrl };

package/dist/globals.css

@@ -435,6 +435,12 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[1\] {
+    z-index: 1;
+  }
+  .z-\[2\] {
+    z-index: 2;
+  }
   .z-\[70\] {
     z-index: 70;
   }
@@ -736,6 +742,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1680,6 +1690,10 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2659,6 +2673,12 @@
       background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
     }
   }
+  .bg-background\/90 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 90%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -2674,6 +2694,18 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+  .bg-black\/70 {
+    background-color: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4193,6 +4225,9 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 100%;
+  }
   @media (hover: hover) {
     .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -4367,14 +4402,6 @@
         border-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
-    .hover\:border-border\/80:hover {
-      border-color: hsl(var(--border));
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-border\/80:hover {
-        border-color: color-mix(in oklab, hsl(var(--border)) 80%, transparent);
-      }
-    }
     .hover\:border-destructive\/30:hover {
       border-color: hsl(var(--destructive));
     }
@@ -4434,6 +4461,14 @@
         border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
       }
     }
+    .hover\:border-primary\/60:hover {
+      border-color: hsl(var(--primary));
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/60:hover {
+        border-color: color-mix(in oklab, hsl(var(--primary)) 60%, transparent);
+      }
+    }
     .hover\:\!bg-primary:hover {
       background-color: hsl(var(--primary)) !important;
     }
@@ -4738,6 +4773,10 @@
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
     .hover\:shadow-sm:hover {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/dist/styles.css

@@ -435,6 +435,12 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[1\] {
+    z-index: 1;
+  }
+  .z-\[2\] {
+    z-index: 2;
+  }
   .z-\[70\] {
     z-index: 70;
   }
@@ -736,6 +742,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -1680,6 +1690,10 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2659,6 +2673,12 @@
       background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
     }
   }
+  .bg-background\/90 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 90%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -2674,6 +2694,18 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+  .bg-black\/70 {
+    background-color: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4193,6 +4225,9 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 100%;
+  }
   @media (hover: hover) {
     .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -4367,14 +4402,6 @@
         border-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
-    .hover\:border-border\/80:hover {
-      border-color: hsl(var(--border));
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-border\/80:hover {
-        border-color: color-mix(in oklab, hsl(var(--border)) 80%, transparent);
-      }
-    }
     .hover\:border-destructive\/30:hover {
       border-color: hsl(var(--destructive));
     }
@@ -4434,6 +4461,14 @@
         border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
       }
     }
+    .hover\:border-primary\/60:hover {
+      border-color: hsl(var(--primary));
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/60:hover {
+        border-color: color-mix(in oklab, hsl(var(--primary)) 60%, transparent);
+      }
+    }
     .hover\:\!bg-primary:hover {
       background-color: hsl(var(--primary)) !important;
     }
@@ -4738,6 +4773,10 @@
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
     .hover\:shadow-sm:hover {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/package.json

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