sanity-plugin-media 6.2.0 → 6.3.1

package/dist/index.js

@@ -2259,9 +2259,9 @@ const ButtonAssetCopy = (t0) => {
 function getSchemeColor(scheme, colorKey) {
 	return SCHEME_COLORS[colorKey]?.[scheme];
 }
-const Image$1 = styled.img.attrs({ crossOrigin: "anonymous" }).withConfig({
+const Image$1 = styled.img.withConfig({
 	displayName: "Image",
-	componentId: "sc-ms5kkw-0"
+	componentId: "sc-gwtcwh-0"
 })`--checkerboard-color:${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};display:block;width:100%;height:100%;object-fit:contain;${(props) => props.$showCheckerboard && css`background-image:linear-gradient(45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--checkerboard-color) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;`}`, StyledErrorOutlineIcon = /* @__PURE__ */ styled(ErrorOutlineIcon).withConfig({
 	displayName: "StyledErrorOutlineIcon",
 	componentId: "sc-3yqi4g-0"
@@ -2502,7 +2502,7 @@ const Image$1 = styled.img.attrs({ crossOrigin: "anonymous" }).withConfig({
 			isLoading: creating,
 			isMulti: !0,
 			name,
-			noOptionsMessage: _temp3$11,
+			noOptionsMessage: _temp3$13,
 			onBlur,
 			onChange,
 			onCreateOption: onCreateTag,
@@ -2531,7 +2531,7 @@ function _temp$37(state) {
 function _temp2$23(state_0) {
 	return state_0.tags.fetching;
 }
-function _temp3$11() {
+function _temp3$13() {
 	return "No tags";
 }
 const FormFieldInputText = (props) => {
@@ -2873,7 +2873,7 @@ const DialogAssetEdit = (props) => {
 				t19 = !1;
 				break bb0;
 			}
-			let isLocaleObj = _temp3$10, fields = [
+			let isLocaleObj = _temp3$12, fields = [
 				currentAsset.title,
 				currentAsset.altText,
 				currentAsset.description,
@@ -2887,7 +2887,7 @@ const DialogAssetEdit = (props) => {
 				t19 = !0;
 				break bb0;
 			}
-			let configuredIds = new Set(locales.map(_temp4$6));
+			let configuredIds = new Set(locales.map(_temp4$7));
 			t19 = fields.some((f_0) => isLocaleObj(f_0) ? Object.keys(f_0).some((k) => !configuredIds.has(k)) : !1);
 		}
 		$[41] = currentAsset, $[42] = locales, $[43] = t19;
@@ -2898,8 +2898,8 @@ const DialogAssetEdit = (props) => {
 		let cleanField = (field_1) => {
 			if (typeof field_1 != "object" || !field_1 || Array.isArray(field_1)) return field_1;
 			let obj_0 = field_1;
-			if (!locales || locales.length === 0) return Object.keys(obj_0).sort().map((k_0) => obj_0[k_0]).find(_temp5$4) || "";
-			let configuredIds_0 = new Set(locales.map(_temp6$2)), cleaned = {};
+			if (!locales || locales.length === 0) return Object.keys(obj_0).sort().map((k_0) => obj_0[k_0]).find(_temp5$5) || "";
+			let configuredIds_0 = new Set(locales.map(_temp6$3)), cleaned = {};
 			for (let [key, val] of Object.entries(obj_0)) configuredIds_0.has(key) && (cleaned[key] = val);
 			return cleaned;
 		};
@@ -3192,16 +3192,16 @@ function _temp2$22(field_0, t0) {
 	let fallback_0 = t0 === void 0 ? "" : t0;
 	return typeof field_0 == "string" ? field_0 : typeof field_0 == "object" && field_0 && Object.values(field_0).find(_temp$36) || fallback_0;
 }
-function _temp3$10(v_0) {
+function _temp3$12(v_0) {
 	return typeof v_0 == "object" && !!v_0 && !Array.isArray(v_0);
 }
-function _temp4$6(l) {
+function _temp4$7(l) {
 	return l.id;
 }
-function _temp5$4(v_1) {
+function _temp5$5(v_1) {
 	return v_1;
 }
-function _temp6$2(l_0) {
+function _temp6$3(l_0) {
 	return l_0.id;
 }
 function _temp7$1(tag) {
@@ -3248,20 +3248,49 @@ const selectCombinedItems = createSelector([
 	return $[4] === downHandler ? (t2 = $[5], t3 = $[6]) : (t2 = () => (window.addEventListener("keydown", downHandler), window.addEventListener("keyup", upHandler), () => {
 		window.removeEventListener("keydown", downHandler), window.removeEventListener("keyup", upHandler);
 	}), t3 = [downHandler, upHandler], $[4] = downHandler, $[5] = t2, $[6] = t3), useEffect(t2, t3), keyPressed;
-}, CardWrapper$2 = styled(Flex).withConfig({
+}, ASSET_DRAG_TYPE = "application/x-sanity-media-assets";
+/**
+* Write the dragged asset ids onto the drag event.
+*/
+function setDragAssetIds(event, assetIds) {
+	event.dataTransfer.setData(ASSET_DRAG_TYPE, JSON.stringify(assetIds)), event.dataTransfer.effectAllowed = "move";
+}
+/**
+* Whether a drag event carries asset ids written by `setDragAssetIds`.
+*
+* During `dragover`, browsers hide the data payload but still expose the type list.
+*/
+function isAssetDrag(event) {
+	return Array.prototype.includes.call(event.dataTransfer.types, ASSET_DRAG_TYPE);
+}
+/**
+* Read the dragged asset ids from a `drop` event. Returns an empty array when the
+* payload is missing or malformed.
+*/
+function getDragAssetIds(event) {
+	let raw = event.dataTransfer.getData(ASSET_DRAG_TYPE);
+	if (!raw) return [];
+	try {
+		let parsed = JSON.parse(raw);
+		return Array.isArray(parsed) ? parsed.filter((id) => typeof id == "string") : [];
+	} catch {
+		return [];
+	}
+}
+const CardWrapper$2 = styled(Flex).withConfig({
 	displayName: "CardWrapper",
-	componentId: "sc-paw993-0"
+	componentId: "sc-15kxr0-0"
 })`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, CardContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "CardContainer",
-	componentId: "sc-paw993-1"
+	componentId: "sc-15kxr0-1"
 })(({ $picked, theme, $updating }) => css`border:1px solid transparent;height:100%;pointer-events:${$updating ? "none" : "auto"};position:relative;transition:all 300ms;user-select:none;width:100%;border:${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};${!$updating && css`@media (hover:hover) and (pointer:fine){&:hover{border:1px solid var(--card-border-color);}}`}`), ContextActionContainer$2 = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "ContextActionContainer",
-	componentId: "sc-paw993-2"
+	componentId: "sc-15kxr0-2"
 })(({ $scheme }) => css`cursor:pointer;height:${32}px;transition:all 300ms;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`), StyledWarningOutlineIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
 	displayName: "StyledWarningOutlineIcon",
-	componentId: "sc-paw993-3"
+	componentId: "sc-15kxr0-3"
 })(({ theme }) => ({ color: theme.sanity.color.spot.red })), CardAsset = (props) => {
-	let $ = c(83), { id, selected, source } = props, scheme = useColorSchemeValue(), toast = useToast(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$35), assetsPicked = useTypedSelector(selectAssetsPicked), t0;
+	let $ = c(89), { id, selected, source } = props, scheme = useColorSchemeValue(), toast = useToast(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$35), assetsPicked = useTypedSelector(selectAssetsPicked), t0;
 	$[0] === id ? t0 = $[1] : (t0 = (state_0) => selectAssetById(state_0, id), $[0] = id, $[1] = t0);
 	let item = useTypedSelector(t0), t1;
 	$[2] === source ? t1 = $[3] : (t1 = (state_1) => {
@@ -3298,6 +3327,9 @@ const selectCombinedItems = createSelector([
 		})) : dispatch(assetsActions.pick({
 			assetId: asset._id,
 			picked: !picked
+		})) : e.ctrlKey || e.metaKey ? dispatch(assetsActions.pick({
+			assetId: asset._id,
+			picked: !picked
 		})) : shiftPressed.current ? dispatch(picked ? assetsActions.pick({
 			assetId: asset._id,
 			picked: !picked
@@ -3320,23 +3352,27 @@ const selectCombinedItems = createSelector([
 			picked: !picked
 		})));
 	}, $[23] = asset._id, $[24] = dispatch, $[25] = handleReplaceAsset, $[26] = isMultiSelect, $[27] = lastPicked, $[28] = onSelect, $[29] = picked, $[30] = selected, $[31] = shiftPressed, $[32] = source, $[33] = t5) : t5 = $[33];
-	let handleContextActionClick = t5, opacityContainer = updating ? .5 : 1, opacityPreview = selected || updating ? .25 : 1, t6 = selected ? "default" : "pointer", t7;
-	$[34] === t6 ? t7 = $[35] : (t7 = {
-		cursor: t6,
+	let handleContextActionClick = t5, draggable = !selected && !updating && source !== "replace-asset", t6;
+	$[34] !== asset._id || $[35] !== assetsPicked || $[36] !== picked ? (t6 = (e_1) => {
+		setDragAssetIds(e_1, picked ? assetsPicked.map(_temp3$11) : [asset._id]);
+	}, $[34] = asset._id, $[35] = assetsPicked, $[36] = picked, $[37] = t6) : t6 = $[37];
+	let handleDragStart = t6, opacityContainer = updating ? .5 : 1, opacityPreview = selected || updating ? .25 : 1, t7 = draggable ? handleDragStart : void 0, t8 = selected ? "default" : "pointer", t9;
+	$[38] === t8 ? t9 = $[39] : (t9 = {
+		cursor: t8,
 		position: "relative"
-	}, $[34] = t6, $[35] = t7);
-	let t8 = `media-asset-card-${asset._id}`, t9;
-	$[36] === opacityPreview ? t9 = $[37] : (t9 = {
+	}, $[38] = t8, $[39] = t9);
+	let t10 = `media-asset-card-${asset._id}`, t11;
+	$[40] === opacityPreview ? t11 = $[41] : (t11 = {
 		height: "100%",
 		opacity: opacityPreview
-	}, $[36] = opacityPreview, $[37] = t9);
-	let t10;
-	$[38] === asset ? t10 = $[39] : (t10 = isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon$1, {
+	}, $[40] = opacityPreview, $[41] = t11);
+	let t12;
+	$[42] === asset ? t12 = $[43] : (t12 = isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon$1, {
 		extension: asset.extension,
 		width: "80px"
-	}), $[38] = asset, $[39] = t10);
-	let t11;
-	$[40] !== asset || $[41] !== isOpaque || $[42] !== scheme ? (t11 = isImageAsset(asset) && /* @__PURE__ */ jsx(Image$1, {
+	}), $[42] = asset, $[43] = t12);
+	let t13;
+	$[44] !== asset || $[45] !== isOpaque || $[46] !== scheme ? (t13 = isImageAsset(asset) && /* @__PURE__ */ jsx(Image$1, {
 		draggable: !1,
 		$scheme: scheme,
 		$showCheckerboard: !isOpaque,
@@ -3348,16 +3384,16 @@ const selectCombinedItems = createSelector([
 			draggable: !1,
 			transition: "opacity 1000ms"
 		}
-	}), $[40] = asset, $[41] = isOpaque, $[42] = scheme, $[43] = t11) : t11 = $[43];
-	let t12;
-	$[44] !== handleAssetClick || $[45] !== t10 || $[46] !== t11 || $[47] !== t8 || $[48] !== t9 ? (t12 = /* @__PURE__ */ jsxs("div", {
-		"data-testid": t8,
+	}), $[44] = asset, $[45] = isOpaque, $[46] = scheme, $[47] = t13) : t13 = $[47];
+	let t14;
+	$[48] !== handleAssetClick || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 ? (t14 = /* @__PURE__ */ jsxs("div", {
+		"data-testid": t10,
 		onClick: handleAssetClick,
-		style: t9,
-		children: [t10, t11]
-	}), $[44] = handleAssetClick, $[45] = t10, $[46] = t11, $[47] = t8, $[48] = t9, $[49] = t12) : t12 = $[49];
-	let t13;
-	$[50] !== opacityContainer || $[51] !== selected || $[52] !== updating ? (t13 = selected && !updating && /* @__PURE__ */ jsx(Flex, {
+		style: t11,
+		children: [t12, t13]
+	}), $[48] = handleAssetClick, $[49] = t10, $[50] = t11, $[51] = t12, $[52] = t13, $[53] = t14) : t14 = $[53];
+	let t15;
+	$[54] !== opacityContainer || $[55] !== selected || $[56] !== updating ? (t15 = selected && !updating && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: {
@@ -3372,9 +3408,9 @@ const selectCombinedItems = createSelector([
 			size: 2,
 			children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {})
 		})
-	}), $[50] = opacityContainer, $[51] = selected, $[52] = updating, $[53] = t13) : t13 = $[53];
-	let t14;
-	$[54] === updating ? t14 = $[55] : (t14 = updating && /* @__PURE__ */ jsx(Flex, {
+	}), $[54] = opacityContainer, $[55] = selected, $[56] = updating, $[57] = t15) : t15 = $[57];
+	let t16;
+	$[58] === updating ? t16 = $[59] : (t16 = updating && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: {
@@ -3385,21 +3421,21 @@ const selectCombinedItems = createSelector([
 			width: "100%"
 		},
 		children: /* @__PURE__ */ jsx(Spinner, {})
-	}), $[54] = updating, $[55] = t14);
-	let t15;
-	$[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t7 ? (t15 = /* @__PURE__ */ jsxs(Box, {
+	}), $[58] = updating, $[59] = t16);
+	let t17;
+	$[60] !== t14 || $[61] !== t15 || $[62] !== t16 || $[63] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Box, {
 		flex: 1,
-		style: t7,
+		style: t9,
 		children: [
-			t12,
-			t13,
-			t14
+			t14,
+			t15,
+			t16
 		]
-	}), $[56] = t12, $[57] = t13, $[58] = t14, $[59] = t7, $[60] = t15) : t15 = $[60];
-	let t16;
-	$[61] === opacityContainer ? t16 = $[62] : (t16 = { opacity: opacityContainer }, $[61] = opacityContainer, $[62] = t16);
-	let t17;
-	$[63] !== isMultiSelect || $[64] !== onSelect || $[65] !== picked ? (t17 = onSelect && !isMultiSelect ? /* @__PURE__ */ jsx(EditIcon, { style: {
+	}), $[60] = t14, $[61] = t15, $[62] = t16, $[63] = t9, $[64] = t17) : t17 = $[64];
+	let t18;
+	$[65] === opacityContainer ? t18 = $[66] : (t18 = { opacity: opacityContainer }, $[65] = opacityContainer, $[66] = t18);
+	let t19;
+	$[67] !== isMultiSelect || $[68] !== onSelect || $[69] !== picked ? (t19 = onSelect && !isMultiSelect ? /* @__PURE__ */ jsx(EditIcon, { style: {
 		flexShrink: 0,
 		opacity: .5
 	} }) : /* @__PURE__ */ jsx(Checkbox, {
@@ -3410,9 +3446,9 @@ const selectCombinedItems = createSelector([
 			pointerEvents: "none",
 			transform: "scale(0.8)"
 		}
-	}), $[63] = isMultiSelect, $[64] = onSelect, $[65] = picked, $[66] = t17) : t17 = $[66];
-	let t18;
-	$[67] === asset.originalFilename ? t18 = $[68] : (t18 = /* @__PURE__ */ jsx(Box, {
+	}), $[67] = isMultiSelect, $[68] = onSelect, $[69] = picked, $[70] = t19) : t19 = $[70];
+	let t20;
+	$[71] === asset.originalFilename ? t20 = $[72] : (t20 = /* @__PURE__ */ jsx(Box, {
 		marginLeft: 2,
 		children: /* @__PURE__ */ jsx(Text, {
 			muted: !0,
@@ -3420,18 +3456,18 @@ const selectCombinedItems = createSelector([
 			textOverflow: "ellipsis",
 			children: asset.originalFilename
 		})
-	}), $[67] = asset.originalFilename, $[68] = t18);
-	let t19;
-	$[69] !== handleContextActionClick || $[70] !== scheme || $[71] !== t16 || $[72] !== t17 || $[73] !== t18 ? (t19 = /* @__PURE__ */ jsxs(ContextActionContainer$2, {
+	}), $[71] = asset.originalFilename, $[72] = t20);
+	let t21;
+	$[73] !== handleContextActionClick || $[74] !== scheme || $[75] !== t18 || $[76] !== t19 || $[77] !== t20 ? (t21 = /* @__PURE__ */ jsxs(ContextActionContainer$2, {
 		align: "center",
 		onClick: handleContextActionClick,
 		paddingX: 1,
 		$scheme: scheme,
-		style: t16,
-		children: [t17, t18]
-	}), $[69] = handleContextActionClick, $[70] = scheme, $[71] = t16, $[72] = t17, $[73] = t18, $[74] = t19) : t19 = $[74];
-	let t20;
-	$[75] === error ? t20 = $[76] : (t20 = error && /* @__PURE__ */ jsx(Box, {
+		style: t18,
+		children: [t19, t20]
+	}), $[73] = handleContextActionClick, $[74] = scheme, $[75] = t18, $[76] = t19, $[77] = t20, $[78] = t21) : t21 = $[78];
+	let t22;
+	$[79] === error ? t22 = $[80] : (t22 = error && /* @__PURE__ */ jsx(Box, {
 		padding: 3,
 		style: {
 			position: "absolute",
@@ -3455,21 +3491,23 @@ const selectCombinedItems = createSelector([
 				children: /* @__PURE__ */ jsx(StyledWarningOutlineIcon, { color: "critical" })
 			})
 		})
-	}), $[75] = error, $[76] = t20);
-	let t21;
-	return $[77] !== item.updating || $[78] !== picked || $[79] !== t15 || $[80] !== t19 || $[81] !== t20 ? (t21 = /* @__PURE__ */ jsx(CardWrapper$2, {
+	}), $[79] = error, $[80] = t22);
+	let t23;
+	return $[81] !== draggable || $[82] !== item.updating || $[83] !== picked || $[84] !== t17 || $[85] !== t21 || $[86] !== t22 || $[87] !== t7 ? (t23 = /* @__PURE__ */ jsx(CardWrapper$2, {
 		padding: 1,
 		children: /* @__PURE__ */ jsxs(CardContainer, {
 			direction: "column",
+			draggable,
+			onDragStart: t7,
 			$picked: picked,
 			$updating: item.updating,
 			children: [
-				t15,
-				t19,
-				t20
+				t17,
+				t21,
+				t22
 			]
 		})
-	}), $[77] = item.updating, $[78] = picked, $[79] = t15, $[80] = t19, $[81] = t20, $[82] = t21) : t21 = $[82], t21;
+	}), $[81] = draggable, $[82] = item.updating, $[83] = picked, $[84] = t17, $[85] = t21, $[86] = t22, $[87] = t7, $[88] = t23) : t23 = $[88], t23;
 };
 var CardAsset_default = memo(CardAsset);
 function _temp$35(state) {
@@ -3478,6 +3516,9 @@ function _temp$35(state) {
 function _temp2$21(d) {
 	return d.type === "dialogAllAssets";
 }
+function _temp3$11(pickedItem) {
+	return pickedItem.asset._id;
+}
 const CardWrapper$1 = styled(Flex).withConfig({
 	displayName: "CardWrapper",
 	componentId: "sc-52xpdk-0"
@@ -3968,7 +4009,7 @@ function omitFacetId(facet) {
 	return withoutId;
 }
 const ReplaceAssetsOverview = () => {
-	let $ = c(36), dispatch = useDispatch(), store = useStore(), combinedItems = useTypedSelector(selectCombinedItems), assetsById = useTypedSelector(_temp$33), fetchCount = useTypedSelector(_temp2$19), fetching = useTypedSelector(_temp3$9), fetchingError = useTypedSelector(_temp4$5), pageSize = useTypedSelector(_temp5$3), searchQuery = useTypedSelector(_temp6$1), searchFacets = useTypedSelector(_temp7), currentFolderId = useTypedSelector(_temp8), currentFolderUnfiled = useTypedSelector(_temp9), assetToReplaceId = useTypedSelector(_temp11), savedBrowserStateRef = useRef(null), t0;
+	let $ = c(36), dispatch = useDispatch(), store = useStore(), combinedItems = useTypedSelector(selectCombinedItems), assetsById = useTypedSelector(_temp$33), fetchCount = useTypedSelector(_temp2$19), fetching = useTypedSelector(_temp3$10), fetchingError = useTypedSelector(_temp4$6), pageSize = useTypedSelector(_temp5$4), searchQuery = useTypedSelector(_temp6$2), searchFacets = useTypedSelector(_temp7), currentFolderId = useTypedSelector(_temp8), currentFolderUnfiled = useTypedSelector(_temp9), assetToReplaceId = useTypedSelector(_temp11), savedBrowserStateRef = useRef(null), t0;
 	$[0] !== currentFolderId || $[1] !== currentFolderUnfiled || $[2] !== searchFacets || $[3] !== searchQuery.length ? (t0 = () => searchQuery.length > 0 || searchFacets.length > 0 || !!currentFolderId || currentFolderUnfiled, $[0] = currentFolderId, $[1] = currentFolderUnfiled, $[2] = searchFacets, $[3] = searchQuery.length, $[4] = t0) : t0 = $[4];
 	let [awaitingRefetch, setAwaitingRefetch] = useState(t0), t1, t2;
 	$[5] !== dispatch || $[6] !== store ? (t1 = () => {
@@ -4055,16 +4096,16 @@ function _temp$33(state) {
 function _temp2$19(state_0) {
 	return state_0.assets.fetchCount;
 }
-function _temp3$9(state_1) {
+function _temp3$10(state_1) {
 	return state_1.assets.fetching;
 }
-function _temp4$5(state_2) {
+function _temp4$6(state_2) {
 	return state_2.assets.fetchingError;
 }
-function _temp5$3(state_3) {
+function _temp5$4(state_3) {
 	return state_3.assets.pageSize;
 }
-function _temp6$1(state_4) {
+function _temp6$2(state_4) {
 	return state_4.search.query;
 }
 function _temp7(state_5) {
@@ -4546,7 +4587,10 @@ const getExpandedIdSet = (folderId, byId) => {
 		expanded.add(cursor), cursor = node.parentId;
 	}
 	return expanded;
-}, FolderHeaderAction = (t0) => {
+}, DropTree = styled(Tree).withConfig({
+	displayName: "DropTree",
+	componentId: "sc-0bwz5x-0"
+})`[data-drop-target] > [data-ui='TreeItem__box']{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color);}`, ROOT_DROP_TARGET_ID = "__all-assets", FolderHeaderAction = (t0) => {
 	let $ = c(11), { disabled: t1, icon, onClick, tone: t2, tooltip } = t0, disabled = t1 !== void 0 && t1, tone = t2 === void 0 ? "default" : t2, t3;
 	$[0] === tooltip ? t3 = $[1] : (t3 = /* @__PURE__ */ jsx(Container, {
 		padding: 2,
@@ -4637,140 +4681,191 @@ const getExpandedIdSet = (folderId, byId) => {
 		children: [t5, t7]
 	}), $[9] = t5, $[10] = t7, $[11] = t8) : t8 = $[11], t8;
 }, FolderNode = (t0) => {
-	let $ = c(23), { currentFolderId, expandedIds, node, onSelect } = t0, hasChildren = node.children.length > 0, selected = currentFolderId === node.id, t1;
+	let $ = c(30), { currentFolderId, dropTargetId, expandedIds, getDropTargetHandlers, node, onSelect } = t0, hasChildren = node.children.length > 0, selected = currentFolderId === node.id, isDropTarget = dropTargetId === node.id, t1;
 	$[0] !== expandedIds || $[1] !== node.id ? (t1 = expandedIds.has(node.id), $[0] = expandedIds, $[1] = node.id, $[2] = t1) : t1 = $[2];
-	let t2;
-	$[3] !== node.id || $[4] !== onSelect ? (t2 = () => onSelect(node.id), $[3] = node.id, $[4] = onSelect, $[5] = t2) : t2 = $[5];
-	let t3;
-	$[6] !== node.name || $[7] !== node.totalCount ? (t3 = /* @__PURE__ */ jsx(FolderItemText, {
+	let t2 = node.id, t3;
+	$[3] !== node.id || $[4] !== onSelect ? (t3 = () => onSelect(node.id), $[3] = node.id, $[4] = onSelect, $[5] = t3) : t3 = $[5];
+	let t4 = isDropTarget ? "" : void 0, t5;
+	$[6] !== node.name || $[7] !== node.totalCount ? (t5 = /* @__PURE__ */ jsx(FolderItemText, {
 		name: node.name,
 		totalCount: node.totalCount
-	}), $[6] = node.name, $[7] = node.totalCount, $[8] = t3) : t3 = $[8];
-	let t4 = selected ? "semibold" : "medium", t5;
-	$[9] !== currentFolderId || $[10] !== expandedIds || $[11] !== hasChildren || $[12] !== node.children || $[13] !== onSelect ? (t5 = hasChildren && node.children.map((childNode) => /* @__PURE__ */ jsx(FolderNode, {
+	}), $[6] = node.name, $[7] = node.totalCount, $[8] = t5) : t5 = $[8];
+	let t6 = selected ? "semibold" : "medium", t7;
+	$[9] !== getDropTargetHandlers || $[10] !== node.id ? (t7 = getDropTargetHandlers(node.id), $[9] = getDropTargetHandlers, $[10] = node.id, $[11] = t7) : t7 = $[11];
+	let t8;
+	$[12] !== currentFolderId || $[13] !== dropTargetId || $[14] !== expandedIds || $[15] !== getDropTargetHandlers || $[16] !== hasChildren || $[17] !== node.children || $[18] !== onSelect ? (t8 = hasChildren && node.children.map((childNode) => /* @__PURE__ */ jsx(FolderNode, {
 		currentFolderId,
+		dropTargetId,
 		expandedIds,
+		getDropTargetHandlers,
 		node: childNode,
 		onSelect
-	}, childNode.id)), $[9] = currentFolderId, $[10] = expandedIds, $[11] = hasChildren, $[12] = node.children, $[13] = onSelect, $[14] = t5) : t5 = $[14];
-	let t6;
-	return $[15] !== node.id || $[16] !== selected || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(TreeItem, {
+	}, childNode.id)), $[12] = currentFolderId, $[13] = dropTargetId, $[14] = expandedIds, $[15] = getDropTargetHandlers, $[16] = hasChildren, $[17] = node.children, $[18] = onSelect, $[19] = t8) : t8 = $[19];
+	let t9;
+	return $[20] !== node.id || $[21] !== selected || $[22] !== t1 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8 ? (t9 = /* @__PURE__ */ jsx(TreeItem, {
 		expanded: t1,
-		id: node.id,
-		onClick: t2,
+		id: t2,
+		onClick: t3,
+		"data-drop-target": t4,
 		selected,
-		text: t3,
-		weight: t4,
-		children: t5
-	}), $[15] = node.id, $[16] = selected, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6) : t6 = $[22], t6;
+		text: t5,
+		weight: t6,
+		...t7,
+		children: t8
+	}), $[20] = node.id, $[21] = selected, $[22] = t1, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6, $[27] = t7, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
 }, FolderView = () => {
-	let $ = c(63), dispatch = useDispatch(), currentFolderId = useTypedSelector(_temp$29), byId = useTypedSelector(_temp2$16), canDeleteFolder = useTypedSelector(selectCanDeleteFolder), fetching = useTypedSelector(_temp3$8), folderTree = useTypedSelector(selectFolderTree), currentFolder = currentFolderId ? byId[currentFolderId] : null, t0;
+	let $ = c(114), dispatch = useDispatch(), currentFolderId = useTypedSelector(_temp$29), assetsById = useTypedSelector(_temp2$16), byId = useTypedSelector(_temp3$9), canDeleteFolder = useTypedSelector(selectCanDeleteFolder), fetching = useTypedSelector(_temp4$5), folderTree = useTypedSelector(selectFolderTree), currentFolder = currentFolderId ? byId[currentFolderId] : null, t0;
 	$[0] !== byId || $[1] !== currentFolderId ? (t0 = getExpandedIdSet(currentFolderId, byId), $[0] = byId, $[1] = currentFolderId, $[2] = t0) : t0 = $[2];
 	let expandedIds = t0, t1;
 	$[3] === expandedIds ? t1 = $[4] : (t1 = Array.from(expandedIds).join("|") || "root", $[3] = expandedIds, $[4] = t1);
-	let treeKey = t1, hasFolders = folderTree.length > 0, t2;
-	$[5] === dispatch ? t2 = $[6] : (t2 = (folderId) => {
-		dispatch(foldersActions.currentFolderSet({ folderId }));
-	}, $[5] = dispatch, $[6] = t2);
-	let handleFolderSelect = t2, t3;
-	$[7] !== currentFolder || $[8] !== currentFolderId || $[9] !== dispatch ? (t3 = () => {
-		!currentFolderId || !currentFolder || dispatch(dialogActions.showConfirmDeleteFolder({
-			folderId: currentFolderId,
-			folderName: currentFolder.name
-		}));
-	}, $[7] = currentFolder, $[8] = currentFolderId, $[9] = dispatch, $[10] = t3) : t3 = $[10];
-	let handleFolderDelete = t3, t4;
-	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {
-		borderBottom: "1px solid var(--card-border-color)",
-		flexShrink: 0,
-		height: "32px"
-	}, $[11] = t4) : t4 = $[11];
+	let treeKey = t1, hasFolders = folderTree.length > 0, [dropTargetId, setDropTargetId] = useState(null), t2;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ new Map(), $[5] = t2) : t2 = $[5];
+	let dragDepth = useRef(t2), t3, t4;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
+		let handleDragEnd = () => {
+			dragDepth.current.clear(), setDropTargetId(null);
+		};
+		return window.addEventListener("dragend", handleDragEnd), () => window.removeEventListener("dragend", handleDragEnd);
+	}, t4 = [], $[6] = t3, $[7] = t4) : (t3 = $[6], t4 = $[7]), useEffect(t3, t4);
 	let t5;
-	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx(Label, {
-		size: 0,
-		children: "Folders"
-	}), $[12] = t5) : t5 = $[12];
-	let t6;
-	$[13] === fetching ? t6 = $[14] : (t6 = fetching && /* @__PURE__ */ jsx(Label, {
-		size: 0,
-		style: { opacity: .3 },
-		children: "Loading..."
-	}), $[13] = fetching, $[14] = t6);
-	let t7;
-	$[15] === t6 ? t7 = $[16] : (t7 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		children: /* @__PURE__ */ jsxs(Inline, {
-			gap: 2,
-			children: [t5, t6]
-		})
-	}), $[15] = t6, $[16] = t7);
-	let t8;
-	$[17] !== currentFolderId || $[18] !== dispatch ? (t8 = currentFolderId && /* @__PURE__ */ jsx(FolderHeaderAction, {
-		icon: /* @__PURE__ */ jsx(EditIcon, {}),
-		onClick: () => dispatch(DIALOG_ACTIONS.showFolderRename({ folderId: currentFolderId })),
-		tone: "primary",
-		tooltip: "Rename folder"
-	}), $[17] = currentFolderId, $[18] = dispatch, $[19] = t8) : t8 = $[19];
-	let t9;
-	$[20] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(AddIcon, {}), $[20] = t9) : t9 = $[20];
-	let t10;
-	$[21] !== currentFolderId || $[22] !== dispatch ? (t10 = /* @__PURE__ */ jsx(FolderHeaderAction, {
-		icon: t9,
-		onClick: () => dispatch(DIALOG_ACTIONS.showFolderCreate({ parentFolderId: currentFolderId || null })),
-		tone: "primary",
-		tooltip: "Create folder"
-	}), $[21] = currentFolderId, $[22] = dispatch, $[23] = t10) : t10 = $[23];
-	let t11;
-	$[24] !== canDeleteFolder || $[25] !== currentFolderId || $[26] !== handleFolderDelete ? (t11 = currentFolderId && canDeleteFolder && /* @__PURE__ */ jsx(FolderHeaderAction, {
-		icon: /* @__PURE__ */ jsx(TrashIcon, {}),
-		onClick: handleFolderDelete,
-		tone: "critical",
-		tooltip: "Delete folder"
-	}), $[24] = canDeleteFolder, $[25] = currentFolderId, $[26] = handleFolderDelete, $[27] = t11) : t11 = $[27];
-	let t12;
-	$[28] !== t10 || $[29] !== t11 || $[30] !== t8 ? (t12 = /* @__PURE__ */ jsxs(Inline, {
-		gap: 1,
-		children: [
-			t8,
-			t10,
-			t11
-		]
-	}), $[28] = t10, $[29] = t11, $[30] = t8, $[31] = t12) : t12 = $[31];
-	let t13;
-	$[32] !== t12 || $[33] !== t7 ? (t13 = /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
-		justify: "space-between",
-		paddingX: 3,
-		style: t4,
-		children: [t7, t12]
-	}), $[32] = t12, $[33] = t7, $[34] = t13) : t13 = $[34];
-	let t14;
-	$[35] === dispatch ? t14 = $[36] : (t14 = () => dispatch(foldersActions.currentFolderClear()), $[35] = dispatch, $[36] = t14);
-	let t15 = currentFolderId === null, t16 = currentFolderId === null ? "semibold" : "medium", t17;
-	$[37] !== t14 || $[38] !== t15 || $[39] !== t16 ? (t17 = /* @__PURE__ */ jsx(TreeItem, {
-		id: "__all-assets",
-		onClick: t14,
-		selected: t15,
-		text: "All assets",
-		weight: t16
-	}), $[37] = t14, $[38] = t15, $[39] = t16, $[40] = t17) : t17 = $[40];
-	let t18;
-	if ($[41] !== currentFolderId || $[42] !== expandedIds || $[43] !== folderTree || $[44] !== handleFolderSelect) {
-		let t19;
-		$[46] !== currentFolderId || $[47] !== expandedIds || $[48] !== handleFolderSelect ? (t19 = (node) => /* @__PURE__ */ jsx(FolderNode, {
+	$[8] === dispatch ? t5 = $[9] : (t5 = (folderId) => {
+		dispatch(foldersActions.currentFolderSet({ folderId }));
+	}, $[8] = dispatch, $[9] = t5);
+	let handleFolderSelect = t5, T0, T1, T2, T3, T4, getDropTargetHandlers, t10, t11, t12, t13, t14, t15, t16, t17, t18, t19, t6, t7, t8, t9;
+	if ($[10] !== assetsById || $[11] !== canDeleteFolder || $[12] !== currentFolder || $[13] !== currentFolderId || $[14] !== dispatch || $[15] !== dropTargetId || $[16] !== fetching || $[17] !== treeKey) {
+		getDropTargetHandlers = (folderId_0) => {
+			let targetId = folderId_0 ?? ROOT_DROP_TARGET_ID;
+			return {
+				onDragEnter: (e) => {
+					if (!isAssetDrag(e)) return;
+					e.preventDefault(), e.stopPropagation();
+					let depth = (dragDepth.current.get(targetId) ?? 0) + 1;
+					dragDepth.current.set(targetId, depth), setDropTargetId(targetId);
+				},
+				onDragOver: _temp5$3,
+				onDragLeave: (e_1) => {
+					if (!isAssetDrag(e_1)) return;
+					e_1.stopPropagation();
+					let depth_0 = (dragDepth.current.get(targetId) ?? 0) - 1;
+					if (depth_0 > 0) {
+						dragDepth.current.set(targetId, depth_0);
+						return;
+					}
+					dragDepth.current.delete(targetId), setDropTargetId((current) => current === targetId ? null : current);
+				},
+				onDrop: (e_2) => {
+					if (!isAssetDrag(e_2)) return;
+					e_2.preventDefault(), e_2.stopPropagation(), dragDepth.current.clear(), setDropTargetId(null);
+					let assets = getDragAssetIds(e_2).map((assetId) => assetsById[assetId]).filter(_temp6$1).filter((item_0) => (item_0.asset.opt?.media?.folder?._ref ?? null) !== folderId_0);
+					assets.length !== 0 && dispatch(assetsActions.folderSetRequest({
+						assets,
+						folderId: folderId_0
+					}));
+				}
+			};
+		};
+		let t20;
+		$[38] !== currentFolder || $[39] !== currentFolderId || $[40] !== dispatch ? (t20 = () => {
+			!currentFolderId || !currentFolder || dispatch(dialogActions.showConfirmDeleteFolder({
+				folderId: currentFolderId,
+				folderName: currentFolder.name
+			}));
+		}, $[38] = currentFolder, $[39] = currentFolderId, $[40] = dispatch, $[41] = t20) : t20 = $[41];
+		let handleFolderDelete = t20;
+		T4 = Flex, t16 = "column", t17 = 1, t18 = "fill";
+		let t21;
+		$[42] === Symbol.for("react.memo_cache_sentinel") ? (t21 = {
+			borderBottom: "1px solid var(--card-border-color)",
+			flexShrink: 0,
+			height: "32px"
+		}, $[42] = t21) : t21 = $[42];
+		let t22;
+		$[43] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Label, {
+			size: 0,
+			children: "Folders"
+		}), $[43] = t22) : t22 = $[43];
+		let t23;
+		$[44] === fetching ? t23 = $[45] : (t23 = fetching && /* @__PURE__ */ jsx(Label, {
+			size: 0,
+			style: { opacity: .3 },
+			children: "Loading..."
+		}), $[44] = fetching, $[45] = t23);
+		let t24;
+		$[46] === t23 ? t24 = $[47] : (t24 = /* @__PURE__ */ jsx(Box, {
+			flex: 1,
+			children: /* @__PURE__ */ jsxs(Inline, {
+				gap: 2,
+				children: [t22, t23]
+			})
+		}), $[46] = t23, $[47] = t24);
+		let t25;
+		$[48] !== currentFolderId || $[49] !== dispatch ? (t25 = currentFolderId && /* @__PURE__ */ jsx(FolderHeaderAction, {
+			icon: /* @__PURE__ */ jsx(EditIcon, {}),
+			onClick: () => dispatch(DIALOG_ACTIONS.showFolderRename({ folderId: currentFolderId })),
+			tone: "primary",
+			tooltip: "Rename folder"
+		}), $[48] = currentFolderId, $[49] = dispatch, $[50] = t25) : t25 = $[50];
+		let t26;
+		$[51] === Symbol.for("react.memo_cache_sentinel") ? (t26 = /* @__PURE__ */ jsx(AddIcon, {}), $[51] = t26) : t26 = $[51];
+		let t27;
+		$[52] !== currentFolderId || $[53] !== dispatch ? (t27 = /* @__PURE__ */ jsx(FolderHeaderAction, {
+			icon: t26,
+			onClick: () => dispatch(DIALOG_ACTIONS.showFolderCreate({ parentFolderId: currentFolderId || null })),
+			tone: "primary",
+			tooltip: "Create folder"
+		}), $[52] = currentFolderId, $[53] = dispatch, $[54] = t27) : t27 = $[54];
+		let t28;
+		$[55] !== canDeleteFolder || $[56] !== currentFolderId || $[57] !== handleFolderDelete ? (t28 = currentFolderId && canDeleteFolder && /* @__PURE__ */ jsx(FolderHeaderAction, {
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+			onClick: handleFolderDelete,
+			tone: "critical",
+			tooltip: "Delete folder"
+		}), $[55] = canDeleteFolder, $[56] = currentFolderId, $[57] = handleFolderDelete, $[58] = t28) : t28 = $[58];
+		let t29;
+		$[59] !== t25 || $[60] !== t27 || $[61] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Inline, {
+			gap: 1,
+			children: [
+				t25,
+				t27,
+				t28
+			]
+		}), $[59] = t25, $[60] = t27, $[61] = t28, $[62] = t29) : t29 = $[62], $[63] !== t24 || $[64] !== t29 ? (t19 = /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			justify: "space-between",
+			paddingX: 3,
+			style: t21,
+			children: [t24, t29]
+		}), $[63] = t24, $[64] = t29, $[65] = t19) : t19 = $[65], T3 = Box, t15 = 2, T2 = Box, T1 = DropTree, t13 = 1, t14 = treeKey, T0 = TreeItem, t6 = dropTargetId === ROOT_DROP_TARGET_ID ? "" : void 0, t7 = ROOT_DROP_TARGET_ID, $[66] === dispatch ? t8 = $[67] : (t8 = () => dispatch(foldersActions.currentFolderClear()), $[66] = dispatch, $[67] = t8), t9 = currentFolderId === null, t10 = "All assets", t11 = currentFolderId === null ? "semibold" : "medium", t12 = getDropTargetHandlers(null), $[10] = assetsById, $[11] = canDeleteFolder, $[12] = currentFolder, $[13] = currentFolderId, $[14] = dispatch, $[15] = dropTargetId, $[16] = fetching, $[17] = treeKey, $[18] = T0, $[19] = T1, $[20] = T2, $[21] = T3, $[22] = T4, $[23] = getDropTargetHandlers, $[24] = t10, $[25] = t11, $[26] = t12, $[27] = t13, $[28] = t14, $[29] = t15, $[30] = t16, $[31] = t17, $[32] = t18, $[33] = t19, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = t9;
+	} else T0 = $[18], T1 = $[19], T2 = $[20], T3 = $[21], T4 = $[22], getDropTargetHandlers = $[23], t10 = $[24], t11 = $[25], t12 = $[26], t13 = $[27], t14 = $[28], t15 = $[29], t16 = $[30], t17 = $[31], t18 = $[32], t19 = $[33], t6 = $[34], t7 = $[35], t8 = $[36], t9 = $[37];
+	let t20;
+	$[68] !== T0 || $[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t6 || $[73] !== t7 || $[74] !== t8 || $[75] !== t9 ? (t20 = /* @__PURE__ */ jsx(T0, {
+		"data-drop-target": t6,
+		id: t7,
+		onClick: t8,
+		selected: t9,
+		text: t10,
+		weight: t11,
+		...t12
+	}), $[68] = T0, $[69] = t10, $[70] = t11, $[71] = t12, $[72] = t6, $[73] = t7, $[74] = t8, $[75] = t9, $[76] = t20) : t20 = $[76];
+	let t21;
+	if ($[77] !== currentFolderId || $[78] !== dropTargetId || $[79] !== expandedIds || $[80] !== folderTree || $[81] !== getDropTargetHandlers || $[82] !== handleFolderSelect) {
+		let t22;
+		$[84] !== currentFolderId || $[85] !== dropTargetId || $[86] !== expandedIds || $[87] !== getDropTargetHandlers || $[88] !== handleFolderSelect ? (t22 = (node) => /* @__PURE__ */ jsx(FolderNode, {
 			currentFolderId,
+			dropTargetId,
 			expandedIds,
+			getDropTargetHandlers,
 			node,
 			onSelect: handleFolderSelect
-		}, node.id), $[46] = currentFolderId, $[47] = expandedIds, $[48] = handleFolderSelect, $[49] = t19) : t19 = $[49], t18 = folderTree.map(t19), $[41] = currentFolderId, $[42] = expandedIds, $[43] = folderTree, $[44] = handleFolderSelect, $[45] = t18;
-	} else t18 = $[45];
-	let t19;
-	$[50] !== t17 || $[51] !== t18 || $[52] !== treeKey ? (t19 = /* @__PURE__ */ jsxs(Tree, {
-		gap: 1,
-		children: [t17, t18]
-	}, treeKey), $[50] = t17, $[51] = t18, $[52] = treeKey, $[53] = t19) : t19 = $[53];
-	let t20;
-	$[54] !== fetching || $[55] !== hasFolders ? (t20 = !hasFolders && !fetching && /* @__PURE__ */ jsx(Box, {
+		}, node.id), $[84] = currentFolderId, $[85] = dropTargetId, $[86] = expandedIds, $[87] = getDropTargetHandlers, $[88] = handleFolderSelect, $[89] = t22) : t22 = $[89], t21 = folderTree.map(t22), $[77] = currentFolderId, $[78] = dropTargetId, $[79] = expandedIds, $[80] = folderTree, $[81] = getDropTargetHandlers, $[82] = handleFolderSelect, $[83] = t21;
+	} else t21 = $[83];
+	let t22;
+	$[90] !== T1 || $[91] !== t13 || $[92] !== t14 || $[93] !== t20 || $[94] !== t21 ? (t22 = /* @__PURE__ */ jsxs(T1, {
+		gap: t13,
+		children: [t20, t21]
+	}, t14), $[90] = T1, $[91] = t13, $[92] = t14, $[93] = t20, $[94] = t21, $[95] = t22) : t22 = $[95];
+	let t23;
+	$[96] !== fetching || $[97] !== hasFolders ? (t23 = !hasFolders && !fetching && /* @__PURE__ */ jsx(Box, {
 		marginTop: 3,
 		paddingX: 1,
 		children: /* @__PURE__ */ jsx(Text, {
@@ -4778,28 +4873,39 @@ const getExpandedIdSet = (folderId, byId) => {
 			size: 1,
 			children: /* @__PURE__ */ jsx("em", { children: "No folders" })
 		})
-	}), $[54] = fetching, $[55] = hasFolders, $[56] = t20) : t20 = $[56];
-	let t21;
-	$[57] !== t19 || $[58] !== t20 ? (t21 = /* @__PURE__ */ jsx(Box, {
-		padding: 2,
-		children: /* @__PURE__ */ jsxs(Box, { children: [t19, t20] })
-	}), $[57] = t19, $[58] = t20, $[59] = t21) : t21 = $[59];
-	let t22;
-	return $[60] !== t13 || $[61] !== t21 ? (t22 = /* @__PURE__ */ jsxs(Flex, {
-		direction: "column",
-		flex: 1,
-		height: "fill",
-		children: [t13, t21]
-	}), $[60] = t13, $[61] = t21, $[62] = t22) : t22 = $[62], t22;
+	}), $[96] = fetching, $[97] = hasFolders, $[98] = t23) : t23 = $[98];
+	let t24;
+	$[99] !== T2 || $[100] !== t22 || $[101] !== t23 ? (t24 = /* @__PURE__ */ jsxs(T2, { children: [t22, t23] }), $[99] = T2, $[100] = t22, $[101] = t23, $[102] = t24) : t24 = $[102];
+	let t25;
+	$[103] !== T3 || $[104] !== t15 || $[105] !== t24 ? (t25 = /* @__PURE__ */ jsx(T3, {
+		padding: t15,
+		children: t24
+	}), $[103] = T3, $[104] = t15, $[105] = t24, $[106] = t25) : t25 = $[106];
+	let t26;
+	return $[107] !== T4 || $[108] !== t16 || $[109] !== t17 || $[110] !== t18 || $[111] !== t19 || $[112] !== t25 ? (t26 = /* @__PURE__ */ jsxs(T4, {
+		direction: t16,
+		flex: t17,
+		height: t18,
+		children: [t19, t25]
+	}), $[107] = T4, $[108] = t16, $[109] = t17, $[110] = t18, $[111] = t19, $[112] = t25, $[113] = t26) : t26 = $[113], t26;
 };
 function _temp$29(state) {
 	return state.folders.currentFolderId;
 }
 function _temp2$16(state_0) {
-	return state_0.folders.byId;
+	return state_0.assets.byIds;
+}
+function _temp3$9(state_1) {
+	return state_1.folders.byId;
+}
+function _temp4$5(state_2) {
+	return state_2.folders.fetching;
 }
-function _temp3$8(state_1) {
-	return state_1.folders.fetching;
+function _temp5$3(e_0) {
+	isAssetDrag(e_0) && (e_0.preventDefault(), e_0.stopPropagation(), e_0.dataTransfer.dropEffect = "move");
+}
+function _temp6$1(item) {
+	return !!item;
 }
 const DialogFolders = (props) => {
 	let $ = c(7), { children, dialog: t0 } = props, { id } = t0, dispatch = useDispatch(), t1;
@@ -5343,7 +5449,7 @@ const DialogFolders = (props) => {
 			isDisabled: tagsFetching,
 			isSearchable: !0,
 			name: "tags",
-			noOptionsMessage: _temp3$7,
+			noOptionsMessage: _temp3$8,
 			onChange: (value) => handleChange(value),
 			options: allTagOptions,
 			placeholder: tagsFetching ? "Loading..." : "Select...",
@@ -5363,7 +5469,7 @@ function _temp$28(state) {
 function _temp2$15(state_0) {
 	return state_0.tags.fetching;
 }
-function _temp3$7() {
+function _temp3$8() {
 	return "No tags";
 }
 const StackContainer = /* @__PURE__ */ styled(Flex).withConfig({
@@ -5402,7 +5508,7 @@ function _temp2$14(facet) {
 	return facet.type === "number" ? /* @__PURE__ */ jsx(SearchFacetNumber, { facet }, key) : facet.type === "searchable" ? /* @__PURE__ */ jsx(SearchFacetTags, { facet }, key) : facet.type === "select" ? /* @__PURE__ */ jsx(SearchFacetSelect, { facet }, key) : facet.type === "string" ? /* @__PURE__ */ jsx(SearchFacetString, { facet }, key) : null;
 }
 const SearchFacetsControl = () => {
-	let $ = c(35), dispatch = useDispatch(), assetTypes = useTypedSelector(_temp$26), searchFacets = useTypedSelector(_temp2$13), selectedDocument = useTypedSelector(_temp3$6), popoverProps = usePortalPopoverProps(), { creditLine } = useToolOptions(), isTool = !selectedDocument, T0, T1, T2, t0, t1, t2;
+	let $ = c(35), dispatch = useDispatch(), assetTypes = useTypedSelector(_temp$26), searchFacets = useTypedSelector(_temp2$13), selectedDocument = useTypedSelector(_temp3$7), popoverProps = usePortalPopoverProps(), { creditLine } = useToolOptions(), isTool = !selectedDocument, T0, T1, T2, t0, t1, t2;
 	if ($[0] !== assetTypes || $[1] !== creditLine?.enabled || $[2] !== dispatch || $[3] !== isTool || $[4] !== searchFacets) {
 		let t3;
 		$[11] !== assetTypes || $[12] !== creditLine?.enabled || $[13] !== isTool ? (t3 = (facet) => !creditLine?.enabled && facet?.type === "string" && facet?.name === "creditLine" ? !1 : facet.type === "group" || facet.type === "divider" ? !0 : isTool ? !facet?.selectOnly : facet.assetTypes.filter((assetType) => assetTypes.includes(assetType)).length > 0, $[11] = assetTypes, $[12] = creditLine?.enabled, $[13] = isTool, $[14] = t3) : t3 = $[14];
@@ -5470,7 +5576,7 @@ function _temp$26(state) {
 function _temp2$13(state_0) {
 	return state_0.search.facets;
 }
-function _temp3$6(state_1) {
+function _temp3$7(state_1) {
 	return state_1.selected.document;
 }
 function _temp4$4(facet_0, index, facets) {
@@ -5904,7 +6010,7 @@ const TagContainer = styled(Flex).withConfig({
 		let tagIdsSegmented = pickedTagIdsUnique.reduce(t1, {
 			appliedToAll: [],
 			appliedToSome: []
-		}), tagsAppliedToAll = tags.filter((tag_1) => tagIdsSegmented.appliedToAll.includes(tag_1.tag._id)).map(_temp3$5), tagsAppliedToSome = tags.filter((tag_2) => tagIdsSegmented.appliedToSome.includes(tag_2.tag._id)).map(_temp4$3), tagsUnused = tags.filter((tag_3) => !pickedTagIdsUnique.includes(tag_3.tag._id)).map(_temp5$2);
+		}), tagsAppliedToAll = tags.filter((tag_1) => tagIdsSegmented.appliedToAll.includes(tag_1.tag._id)).map(_temp3$6), tagsAppliedToSome = tags.filter((tag_2) => tagIdsSegmented.appliedToSome.includes(tag_2.tag._id)).map(_temp4$3), tagsUnused = tags.filter((tag_3) => !pickedTagIdsUnique.includes(tag_3.tag._id)).map(_temp5$2);
 		items = [], assetsPicked.length === 0 ? items = tags.map(_temp6) : (tagsAppliedToAll?.length > 0 && (items = [
 			...items,
 			assetsPicked.length === 1 ? "Used" : "Used by all",
@@ -5951,7 +6057,7 @@ function _temp2$11(acc, val) {
 	let assetTagIds = val?.asset?.opt?.media?.tags?.map(_temp$23) || [];
 	return acc = acc.concat(assetTagIds), acc;
 }
-function _temp3$5(tagItem) {
+function _temp3$6(tagItem) {
 	return {
 		...tagItem,
 		actions: [
@@ -6633,7 +6739,7 @@ function _temp$15(state) {
 	return state.search.query;
 }
 const Controls = () => {
-	let $ = c(62), dispatch = useDispatch(), fetching = useTypedSelector(_temp$14), foldersPanelVisible = useTypedSelector(_temp2$8), pageIndex = useTypedSelector(_temp3$4), searchFacets = useTypedSelector(_temp4$2), tagsPanelVisible = useTypedSelector(_temp5$1), mediaIndex = useMediaIndex(), t0;
+	let $ = c(62), dispatch = useDispatch(), fetching = useTypedSelector(_temp$14), foldersPanelVisible = useTypedSelector(_temp2$8), pageIndex = useTypedSelector(_temp3$5), searchFacets = useTypedSelector(_temp4$2), tagsPanelVisible = useTypedSelector(_temp5$1), mediaIndex = useMediaIndex(), t0;
 	$[0] === dispatch ? t0 = $[1] : (t0 = () => {
 		dispatch(dialogActions.showSearchFacets());
 	}, $[0] = dispatch, $[1] = t0);
@@ -6845,7 +6951,7 @@ function _temp$14(state) {
 function _temp2$8(state_0) {
 	return state_0.folders.panelVisible;
 }
-function _temp3$4(state_1) {
+function _temp3$5(state_1) {
 	return state_1.assets.pageIndex;
 }
 function _temp4$2(state_2) {
@@ -7219,15 +7325,15 @@ function _temp$8(state) {
 }
 const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 	displayName: "ContainerGrid",
-	componentId: "sc-mfq3ng-0"
+	componentId: "sc-zsye3t-0"
 })(({ $scheme, $selected, $updating }) => css`align-items:center;cursor:${$selected ? "default" : "pointer"};height:100%;pointer-events:${$updating ? "none" : "auto"};user-select:none;white-space:nowrap;${!$updating && css`@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`}`), ContextActionContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "ContextActionContainer",
-	componentId: "sc-mfq3ng-1"
+	componentId: "sc-zsye3t-1"
 })(({ $scheme }) => css`cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg2")};}}`), StyledWarningIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
 	displayName: "StyledWarningIcon",
-	componentId: "sc-mfq3ng-2"
+	componentId: "sc-zsye3t-2"
 })(({ theme }) => ({ color: theme.sanity.color.spot.red })), TableRowAsset = (props) => {
-	let $ = c(150), { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$7), t0;
+	let $ = c(156), { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$7), assetsPicked = useTypedSelector(selectAssetsPicked), t0;
 	$[0] === id ? t0 = $[1] : (t0 = (state_0) => selectAssetById(state_0, id), $[0] = id, $[1] = t0);
 	let item = useTypedSelector(t0), mediaIndex = useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { isMultiSelect, onSelect } = useAssetSourceActions(), t1;
 	$[2] !== asset || $[3] !== dispatch || $[4] !== isMultiSelect || $[5] !== lastPicked || $[6] !== onSelect || $[7] !== picked || $[8] !== selected || $[9] !== shiftPressed ? (t1 = (e) => {
@@ -7250,6 +7356,9 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 		})) : dispatch(assetsActions.pick({
 			assetId: asset._id,
 			picked: !picked
+		})) : e_0.ctrlKey || e_0.metaKey ? dispatch(assetsActions.pick({
+			assetId: asset._id,
+			picked: !picked
 		})) : shiftPressed.current ? dispatch(picked ? assetsActions.pick({
 			assetId: asset._id,
 			picked: !picked
@@ -7258,19 +7367,23 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 			endId: asset._id
 		})) : dispatch(dialogActions.showAssetEdit({ assetId: asset._id }))));
 	}, $[11] = asset, $[12] = dispatch, $[13] = isMultiSelect, $[14] = lastPicked, $[15] = onSelect, $[16] = picked, $[17] = selected, $[18] = shiftPressed, $[19] = t2) : t2 = $[19];
-	let handleClick = t2, opacityCell = updating ? .5 : 1, opacityPreview = selected || updating ? .1 : 1, t3, t4;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => (refCountVisibleTimeout.current = setTimeout(() => setReferenceCountVisible(!0), 750), () => {
+	let handleClick = t2, draggable = !selected && !updating, t3;
+	$[20] !== asset || $[21] !== assetsPicked || $[22] !== picked ? (t3 = (e_1) => {
+		asset && setDragAssetIds(e_1, picked ? assetsPicked.map(_temp2$5) : [asset._id]);
+	}, $[20] = asset, $[21] = assetsPicked, $[22] = picked, $[23] = t3) : t3 = $[23];
+	let handleDragStart = t3, opacityCell = updating ? .5 : 1, opacityPreview = selected || updating ? .1 : 1, t4, t5;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => (refCountVisibleTimeout.current = setTimeout(() => setReferenceCountVisible(!0), 750), () => {
 		refCountVisibleTimeout.current && clearTimeout(refCountVisibleTimeout.current);
-	}), t4 = [], $[20] = t3, $[21] = t4) : (t3 = $[20], t4 = $[21]), useEffect(t3, t4), !asset) return null;
-	let t5 = selected ? void 0 : handleClick, t6 = mediaIndex < 3 ? 0 : "16px", t7 = mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE, t8 = mediaIndex < 3 ? "auto" : "1fr", t9;
-	$[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = {
-		columnGap: t6,
+	}), t5 = [], $[24] = t4, $[25] = t5) : (t4 = $[24], t5 = $[25]), useEffect(t4, t5), !asset) return null;
+	let t6 = selected ? void 0 : handleClick, t7 = draggable ? handleDragStart : void 0, t8 = mediaIndex < 3 ? 0 : "16px", t9 = mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE, t10 = mediaIndex < 3 ? "auto" : "1fr", t11;
+	$[26] !== t10 || $[27] !== t8 || $[28] !== t9 ? (t11 = {
+		columnGap: t8,
 		rowGap: 0,
-		gridTemplateColumns: t7,
-		gridTemplateRows: t8
-	}, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25];
-	let t10 = item.updating, t11;
-	$[26] === opacityCell ? t11 = $[27] : (t11 = {
+		gridTemplateColumns: t9,
+		gridTemplateRows: t10
+	}, $[26] = t10, $[27] = t8, $[28] = t9, $[29] = t11) : t11 = $[29];
+	let t12 = item.updating, t13;
+	$[30] === opacityCell ? t13 = $[31] : (t13 = {
 		alignItems: "center",
 		gridColumn: 1,
 		gridRowStart: 1,
@@ -7279,9 +7392,9 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 		justifyContent: "center",
 		opacity: opacityCell,
 		position: "relative"
-	}, $[26] = opacityCell, $[27] = t11);
-	let t12;
-	$[28] !== isMultiSelect || $[29] !== onSelect || $[30] !== picked ? (t12 = onSelect && !isMultiSelect ? /* @__PURE__ */ jsx(EditIcon, { style: {
+	}, $[30] = opacityCell, $[31] = t13);
+	let t14;
+	$[32] !== isMultiSelect || $[33] !== onSelect || $[34] !== picked ? (t14 = onSelect && !isMultiSelect ? /* @__PURE__ */ jsx(EditIcon, { style: {
 		flexShrink: 0,
 		opacity: .5
 	} }) : /* @__PURE__ */ jsx(Checkbox, {
@@ -7291,40 +7404,40 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 			pointerEvents: "none",
 			transform: "scale(0.8)"
 		}
-	}), $[28] = isMultiSelect, $[29] = onSelect, $[30] = picked, $[31] = t12) : t12 = $[31];
-	let t13;
-	$[32] !== handleContextActionClick || $[33] !== scheme || $[34] !== t11 || $[35] !== t12 ? (t13 = /* @__PURE__ */ jsx(ContextActionContainer, {
+	}), $[32] = isMultiSelect, $[33] = onSelect, $[34] = picked, $[35] = t14) : t14 = $[35];
+	let t15;
+	$[36] !== handleContextActionClick || $[37] !== scheme || $[38] !== t13 || $[39] !== t14 ? (t15 = /* @__PURE__ */ jsx(ContextActionContainer, {
 		onClick: handleContextActionClick,
 		$scheme: scheme,
-		style: t11,
-		children: t12
-	}), $[32] = handleContextActionClick, $[33] = scheme, $[34] = t11, $[35] = t12, $[36] = t13) : t13 = $[36];
-	let t14;
-	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t14 = {
+		style: t13,
+		children: t14
+	}), $[36] = handleContextActionClick, $[37] = scheme, $[38] = t13, $[39] = t14, $[40] = t15) : t15 = $[40];
+	let t16;
+	$[41] === Symbol.for("react.memo_cache_sentinel") ? (t16 = {
 		gridColumn: 2,
 		gridRowStart: 1,
 		gridRowEnd: "span 5",
 		height: "90px",
 		width: "100px"
-	}, $[37] = t14) : t14 = $[37];
-	let t15;
-	$[38] === Symbol.for("react.memo_cache_sentinel") ? (t15 = {
+	}, $[41] = t16) : t16 = $[41];
+	let t17;
+	$[42] === Symbol.for("react.memo_cache_sentinel") ? (t17 = {
 		height: "100%",
 		position: "relative"
-	}, $[38] = t15) : t15 = $[38];
-	let t16;
-	$[39] === opacityPreview ? t16 = $[40] : (t16 = {
+	}, $[42] = t17) : t17 = $[42];
+	let t18;
+	$[43] === opacityPreview ? t18 = $[44] : (t18 = {
 		height: "100%",
 		opacity: opacityPreview,
 		position: "relative"
-	}, $[39] = opacityPreview, $[40] = t16);
-	let t17;
-	$[41] === asset ? t17 = $[42] : (t17 = isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon$1, {
+	}, $[43] = opacityPreview, $[44] = t18);
+	let t19;
+	$[45] === asset ? t19 = $[46] : (t19 = isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon$1, {
 		extension: asset.extension,
 		width: "40px"
-	}), $[41] = asset, $[42] = t17);
-	let t18;
-	$[43] !== asset || $[44] !== isOpaque || $[45] !== scheme ? (t18 = isImageAsset(asset) && /* @__PURE__ */ jsx(Image$1, {
+	}), $[45] = asset, $[46] = t19);
+	let t20;
+	$[47] !== asset || $[48] !== isOpaque || $[49] !== scheme ? (t20 = isImageAsset(asset) && /* @__PURE__ */ jsx(Image$1, {
 		draggable: !1,
 		$scheme: scheme,
 		$showCheckerboard: !isOpaque,
@@ -7332,14 +7445,14 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 			height: 100,
 			width: 100
 		})
-	}), $[43] = asset, $[44] = isOpaque, $[45] = scheme, $[46] = t18) : t18 = $[46];
-	let t19;
-	$[47] !== t16 || $[48] !== t17 || $[49] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Box, {
-		style: t16,
-		children: [t17, t18]
-	}), $[47] = t16, $[48] = t17, $[49] = t18, $[50] = t19) : t19 = $[50];
-	let t20;
-	$[51] === updating ? t20 = $[52] : (t20 = updating && /* @__PURE__ */ jsx(Flex, {
+	}), $[47] = asset, $[48] = isOpaque, $[49] = scheme, $[50] = t20) : t20 = $[50];
+	let t21;
+	$[51] !== t18 || $[52] !== t19 || $[53] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Box, {
+		style: t18,
+		children: [t19, t20]
+	}), $[51] = t18, $[52] = t19, $[53] = t20, $[54] = t21) : t21 = $[54];
+	let t22;
+	$[55] === updating ? t22 = $[56] : (t22 = updating && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: {
@@ -7350,9 +7463,9 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 			width: "100%"
 		},
 		children: /* @__PURE__ */ jsx(Spinner, {})
-	}), $[51] = updating, $[52] = t20);
-	let t21;
-	$[53] !== selected || $[54] !== updating ? (t21 = selected && !updating && /* @__PURE__ */ jsx(Flex, {
+	}), $[55] = updating, $[56] = t22);
+	let t23;
+	$[57] !== selected || $[58] !== updating ? (t23 = selected && !updating && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: {
@@ -7366,174 +7479,174 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 			size: 2,
 			children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {})
 		})
-	}), $[53] = selected, $[54] = updating, $[55] = t21) : t21 = $[55];
-	let t22;
-	$[56] !== t19 || $[57] !== t20 || $[58] !== t21 ? (t22 = /* @__PURE__ */ jsx(Box, {
-		style: t14,
+	}), $[57] = selected, $[58] = updating, $[59] = t23) : t23 = $[59];
+	let t24;
+	$[60] !== t21 || $[61] !== t22 || $[62] !== t23 ? (t24 = /* @__PURE__ */ jsx(Box, {
+		style: t16,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			justify: "center",
-			style: t15,
+			style: t17,
 			children: [
-				t19,
-				t20,
-				t21
+				t21,
+				t22,
+				t23
 			]
 		})
-	}), $[56] = t19, $[57] = t20, $[58] = t21, $[59] = t22) : t22 = $[59];
-	let t23 = mediaIndex < 3 ? 3 : 0, t24 = mediaIndex < 3 ? 2 : "auto", t25;
-	$[60] !== opacityCell || $[61] !== t24 ? (t25 = {
+	}), $[60] = t21, $[61] = t22, $[62] = t23, $[63] = t24) : t24 = $[63];
+	let t25 = mediaIndex < 3 ? 3 : 0, t26 = mediaIndex < 3 ? 2 : "auto", t27;
+	$[64] !== opacityCell || $[65] !== t26 ? (t27 = {
 		gridColumn: 3,
-		gridRow: t24,
+		gridRow: t26,
 		opacity: opacityCell
-	}, $[60] = opacityCell, $[61] = t24, $[62] = t25) : t25 = $[62];
-	let t26;
-	$[63] === Symbol.for("react.memo_cache_sentinel") ? (t26 = { lineHeight: "2em" }, $[63] = t26) : t26 = $[63];
-	let t27;
-	$[64] === asset.originalFilename ? t27 = $[65] : (t27 = /* @__PURE__ */ jsx(Text, {
+	}, $[64] = opacityCell, $[65] = t26, $[66] = t27) : t27 = $[66];
+	let t28;
+	$[67] === Symbol.for("react.memo_cache_sentinel") ? (t28 = { lineHeight: "2em" }, $[67] = t28) : t28 = $[67];
+	let t29;
+	$[68] === asset.originalFilename ? t29 = $[69] : (t29 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 1,
-		style: t26,
+		style: t28,
 		textOverflow: "ellipsis",
 		children: asset.originalFilename
-	}), $[64] = asset.originalFilename, $[65] = t27);
-	let t28;
-	$[66] !== t23 || $[67] !== t25 || $[68] !== t27 ? (t28 = /* @__PURE__ */ jsx(Box, {
-		marginLeft: t23,
-		style: t25,
-		children: t27
-	}), $[66] = t23, $[67] = t25, $[68] = t27, $[69] = t28) : t28 = $[69];
-	let t29 = mediaIndex < 3 ? 3 : 0, t30 = mediaIndex < 3 ? 3 : 4, t31 = mediaIndex < 3 ? 3 : "auto", t32;
-	$[70] !== opacityCell || $[71] !== t30 || $[72] !== t31 ? (t32 = {
-		gridColumn: t30,
-		gridRow: t31,
+	}), $[68] = asset.originalFilename, $[69] = t29);
+	let t30;
+	$[70] !== t25 || $[71] !== t27 || $[72] !== t29 ? (t30 = /* @__PURE__ */ jsx(Box, {
+		marginLeft: t25,
+		style: t27,
+		children: t29
+	}), $[70] = t25, $[71] = t27, $[72] = t29, $[73] = t30) : t30 = $[73];
+	let t31 = mediaIndex < 3 ? 3 : 0, t32 = mediaIndex < 3 ? 3 : 4, t33 = mediaIndex < 3 ? 3 : "auto", t34;
+	$[74] !== opacityCell || $[75] !== t32 || $[76] !== t33 ? (t34 = {
+		gridColumn: t32,
+		gridRow: t33,
 		opacity: opacityCell
-	}, $[70] = opacityCell, $[71] = t30, $[72] = t31, $[73] = t32) : t32 = $[73];
-	let t33;
-	$[74] === Symbol.for("react.memo_cache_sentinel") ? (t33 = { lineHeight: "2em" }, $[74] = t33) : t33 = $[74];
-	let t34;
-	$[75] === asset ? t34 = $[76] : (t34 = isImageAsset(asset) && getAssetResolution(asset), $[75] = asset, $[76] = t34);
+	}, $[74] = opacityCell, $[75] = t32, $[76] = t33, $[77] = t34) : t34 = $[77];
 	let t35;
-	$[77] === t34 ? t35 = $[78] : (t35 = /* @__PURE__ */ jsx(Text, {
+	$[78] === Symbol.for("react.memo_cache_sentinel") ? (t35 = { lineHeight: "2em" }, $[78] = t35) : t35 = $[78];
+	let t36;
+	$[79] === asset ? t36 = $[80] : (t36 = isImageAsset(asset) && getAssetResolution(asset), $[79] = asset, $[80] = t36);
+	let t37;
+	$[81] === t36 ? t37 = $[82] : (t37 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 1,
-		style: t33,
+		style: t35,
 		textOverflow: "ellipsis",
-		children: t34
-	}), $[77] = t34, $[78] = t35);
-	let t36;
-	$[79] !== t29 || $[80] !== t32 || $[81] !== t35 ? (t36 = /* @__PURE__ */ jsx(Box, {
-		marginLeft: t29,
-		style: t32,
-		children: t35
-	}), $[79] = t29, $[80] = t32, $[81] = t35, $[82] = t36) : t36 = $[82];
-	let t37 = mediaIndex < 3 ? "none" : "block", t38;
-	$[83] !== opacityCell || $[84] !== t37 ? (t38 = {
-		display: t37,
+		children: t36
+	}), $[81] = t36, $[82] = t37);
+	let t38;
+	$[83] !== t31 || $[84] !== t34 || $[85] !== t37 ? (t38 = /* @__PURE__ */ jsx(Box, {
+		marginLeft: t31,
+		style: t34,
+		children: t37
+	}), $[83] = t31, $[84] = t34, $[85] = t37, $[86] = t38) : t38 = $[86];
+	let t39 = mediaIndex < 3 ? "none" : "block", t40;
+	$[87] !== opacityCell || $[88] !== t39 ? (t40 = {
+		display: t39,
 		gridColumn: 5,
 		gridRow: "auto",
 		opacity: opacityCell
-	}, $[83] = opacityCell, $[84] = t37, $[85] = t38) : t38 = $[85];
-	let t39;
-	$[86] === Symbol.for("react.memo_cache_sentinel") ? (t39 = { lineHeight: "2em" }, $[86] = t39) : t39 = $[86];
-	let t40;
-	$[87] === asset.mimeType ? t40 = $[88] : (t40 = /* @__PURE__ */ jsx(Text, {
+	}, $[87] = opacityCell, $[88] = t39, $[89] = t40) : t40 = $[89];
+	let t41;
+	$[90] === Symbol.for("react.memo_cache_sentinel") ? (t41 = { lineHeight: "2em" }, $[90] = t41) : t41 = $[90];
+	let t42;
+	$[91] === asset.mimeType ? t42 = $[92] : (t42 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 1,
-		style: t39,
+		style: t41,
 		textOverflow: "ellipsis",
 		children: asset.mimeType
-	}), $[87] = asset.mimeType, $[88] = t40);
-	let t41;
-	$[89] !== t38 || $[90] !== t40 ? (t41 = /* @__PURE__ */ jsx(Box, {
-		style: t38,
-		children: t40
-	}), $[89] = t38, $[90] = t40, $[91] = t41) : t41 = $[91];
-	let t42 = mediaIndex < 3 ? "none" : "block", t43;
-	$[92] !== opacityCell || $[93] !== t42 ? (t43 = {
-		display: t42,
+	}), $[91] = asset.mimeType, $[92] = t42);
+	let t43;
+	$[93] !== t40 || $[94] !== t42 ? (t43 = /* @__PURE__ */ jsx(Box, {
+		style: t40,
+		children: t42
+	}), $[93] = t40, $[94] = t42, $[95] = t43) : t43 = $[95];
+	let t44 = mediaIndex < 3 ? "none" : "block", t45;
+	$[96] !== opacityCell || $[97] !== t44 ? (t45 = {
+		display: t44,
 		gridColumn: 6,
 		gridRow: "auto",
 		opacity: opacityCell
-	}, $[92] = opacityCell, $[93] = t42, $[94] = t43) : t43 = $[94];
-	let t44;
-	$[95] === Symbol.for("react.memo_cache_sentinel") ? (t44 = { lineHeight: "2em" }, $[95] = t44) : t44 = $[95];
-	let t45;
-	$[96] === asset.size ? t45 = $[97] : (t45 = filesize(asset.size, {
+	}, $[96] = opacityCell, $[97] = t44, $[98] = t45) : t45 = $[98];
+	let t46;
+	$[99] === Symbol.for("react.memo_cache_sentinel") ? (t46 = { lineHeight: "2em" }, $[99] = t46) : t46 = $[99];
+	let t47;
+	$[100] === asset.size ? t47 = $[101] : (t47 = filesize(asset.size, {
 		base: 10,
 		round: 0
-	}), $[96] = asset.size, $[97] = t45);
-	let t46;
-	$[98] === t45 ? t46 = $[99] : (t46 = /* @__PURE__ */ jsx(Text, {
+	}), $[100] = asset.size, $[101] = t47);
+	let t48;
+	$[102] === t47 ? t48 = $[103] : (t48 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 1,
-		style: t44,
+		style: t46,
 		textOverflow: "ellipsis",
-		children: t45
-	}), $[98] = t45, $[99] = t46);
-	let t47;
-	$[100] !== t43 || $[101] !== t46 ? (t47 = /* @__PURE__ */ jsx(Box, {
-		style: t43,
-		children: t46
-	}), $[100] = t43, $[101] = t46, $[102] = t47) : t47 = $[102];
-	let t48 = mediaIndex < 3 ? 3 : 0, t49 = mediaIndex < 3 ? 3 : 7, t50 = mediaIndex < 3 ? 4 : "auto", t51;
-	$[103] !== opacityCell || $[104] !== t49 || $[105] !== t50 ? (t51 = {
-		gridColumn: t49,
-		gridRow: t50,
+		children: t47
+	}), $[102] = t47, $[103] = t48);
+	let t49;
+	$[104] !== t45 || $[105] !== t48 ? (t49 = /* @__PURE__ */ jsx(Box, {
+		style: t45,
+		children: t48
+	}), $[104] = t45, $[105] = t48, $[106] = t49) : t49 = $[106];
+	let t50 = mediaIndex < 3 ? 3 : 0, t51 = mediaIndex < 3 ? 3 : 7, t52 = mediaIndex < 3 ? 4 : "auto", t53;
+	$[107] !== opacityCell || $[108] !== t51 || $[109] !== t52 ? (t53 = {
+		gridColumn: t51,
+		gridRow: t52,
 		opacity: opacityCell
-	}, $[103] = opacityCell, $[104] = t49, $[105] = t50, $[106] = t51) : t51 = $[106];
-	let t52;
-	$[107] === Symbol.for("react.memo_cache_sentinel") ? (t52 = { lineHeight: "2em" }, $[107] = t52) : t52 = $[107];
-	let t53;
-	$[108] === asset._updatedAt ? t53 = $[109] : (t53 = formatRelative(new Date(asset._updatedAt), /* @__PURE__ */ new Date()), $[108] = asset._updatedAt, $[109] = t53);
+	}, $[107] = opacityCell, $[108] = t51, $[109] = t52, $[110] = t53) : t53 = $[110];
 	let t54;
-	$[110] === t53 ? t54 = $[111] : (t54 = /* @__PURE__ */ jsx(Text, {
+	$[111] === Symbol.for("react.memo_cache_sentinel") ? (t54 = { lineHeight: "2em" }, $[111] = t54) : t54 = $[111];
+	let t55;
+	$[112] === asset._updatedAt ? t55 = $[113] : (t55 = formatRelative(new Date(asset._updatedAt), /* @__PURE__ */ new Date()), $[112] = asset._updatedAt, $[113] = t55);
+	let t56;
+	$[114] === t55 ? t56 = $[115] : (t56 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 1,
-		style: t52,
+		style: t54,
 		textOverflow: "ellipsis",
-		children: t53
-	}), $[110] = t53, $[111] = t54);
-	let t55;
-	$[112] !== t48 || $[113] !== t51 || $[114] !== t54 ? (t55 = /* @__PURE__ */ jsx(Box, {
-		marginLeft: t48,
-		style: t51,
-		children: t54
-	}), $[112] = t48, $[113] = t51, $[114] = t54, $[115] = t55) : t55 = $[115];
-	let t56 = mediaIndex < 3 ? "none" : "block", t57;
-	$[116] !== opacityCell || $[117] !== t56 ? (t57 = {
-		display: t56,
+		children: t55
+	}), $[114] = t55, $[115] = t56);
+	let t57;
+	$[116] !== t50 || $[117] !== t53 || $[118] !== t56 ? (t57 = /* @__PURE__ */ jsx(Box, {
+		marginLeft: t50,
+		style: t53,
+		children: t56
+	}), $[116] = t50, $[117] = t53, $[118] = t56, $[119] = t57) : t57 = $[119];
+	let t58 = mediaIndex < 3 ? "none" : "block", t59;
+	$[120] !== opacityCell || $[121] !== t58 ? (t59 = {
+		display: t58,
 		gridColumn: 8,
 		gridRow: "auto",
 		opacity: opacityCell
-	}, $[116] = opacityCell, $[117] = t56, $[118] = t57) : t57 = $[118];
-	let t58;
-	$[119] === Symbol.for("react.memo_cache_sentinel") ? (t58 = { lineHeight: "2em" }, $[119] = t58) : t58 = $[119];
-	let t59;
-	$[120] !== id || $[121] !== referenceCountVisible ? (t59 = /* @__PURE__ */ jsx(Text, {
+	}, $[120] = opacityCell, $[121] = t58, $[122] = t59) : t59 = $[122];
+	let t60;
+	$[123] === Symbol.for("react.memo_cache_sentinel") ? (t60 = { lineHeight: "2em" }, $[123] = t60) : t60 = $[123];
+	let t61;
+	$[124] !== id || $[125] !== referenceCountVisible ? (t61 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 1,
-		style: t58,
+		style: t60,
 		textOverflow: "ellipsis",
 		children: referenceCountVisible ? /* @__PURE__ */ jsx(WithReferringDocuments, {
 			id,
-			children: _temp2$5
+			children: _temp3$4
 		}) : /* @__PURE__ */ jsx(Fragment, { children: "-" })
-	}), $[120] = id, $[121] = referenceCountVisible, $[122] = t59) : t59 = $[122];
-	let t60;
-	$[123] !== t57 || $[124] !== t59 ? (t60 = /* @__PURE__ */ jsx(Box, {
-		style: t57,
-		children: t59
-	}), $[123] = t57, $[124] = t59, $[125] = t60) : t60 = $[125];
-	let t61 = mediaIndex < 3 ? 4 : 9, t62 = mediaIndex < 3 ? "span 5" : "auto", t63;
-	$[126] !== opacityCell || $[127] !== t61 || $[128] !== t62 ? (t63 = {
-		gridColumn: t61,
+	}), $[124] = id, $[125] = referenceCountVisible, $[126] = t61) : t61 = $[126];
+	let t62;
+	$[127] !== t59 || $[128] !== t61 ? (t62 = /* @__PURE__ */ jsx(Box, {
+		style: t59,
+		children: t61
+	}), $[127] = t59, $[128] = t61, $[129] = t62) : t62 = $[129];
+	let t63 = mediaIndex < 3 ? 4 : 9, t64 = mediaIndex < 3 ? "span 5" : "auto", t65;
+	$[130] !== opacityCell || $[131] !== t63 || $[132] !== t64 ? (t65 = {
+		gridColumn: t63,
 		gridRowStart: "1",
-		gridRowEnd: t62,
+		gridRowEnd: t64,
 		opacity: opacityCell
-	}, $[126] = opacityCell, $[127] = t61, $[128] = t62, $[129] = t63) : t63 = $[129];
-	let t64;
-	$[130] === error ? t64 = $[131] : (t64 = error && /* @__PURE__ */ jsx(Box, {
+	}, $[130] = opacityCell, $[131] = t63, $[132] = t64, $[133] = t65) : t65 = $[133];
+	let t66;
+	$[134] === error ? t66 = $[135] : (t66 = error && /* @__PURE__ */ jsx(Box, {
 		padding: 2,
 		children: /* @__PURE__ */ jsx(Tooltip, {
 			animate: !0,
@@ -7552,39 +7665,44 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 				children: /* @__PURE__ */ jsx(StyledWarningIcon, { color: "critical" })
 			})
 		})
-	}), $[130] = error, $[131] = t64);
-	let t65;
-	$[132] !== t63 || $[133] !== t64 ? (t65 = /* @__PURE__ */ jsx(Flex, {
+	}), $[134] = error, $[135] = t66);
+	let t67;
+	$[136] !== t65 || $[137] !== t66 ? (t67 = /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
-		style: t63,
-		children: t64
-	}), $[132] = t63, $[133] = t64, $[134] = t65) : t65 = $[134];
-	let t66;
-	return $[135] !== item.updating || $[136] !== scheme || $[137] !== selected || $[138] !== t13 || $[139] !== t22 || $[140] !== t28 || $[141] !== t36 || $[142] !== t41 || $[143] !== t47 || $[144] !== t5 || $[145] !== t55 || $[146] !== t60 || $[147] !== t65 || $[148] !== t9 ? (t66 = /* @__PURE__ */ jsxs(ContainerGrid$1, {
-		onClick: t5,
+		style: t65,
+		children: t66
+	}), $[136] = t65, $[137] = t66, $[138] = t67) : t67 = $[138];
+	let t68;
+	return $[139] !== draggable || $[140] !== item.updating || $[141] !== scheme || $[142] !== selected || $[143] !== t11 || $[144] !== t15 || $[145] !== t24 || $[146] !== t30 || $[147] !== t38 || $[148] !== t43 || $[149] !== t49 || $[150] !== t57 || $[151] !== t6 || $[152] !== t62 || $[153] !== t67 || $[154] !== t7 ? (t68 = /* @__PURE__ */ jsxs(ContainerGrid$1, {
+		draggable,
+		onClick: t6,
+		onDragStart: t7,
 		$scheme: scheme,
 		$selected: selected,
-		style: t9,
-		$updating: t10,
+		style: t11,
+		$updating: t12,
 		children: [
-			t13,
-			t22,
-			t28,
-			t36,
-			t41,
-			t47,
-			t55,
-			t60,
-			t65
+			t15,
+			t24,
+			t30,
+			t38,
+			t43,
+			t49,
+			t57,
+			t62,
+			t67
 		]
-	}), $[135] = item.updating, $[136] = scheme, $[137] = selected, $[138] = t13, $[139] = t22, $[140] = t28, $[141] = t36, $[142] = t41, $[143] = t47, $[144] = t5, $[145] = t55, $[146] = t60, $[147] = t65, $[148] = t9, $[149] = t66) : t66 = $[149], t66;
+	}), $[139] = draggable, $[140] = item.updating, $[141] = scheme, $[142] = selected, $[143] = t11, $[144] = t15, $[145] = t24, $[146] = t30, $[147] = t38, $[148] = t43, $[149] = t49, $[150] = t57, $[151] = t6, $[152] = t62, $[153] = t67, $[154] = t7, $[155] = t68) : t68 = $[155], t68;
 };
 var TableRowAsset_default = memo(TableRowAsset);
 function _temp$7(state) {
 	return state.assets.lastPicked;
 }
-function _temp2$5(t0) {
+function _temp2$5(pickedItem) {
+	return pickedItem.asset._id;
+}
+function _temp3$4(t0) {
 	let { isLoading, referringDocuments } = t0, uniqueDocuments = getUniqueDocuments(referringDocuments);
 	return isLoading ? /* @__PURE__ */ jsx(Fragment, { children: "-" }) : /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(uniqueDocuments) ? uniqueDocuments.length : 0 });
 }