@cmdoss/walrus-site-builder-react 2.4.0 → 2.6.0

package/dist/index.js

@@ -4,10 +4,10 @@ import { ALLOWED_METADATA, SuinsClient, SuinsTransaction, mainPackage as mainPac
 import { MAINNET_WALRUS_PACKAGE_CONFIG, TESTNET_WALRUS_PACKAGE_CONFIG } from "@mysten/walrus";
 import { useStore } from "@nanostores/react";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useQueries, useQuery } from "@tanstack/react-query";
+import { useMutation, useQueries, useQuery } from "@tanstack/react-query";
 import { atom, computed } from "nanostores";
 import * as Dialog from "@radix-ui/react-dialog";
-import { AlertCircle, AlertTriangle, Calendar, CalendarClock, CheckCircle, CheckCircle2, Clock, ExternalLink, Globe2, Info, Link2, Loader2, Pencil, Search, Upload, X, XCircle } from "lucide-react";
+import { AlertCircle, AlertTriangle, Calendar, CalendarClock, CheckCircle, CheckCircle2, Clock, DollarSign, ExternalLink, Globe2, Info, Link2, Loader2, Pencil, Search, Upload, X, XCircle } from "lucide-react";
 import { AggregatorClient, Env } from "@cetusprotocol/aggregator-sdk";
 import BN from "bn.js";
 import { ZenFsFileManager } from "@cmdoss/file-manager";
@@ -85,8 +85,8 @@ function useSuiNsDomainsQuery(currentAccount, clients) {
 					});
 					console.log("response", response);
 					const domains$1 = response.data.filter((obj) => obj.data?.content?.dataType === "moveObject").map((obj) => {
-						const content$5 = obj.data?.content;
-						const fields = content$5 && "fields" in content$5 ? content$5.fields : {};
+						const content$6 = obj.data?.content;
+						const fields = content$6 && "fields" in content$6 ? content$6.fields : {};
 						return {
 							name: fields?.domain_name || "",
 							objectId: obj.data?.objectId || "",
@@ -315,12 +315,12 @@ function useZenfsFilesQuery(fm, clients) {
 			const files = await fm.listFiles();
 			const assets = [];
 			for (const path of files) {
-				const content$5 = await fm?.readFile(path);
-				if (!content$5) continue;
-				const hashU256 = sha256ToU256(await getSHA256Hash(content$5));
+				const content$6 = await fm?.readFile(path);
+				if (!content$6) continue;
+				const hashU256 = sha256ToU256(await getSHA256Hash(content$6));
 				assets.push({
 					path,
-					content: content$5,
+					content: content$6,
 					hashU256
 				});
 			}
@@ -337,6 +337,7 @@ const isDomainDialogOpen = atom(false);
 const isAssigningDomain = atom(false);
 const isRegisterSuiNSDomainDialogOpen = atom(false);
 const isExtendTimeDialogOpen = atom(false);
+const isUpdateMetadataModalOpen = atom(false);
 
 //#endregion
 //#region src/stores/site-metadata.store.ts
@@ -374,7 +375,7 @@ var SiteMetadata = class {
 		this.originalProjectUrl,
 		this.originalEpochs,
 		this.originalSuiNSUrl
-	], (title$5, description$5, iconUrl, link$3, projectUrl, epochs, suiNSUrl, originalTitle, originalDescription, originalIcon, originalLink, originalProjectUrl, originalEpochs, originalSuiNSUrl) => title$5 !== originalTitle || description$5 !== originalDescription || (iconUrl ?? null) !== (originalIcon ?? null) || link$3 !== originalLink || projectUrl !== originalProjectUrl || epochs !== originalEpochs || JSON.stringify(suiNSUrl.sort((a, b) => a.nftId.localeCompare(b.nftId))) !== JSON.stringify(originalSuiNSUrl.sort((a, b) => a.nftId.localeCompare(b.nftId))));
+	], (title$6, description$6, iconUrl, link$3, projectUrl, epochs, suiNSUrl, originalTitle, originalDescription, originalIcon, originalLink, originalProjectUrl, originalEpochs, originalSuiNSUrl) => title$6 !== originalTitle || description$6 !== originalDescription || (iconUrl ?? null) !== (originalIcon ?? null) || link$3 !== originalLink || projectUrl !== originalProjectUrl || epochs !== originalEpochs || JSON.stringify(suiNSUrl.sort((a, b) => a.nftId.localeCompare(b.nftId))) !== JSON.stringify(originalSuiNSUrl.sort((a, b) => a.nftId.localeCompare(b.nftId))));
 	/**
 	* Computed URL for displaying the image preview
 	*/
@@ -634,10 +635,10 @@ function useSitePublishing({ siteId, assets, onUpdateSiteMetadata, onAssociatedD
 	const deployStatusText = useStore(sitePublishingStore.deployStatusText);
 	const deployStepIndex = useStore(sitePublishingStore.deploymentStepIndex);
 	const epochs = useStore(siteMetadataStore.epochs);
-	const title$5 = useStore(siteMetadataStore.title);
+	const title$6 = useStore(siteMetadataStore.title);
 	const imageUrl = useStore(siteMetadataStore.imageUrl);
 	const link$3 = useStore(siteMetadataStore.link);
-	const description$5 = useStore(siteMetadataStore.description);
+	const description$6 = useStore(siteMetadataStore.description);
 	const isEditingSiteMetadata = useStore(siteMetadataStore.isDirty);
 	const isSavingSiteMetadata = useStore(siteMetadataStore.loading);
 	const isAssigning = useStore(isAssigningDomain);
@@ -666,8 +667,8 @@ function useSitePublishing({ siteId, assets, onUpdateSiteMetadata, onAssociatedD
 		if (imageUrl instanceof File) return onError?.("Please upload image first.");
 		const siteMetadata = {
 			id: siteId,
-			title: title$5,
-			description: description$5,
+			title: title$6,
+			description: description$6,
 			imageUrl: imageUrl ?? void 0,
 			link: siteMetadataStore.link.get() ?? void 0,
 			projectUrl: siteMetadataStore.projectUrl.get() ?? void 0
@@ -838,9 +839,9 @@ function useSitePublishing({ siteId, assets, onUpdateSiteMetadata, onAssociatedD
 			isWorking,
 			certifiedBlobs,
 			epochs,
-			title: title$5,
+			title: title$6,
 			iconUrl: imageUrl,
-			description: description$5,
+			description: description$6,
 			link: link$3,
 			isEditingSiteMetadata,
 			deployStatus,
@@ -1337,6 +1338,43 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 	};
 }
 
+//#endregion
+//#region src/hooks/useUpdateSiteMetadata.ts
+function useUpdateSiteMetadata({ siteId, clients: { suiClient, queryClient, walrusClient }, currentAccount, signAndExecuteTransaction, sponsorConfig }) {
+	const network = suiClient.network;
+	const sdk = useMemo(() => {
+		if (!currentAccount || !suiClient || !walrusClient) return null;
+		return new WalrusSiteBuilderSdk(walrusClient, suiClient, currentAccount.address, signAndExecuteTransaction, sponsorConfig);
+	}, [
+		currentAccount,
+		suiClient,
+		walrusClient,
+		signAndExecuteTransaction,
+		sponsorConfig
+	]);
+	const mutation = useMutation({
+		mutationFn: async ({ siteName, metadata }) => {
+			if (!sdk) throw new Error("SDK not initialized");
+			return await sdk.updateSiteMetadata(siteId, siteName, metadata);
+		},
+		onSuccess: (digest) => {
+			queryClient.invalidateQueries({ queryKey: queryKeys.walrusSite(siteId) });
+			if (currentAccount?.address) queryClient.invalidateQueries({ queryKey: queryKeys.walrusSites(currentAccount.address, network) });
+			console.log("✅ Site metadata updated successfully:", digest);
+		},
+		onError: (error) => {
+			console.error("❌ Failed to update site metadata:", error);
+		}
+	}, queryClient);
+	return {
+		updateSiteMetadata: mutation.mutateAsync,
+		isUpdating: mutation.isPending,
+		error: mutation.error,
+		isSuccess: mutation.isSuccess,
+		data: mutation.data
+	};
+}
+
 //#endregion
 //#region src/hooks/useZenFsWorkspace.ts
 function useZenFsWorkspace(workspaceDir = "/workspace", mountDir = "/workspace", queryClient) {
@@ -1361,6 +1399,27 @@ function useZenFsWorkspace(workspaceDir = "/workspace", mountDir = "/workspace",
 	};
 }
 
+//#endregion
+//#region src/queries/storage-cost.query.ts
+function useStorageCostQuery(fileSize, epochs, clients) {
+	const { walrusClient, queryClient } = clients;
+	return useQuery({
+		queryKey: queryKeys.storageCost(fileSize, epochs),
+		queryFn: async () => {
+			if (!walrusClient) throw new Error("Walrus client not available");
+			if (fileSize === null) throw new Error("Invalid file size");
+			const storageCost = await walrusClient.storageCost(fileSize, epochs);
+			return {
+				storageCost: storageCost.storageCost.toString(),
+				writeCost: storageCost.writeCost.toString(),
+				totalCost: storageCost.totalCost.toString()
+			};
+		},
+		enabled: !!walrusClient && fileSize !== null && fileSize > 0 && epochs > 0,
+		staleTime: 300 * 1e3
+	}, queryClient);
+}
+
 //#endregion
 //#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.18.0/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-166334d7.cjs.prod.js
 var require_createRuntimeFn_166334d7_cjs_prod = /* @__PURE__ */ __commonJSMin(((exports) => {
@@ -1585,7 +1644,7 @@ var banner = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntim
 	defaultVariants: { variant: "info" },
 	compoundVariants: []
 });
-var closeButton$1 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntimeFn)({
+var closeButton$2 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntimeFn)({
 	defaultClassName: "Banner_closeButton__z4crwgx",
 	variantClassNames: { variant: {
 		info: "Banner_closeButton_variant_info__z4crwgy",
@@ -1598,8 +1657,8 @@ var closeButton$1 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.creat
 	compoundVariants: []
 });
 var closeIcon = "Banner_closeIcon__z4crwg13";
-var content$4 = "Banner_content__z4crwg7";
-var description$4 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntimeFn)({
+var content$5 = "Banner_content__z4crwg7";
+var description$5 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntimeFn)({
 	defaultClassName: "Banner_description__z4crwgr",
 	variantClassNames: { variant: {
 		info: "Banner_description_variant_info__z4crwgs",
@@ -1649,7 +1708,7 @@ var link$2 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntim
 	compoundVariants: []
 });
 var textContainer = "Banner_textContainer__z4crwgk";
-var title$4 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntimeFn)({
+var title$5 = (0, import_vanilla_extract_recipes_createRuntimeFn_cjs.createRuntimeFn)({
 	defaultClassName: "Banner_title__z4crwgl",
 	variantClassNames: { variant: {
 		info: "Banner_title_variant_info__z4crwgm",
@@ -1731,7 +1790,7 @@ const Banner = ({ title: titleText, description: descriptionText, icon: customIc
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: content$4,
+				className: content$5,
 				children: [showIcon && /* @__PURE__ */ jsx("div", {
 					className: iconContainer({ variant }),
 					children: /* @__PURE__ */ jsx("div", {
@@ -1741,10 +1800,10 @@ const Banner = ({ title: titleText, description: descriptionText, icon: customIc
 				}), /* @__PURE__ */ jsxs("div", {
 					className: textContainer,
 					children: [/* @__PURE__ */ jsx("h3", {
-						className: title$4({ variant }),
+						className: title$5({ variant }),
 						children: titleText
 					}), descriptionText && /* @__PURE__ */ jsxs("p", {
-						className: description$4({ variant }),
+						className: description$5({ variant }),
 						children: [descriptionText, url && urlName && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("a", {
 							href: url,
 							target: "_blank",
@@ -1758,7 +1817,7 @@ const Banner = ({ title: titleText, description: descriptionText, icon: customIc
 			onClose && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onClose,
-				className: closeButton$1({ variant }),
+				className: closeButton$2({ variant }),
 				"aria-label": "Close banner",
 				children: /* @__PURE__ */ jsx("svg", {
 					className: closeIcon,
@@ -1998,7 +2057,7 @@ var stepperWrapper = "Stepper_stepperWrapper__e4qgi2";
 
 //#endregion
 //#region src/components/ui/Stepper.tsx
-const Step = ({ title: title$5, isLoading, isCompleted, isActive, isLast }) => {
+const Step = ({ title: title$6, isLoading, isCompleted, isActive, isLast }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: stepContainer,
 		children: [
@@ -2021,7 +2080,7 @@ const Step = ({ title: title$5, isLoading, isCompleted, isActive, isLast }) => {
 			!isLast && /* @__PURE__ */ jsx("div", { className: `${stepLine} ${isCompleted ? stepLineCompleted : stepLinePending}` }),
 			/* @__PURE__ */ jsx("span", {
 				className: `${stepLabel} ${isActive || isCompleted ? stepLabelActive : stepLabelInactive}`,
-				children: title$5
+				children: title$6
 			})
 		]
 	});
@@ -2045,22 +2104,33 @@ const Stepper = ({ steps, currentStep, isLoading }) => {
 
 //#endregion
 //#region src/components/extend-time-dialog/ExtendTimeDialog.css.ts
-var body$1 = "ExtendTimeDialog_body__1augvc0a";
-var closeButton = "ExtendTimeDialog_closeButton__1augvc09";
-var content$3 = "ExtendTimeDialog_content__1augvc02";
+var body$2 = "ExtendTimeDialog_body__1augvc0a";
+var closeButton$1 = "ExtendTimeDialog_closeButton__1augvc09";
+var content$4 = "ExtendTimeDialog_content__1augvc02";
+var costContent = "ExtendTimeDialog_costContent__1augvc0u";
+var costDivider = "ExtendTimeDialog_costDivider__1augvc011";
+var costError = "ExtendTimeDialog_costError__1augvc0z";
+var costHeader = "ExtendTimeDialog_costHeader__1augvc0t";
+var costLabel = "ExtendTimeDialog_costLabel__1augvc0w";
+var costLoading = "ExtendTimeDialog_costLoading__1augvc0y";
+var costRow = "ExtendTimeDialog_costRow__1augvc0v";
+var costSection = "ExtendTimeDialog_costSection__1augvc0s";
+var costValue = "ExtendTimeDialog_costValue__1augvc0x";
+var costWarning = "ExtendTimeDialog_costWarning__1augvc010";
 var dateInputWrapper = "ExtendTimeDialog_dateInputWrapper__1augvc0d";
-var description$3 = "ExtendTimeDialog_description__1augvc08";
-var errorText = "ExtendTimeDialog_errorText__1augvc0h";
+var description$4 = "ExtendTimeDialog_description__1augvc08";
+var errorText$1 = "ExtendTimeDialog_errorText__1augvc0h";
+var estimatedBadge = "ExtendTimeDialog_estimatedBadge__1augvc015";
 var fieldGroup = "ExtendTimeDialog_fieldGroup__1augvc0c";
-var footer$1 = "ExtendTimeDialog_footer__1augvc0r";
+var footer$2 = "ExtendTimeDialog_footer__1augvc0r";
 var formSection = "ExtendTimeDialog_formSection__1augvc0b";
-var header$2 = "ExtendTimeDialog_header__1augvc06";
+var header$3 = "ExtendTimeDialog_header__1augvc06";
 var infoText = "ExtendTimeDialog_infoText__1augvc0g";
 var inputError = "ExtendTimeDialog_inputError__1augvc0f";
 var loadingContent = "ExtendTimeDialog_loadingContent__1augvc04";
 var loadingOverlay = "ExtendTimeDialog_loadingOverlay__1augvc03";
-var overlay$2 = "ExtendTimeDialog_overlay__1augvc01";
-var spinner$1 = "ExtendTimeDialog_spinner__1augvc05";
+var overlay$3 = "ExtendTimeDialog_overlay__1augvc01";
+var spinner$2 = "ExtendTimeDialog_spinner__1augvc05";
 var summaryCard = "ExtendTimeDialog_summaryCard__1augvc0j";
 var summaryContent = "ExtendTimeDialog_summaryContent__1augvc0l";
 var summaryError = "ExtendTimeDialog_summaryError__1augvc0o";
@@ -2068,7 +2138,7 @@ var summaryGrid = "ExtendTimeDialog_summaryGrid__1augvc0i";
 var summaryHeader = "ExtendTimeDialog_summaryHeader__1augvc0k";
 var summarySubtext = "ExtendTimeDialog_summarySubtext__1augvc0n";
 var summaryValue = "ExtendTimeDialog_summaryValue__1augvc0m";
-var title$3 = "ExtendTimeDialog_title__1augvc07";
+var title$4 = "ExtendTimeDialog_title__1augvc07";
 
 //#endregion
 //#region src/components/extend-time-dialog/ExtendTimeDialog.tsx
@@ -2080,6 +2150,7 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 	const [dateError, setDateError] = useState(null);
 	const [currentEpochsRemaining, setCurrentEpochsRemaining] = useState(null);
 	const [expirationDates, setExpirationDates] = useState(/* @__PURE__ */ new Map());
+	const [totalFileSize, setTotalFileSize] = useState(null);
 	const { epochDurationMs, formatDate } = useEpochDuration(walrusClient);
 	const txExecutor = useTransactionExecutor({
 		suiClient,
@@ -2096,6 +2167,7 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 		try {
 			const blobType = await walrusClient.getBlobType();
 			const datesMap = /* @__PURE__ */ new Map();
+			let totalSize = 0;
 			const stakingState = await walrusClient.stakingState();
 			const currentEpoch = Number(stakingState.epoch);
 			const epochDuration = Number(stakingState.epoch_duration);
@@ -2120,6 +2192,11 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 									const remainingEpochs = Number(storage.fields.end_epoch) - currentEpoch;
 									const expirationTime = Date.now() + remainingEpochs * epochDuration;
 									datesMap.set(blobId, new Date(expirationTime));
+									const sizeField = fields.size;
+									if (sizeField !== void 0) {
+										const size = typeof sizeField === "string" ? Number(sizeField) : Number(sizeField);
+										if (!Number.isNaN(size) && size > 0) totalSize += size;
+									}
 									break;
 								}
 							}
@@ -2130,6 +2207,7 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 				cursor = ownedObjects.nextCursor;
 			}
 			setExpirationDates(datesMap);
+			setTotalFileSize(totalSize > 0 ? totalSize : null);
 		} catch (error) {
 			console.error("Error fetching expiration dates:", error);
 		}
@@ -2140,6 +2218,40 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 		suiClient,
 		siteData
 	]);
+	const { data: storageCostData, isLoading: isStorageCostLoading, error: storageCostError } = useStorageCostQuery(totalFileSize, epochs, {
+		queryClient,
+		walrusClient
+	});
+	const estimatedFileSize = useMemo(() => {
+		if (totalFileSize !== null) return null;
+		if (!siteData?.resources) return null;
+		return siteData.resources.length * 10 * 1024;
+	}, [totalFileSize, siteData?.resources]);
+	const { data: estimatedCostData, isLoading: isEstimatedCostLoading } = useStorageCostQuery(estimatedFileSize, epochs, {
+		queryClient,
+		walrusClient
+	});
+	const formatFileSize = useCallback((bytes) => {
+		if (bytes === null || bytes === 0) return "Unknown";
+		const units = [
+			"B",
+			"KB",
+			"MB",
+			"GB"
+		];
+		let size = bytes;
+		let unitIndex = 0;
+		while (size >= 1024 && unitIndex < units.length - 1) {
+			size /= 1024;
+			unitIndex++;
+		}
+		return `${size.toFixed(2)} ${units[unitIndex]}`;
+	}, []);
+	const formatWalAmount = useCallback((amount) => {
+		if (!amount) return "—";
+		const num = BigInt(amount);
+		return (Number(num) / 1e9).toFixed(6);
+	}, []);
 	useEffect(() => {
 		if (isOpen && siteId) fetchExpirationDates();
 	}, [
@@ -2334,39 +2446,39 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open: isOpen,
 		onOpenChange: (open) => !open && handleClose(),
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay$2 }), /* @__PURE__ */ jsxs(Dialog.Content, {
-			className: content$3,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay$3 }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: content$4,
 			children: [
 				isExtending && /* @__PURE__ */ jsx("div", {
 					className: loadingOverlay,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: loadingContent,
-						children: [/* @__PURE__ */ jsx(Loader2, { className: spinner$1 }), /* @__PURE__ */ jsx("p", { children: "Extending storage time..." })]
+						children: [/* @__PURE__ */ jsx(Loader2, { className: spinner$2 }), /* @__PURE__ */ jsx("p", { children: "Extending storage time..." })]
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: header$2,
+					className: header$3,
 					children: [
 						/* @__PURE__ */ jsxs(Dialog.Title, {
-							className: title$3,
+							className: title$4,
 							children: ["Extend Time for ", siteData.name]
 						}),
 						/* @__PURE__ */ jsx(Dialog.Description, {
-							className: description$3,
+							className: description$4,
 							children: "Add epochs to extend the storage time for blobs in this site. Epochs will be added to the current expiration time."
 						}),
 						/* @__PURE__ */ jsx(Dialog.Close, {
 							asChild: true,
 							children: /* @__PURE__ */ jsx("button", {
 								type: "button",
-								className: closeButton,
+								className: closeButton$1,
 								children: /* @__PURE__ */ jsx(X, { size: 20 })
 							})
 						})
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: body$1,
+					className: body$2,
 					children: [
 						currentEpochsRemaining === 0 && /* @__PURE__ */ jsx(Banner, {
 							title: "Site Expired",
@@ -2380,109 +2492,196 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: formSection,
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: fieldGroup,
-								children: [
-									/* @__PURE__ */ jsx(Label, {
-										htmlFor: "expiration-date",
-										children: "Target Expiration Date"
-									}),
-									/* @__PURE__ */ jsx("div", {
-										className: dateInputWrapper,
-										children: /* @__PURE__ */ jsx(Input, {
-											id: "expiration-date",
-											type: "date",
-											value: selectedDate,
-											min: minDate,
-											max: maxDate,
-											onChange: handleDateChange,
-											disabled: currentEpochsRemaining === 0 || isExtending,
-											className: dateError ? inputError : ""
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: fieldGroup,
+									children: [
+										/* @__PURE__ */ jsx(Label, {
+											htmlFor: "expiration-date",
+											children: "Target Expiration Date"
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: dateInputWrapper,
+											children: /* @__PURE__ */ jsx(Input, {
+												id: "expiration-date",
+												type: "date",
+												value: selectedDate,
+												min: minDate,
+												max: maxDate,
+												onChange: handleDateChange,
+												disabled: currentEpochsRemaining === 0 || isExtending,
+												className: dateError ? inputError : ""
+											})
+										}),
+										epochDurationMs && /* @__PURE__ */ jsxs("div", {
+											className: infoText,
+											children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsxs("span", { children: [
+												"1 epoch ≈",
+												" ",
+												(epochDurationMs / (1e3 * 60 * 60 * 24)).toFixed(1),
+												" ",
+												"days • Duration rounded up. Maximum 365 epochs per extend."
+											] })]
+										}),
+										dateError && /* @__PURE__ */ jsx("p", {
+											className: errorText$1,
+											children: dateError
 										})
-									}),
-									epochDurationMs && /* @__PURE__ */ jsxs("div", {
-										className: infoText,
-										children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsxs("span", { children: [
-											"1 epoch ≈",
-											" ",
-											(epochDurationMs / (1e3 * 60 * 60 * 24)).toFixed(1),
-											" ",
-											"days • Duration rounded up. Maximum 365 epochs per extend."
-										] })]
-									}),
-									dateError && /* @__PURE__ */ jsx("p", {
-										className: errorText,
-										children: dateError
-									})
-								]
-							}), /* @__PURE__ */ jsxs("div", {
-								className: summaryGrid,
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: summaryCard,
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: summaryGrid,
 									children: [/* @__PURE__ */ jsxs("div", {
-										className: summaryHeader,
-										children: [/* @__PURE__ */ jsx(Calendar, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Current Expiration" })]
-									}), currentExpiredDateMemo ? /* @__PURE__ */ jsxs("div", {
-										className: summaryContent,
-										children: [
-											/* @__PURE__ */ jsx("div", {
+										className: summaryCard,
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: summaryHeader,
+											children: [/* @__PURE__ */ jsx(Calendar, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Current Expiration" })]
+										}), currentExpiredDateMemo ? /* @__PURE__ */ jsxs("div", {
+											className: summaryContent,
+											children: [
+												/* @__PURE__ */ jsx("div", {
+													className: summaryValue,
+													children: formatDate(currentExpiredDateMemo)
+												}),
+												currentEpochsRemaining !== null && currentEpochsRemaining > 0 && /* @__PURE__ */ jsxs("div", {
+													className: summarySubtext,
+													children: [
+														currentEpochsRemaining,
+														" epoch",
+														currentEpochsRemaining !== 1 ? "s" : "",
+														" remaining"
+													]
+												}),
+												currentEpochsRemaining === 0 && /* @__PURE__ */ jsx("div", {
+													className: summaryError,
+													children: "Expired"
+												})
+											]
+										}) : /* @__PURE__ */ jsx("div", {
+											className: summaryValue,
+											children: "Unavailable"
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: summaryCard,
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: summaryHeader,
+											children: [/* @__PURE__ */ jsx(Clock, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "New Expiration Date" })]
+										}), projectedDate ? /* @__PURE__ */ jsxs("div", {
+											className: summaryContent,
+											children: [/* @__PURE__ */ jsx("div", {
 												className: summaryValue,
-												children: formatDate(currentExpiredDateMemo)
-											}),
-											currentEpochsRemaining !== null && currentEpochsRemaining > 0 && /* @__PURE__ */ jsxs("div", {
+												children: formatDate(projectedDate)
+											}), currentEpochsRemaining !== null && /* @__PURE__ */ jsxs("div", {
 												className: summarySubtext,
 												children: [
 													currentEpochsRemaining,
-													" epoch",
-													currentEpochsRemaining !== 1 ? "s" : "",
-													" remaining"
+													" →",
+													" ",
+													currentEpochsRemaining + epochs,
+													" epochs (+",
+													epochs,
+													" ",
+													"epoch",
+													epochs !== 1 ? "s" : "",
+													")"
 												]
+											})]
+										}) : /* @__PURE__ */ jsx("div", {
+											className: summaryValue,
+											children: "Select a date"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: costSection,
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: costHeader,
+										children: [
+											/* @__PURE__ */ jsx(DollarSign, { size: 16 }),
+											/* @__PURE__ */ jsx("span", { children: "Storage Cost" }),
+											totalFileSize === null && estimatedFileSize !== null && /* @__PURE__ */ jsx("span", {
+												className: estimatedBadge,
+												children: "Estimated"
+											})
+										]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: costContent,
+										children: [
+											/* @__PURE__ */ jsxs("div", {
+												className: costRow,
+												children: [/* @__PURE__ */ jsx("span", {
+													className: costLabel,
+													children: "Size:"
+												}), /* @__PURE__ */ jsx("span", {
+													className: costValue,
+													children: totalFileSize !== null ? formatFileSize(totalFileSize) : estimatedFileSize !== null ? formatFileSize(estimatedFileSize) : "Unknown"
+												})]
 											}),
-											currentEpochsRemaining === 0 && /* @__PURE__ */ jsx("div", {
-												className: summaryError,
-												children: "Expired"
+											/* @__PURE__ */ jsxs("div", {
+												className: costRow,
+												children: [/* @__PURE__ */ jsx("span", {
+													className: costLabel,
+													children: "Resources:"
+												}), /* @__PURE__ */ jsxs("span", {
+													className: costValue,
+													children: [
+														siteData?.resources?.length || 0,
+														" resources • ",
+														epochs,
+														" ",
+														"epoch",
+														epochs !== 1 ? "s" : ""
+													]
+												})]
+											}),
+											isStorageCostLoading || isEstimatedCostLoading ? /* @__PURE__ */ jsxs("div", {
+												className: costLoading,
+												children: [/* @__PURE__ */ jsx(Loader2, {
+													size: 14,
+													className: spinner$2
+												}), /* @__PURE__ */ jsx("span", { children: "Calculating cost..." })]
+											}) : storageCostData || estimatedCostData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+												totalFileSize === null && estimatedFileSize !== null && /* @__PURE__ */ jsxs("div", {
+													className: costWarning,
+													children: [/* @__PURE__ */ jsx(Info, { size: 12 }), /* @__PURE__ */ jsxs("span", { children: [
+														"Estimated cost based on",
+														" ",
+														siteData?.resources?.length || 0,
+														" resource",
+														siteData?.resources?.length !== 1 ? "s" : ""
+													] })]
+												}),
+												/* @__PURE__ */ jsx("div", { className: costDivider }),
+												/* @__PURE__ */ jsxs("div", {
+													className: costRow,
+													children: [/* @__PURE__ */ jsx("span", {
+														className: costLabel,
+														children: "Storage Cost:"
+													}), /* @__PURE__ */ jsxs("span", {
+														className: costValue,
+														children: [
+															formatWalAmount(storageCostData?.storageCost || estimatedCostData?.storageCost),
+															" ",
+															"WAL"
+														]
+													})]
+												})
+											] }) : storageCostError ? /* @__PURE__ */ jsxs("div", {
+												className: costError,
+												children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Unable to calculate cost. Please ensure you have sufficient WAL balance." })]
+											}) : /* @__PURE__ */ jsxs("div", {
+												className: costError,
+												children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Unable to calculate cost" })]
 											})
 										]
-									}) : /* @__PURE__ */ jsx("div", {
-										className: summaryValue,
-										children: "Unavailable"
-									})]
-								}), /* @__PURE__ */ jsxs("div", {
-									className: summaryCard,
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: summaryHeader,
-										children: [/* @__PURE__ */ jsx(Clock, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "New Expiration Date" })]
-									}), projectedDate ? /* @__PURE__ */ jsxs("div", {
-										className: summaryContent,
-										children: [/* @__PURE__ */ jsx("div", {
-											className: summaryValue,
-											children: formatDate(projectedDate)
-										}), currentEpochsRemaining !== null && /* @__PURE__ */ jsxs("div", {
-											className: summarySubtext,
-											children: [
-												currentEpochsRemaining,
-												" →",
-												" ",
-												currentEpochsRemaining + epochs,
-												" epochs (+",
-												epochs,
-												" ",
-												"epoch",
-												epochs !== 1 ? "s" : "",
-												")"
-											]
-										})]
-									}) : /* @__PURE__ */ jsx("div", {
-										className: summaryValue,
-										children: "Select a date"
 									})]
-								})]
-							})]
+								})
+							]
 						})
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: footer$1,
+					className: footer$2,
 					children: [/* @__PURE__ */ jsx(Button, {
 						variant: "outline",
 						onClick: handleClose,
@@ -2503,14 +2702,14 @@ var ExtendTimeDialog_default = ExtendTimeDialog;
 //#endregion
 //#region src/components/publish-menu/PublishMenu.css.ts
 var buttonGroup$1 = "PublishMenu_buttonGroup__13o2p6d7";
-var content$2 = "PublishMenu_content__13o2p6d0";
-var description$2 = "PublishMenu_description__13o2p6d4";
-var footer = "PublishMenu_footer__13o2p6d6";
-var header$1 = "PublishMenu_header__13o2p6d2";
+var content$3 = "PublishMenu_content__13o2p6d0";
+var description$3 = "PublishMenu_description__13o2p6d4";
+var footer$1 = "PublishMenu_footer__13o2p6d6";
+var header$2 = "PublishMenu_header__13o2p6d2";
 var item = "PublishMenu_item__13o2p6d1";
 var link$1 = "PublishMenu_link__13o2p6d5";
 var separator = "PublishMenu_separator__13o2p6d8";
-var title$2 = "PublishMenu_title__13o2p6d3";
+var title$3 = "PublishMenu_title__13o2p6d3";
 
 //#endregion
 //#region src/components/publish-menu/PublishMenu.tsx
@@ -2528,15 +2727,15 @@ const PublishMenu = ({ children, siteId, onPublishClick, onDomainClick, portalDo
 		asChild: true,
 		children
 	}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, {
-		className: content$2,
+		className: content$3,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: header$1,
+				className: header$2,
 				children: [/* @__PURE__ */ jsx("h4", {
-					className: title$2,
+					className: title$3,
 					children: isDeployed ? "Update your Site" : "Publish your Site"
 				}), isDeployed && walrusSiteUrl ? associatedDomains.length > 0 && suiNSUrl ? /* @__PURE__ */ jsxs("p", {
-					className: description$2,
+					className: description$3,
 					children: [
 						"Your site is live at",
 						" ",
@@ -2550,7 +2749,7 @@ const PublishMenu = ({ children, siteId, onPublishClick, onDomainClick, portalDo
 						". You can update your site to reflect the latest changes."
 					]
 				}) : /* @__PURE__ */ jsxs("p", {
-					className: description$2,
+					className: description$3,
 					children: [
 						"Your site is live at",
 						" ",
@@ -2569,7 +2768,7 @@ const PublishMenu = ({ children, siteId, onPublishClick, onDomainClick, portalDo
 						". You can link SuiNS domains to view your site in the portal."
 					]
 				}) : /* @__PURE__ */ jsxs("p", {
-					className: description$2,
+					className: description$3,
 					children: [
 						"Deploy your app to",
 						" ",
@@ -2633,7 +2832,7 @@ const PublishMenu = ({ children, siteId, onPublishClick, onDomainClick, portalDo
 			}),
 			/* @__PURE__ */ jsx(DropdownMenu.Separator, { className: separator }),
 			/* @__PURE__ */ jsxs("div", {
-				className: footer,
+				className: footer$1,
 				children: [isDeployed && walrusSiteUrl ? /* @__PURE__ */ jsxs("div", {
 					className: buttonGroup$1,
 					children: [suiNSUrl ? /* @__PURE__ */ jsx(DropdownMenu.Item, {
@@ -2685,33 +2884,12 @@ const PublishMenu = ({ children, siteId, onPublishClick, onDomainClick, portalDo
 };
 var PublishMenu_default = PublishMenu;
 
-//#endregion
-//#region src/queries/storage-cost.query.ts
-function useStorageCostQuery(fileSize, epochs, clients) {
-	const { walrusClient, queryClient } = clients;
-	return useQuery({
-		queryKey: queryKeys.storageCost(fileSize, epochs),
-		queryFn: async () => {
-			if (!walrusClient) throw new Error("Walrus client not available");
-			if (fileSize === null) throw new Error("Invalid file size");
-			const storageCost = await walrusClient.storageCost(fileSize, epochs);
-			return {
-				storageCost: storageCost.storageCost.toString(),
-				writeCost: storageCost.writeCost.toString(),
-				totalCost: storageCost.totalCost.toString()
-			};
-		},
-		enabled: !!walrusClient && fileSize !== null && fileSize > 0 && epochs > 0,
-		staleTime: 300 * 1e3
-	}, queryClient);
-}
-
 //#endregion
 //#region src/components/publish-modal/PublishModal.css.ts
 var buttonGroup = "PublishModal_buttonGroup__m8gxhre";
-var charCount = "PublishModal_charCount__m8gxhr11";
-var content$1 = "PublishModal_content__m8gxhr2";
-var description$1 = "PublishModal_description__m8gxhr4";
+var charCount$1 = "PublishModal_charCount__m8gxhr11";
+var content$2 = "PublishModal_content__m8gxhr2";
+var description$2 = "PublishModal_description__m8gxhr4";
 var dialogBodyTwoColumn = "PublishModal_dialogBodyTwoColumn__m8gxhru";
 var dialogContent = "PublishModal_dialogContent__m8gxhrr";
 var dialogFooter = "PublishModal_dialogFooter__m8gxhrw";
@@ -2719,30 +2897,30 @@ var dialogHeader = "PublishModal_dialogHeader__m8gxhrs";
 var dialogOverlay = "PublishModal_dialogOverlay__m8gxhrq";
 var dialogRightColumn = "PublishModal_dialogRightColumn__m8gxhrv";
 var editButton = "PublishModal_editButton__m8gxhro";
-var fieldLabel = "PublishModal_fieldLabel__m8gxhr10";
+var fieldLabel$1 = "PublishModal_fieldLabel__m8gxhr10";
 var flickeringGrid = "PublishModal_flickeringGrid__m8gxhri";
 var leftColumn = "PublishModal_leftColumn__m8gxhr8";
 var maskLayer = "PublishModal_maskLayer__m8gxhrj";
 var metadataFields = "PublishModal_metadataFields__m8gxhra";
-var overlay$1 = "PublishModal_overlay__m8gxhr1";
+var overlay$2 = "PublishModal_overlay__m8gxhr1";
 var placeholderContent = "PublishModal_placeholderContent__m8gxhrk";
 var placeholderIcon = "PublishModal_placeholderIcon__m8gxhrn";
 var previewArea = "PublishModal_previewArea__m8gxhrh";
 var previewContainer = "PublishModal_previewContainer__m8gxhrg";
-var previewImage = "PublishModal_previewImage__m8gxhrm";
+var previewImage$1 = "PublishModal_previewImage__m8gxhrm";
 var previewImageWrapper = "PublishModal_previewImageWrapper__m8gxhrl";
 var rightColumn = "PublishModal_rightColumn__m8gxhr9";
 var section$1 = "PublishModal_section__m8gxhr6";
-var spinner = "PublishModal_spinner__m8gxhr1e";
+var spinner$1 = "PublishModal_spinner__m8gxhr1e";
 var storageCostLabel = "PublishModal_storageCostLabel__m8gxhr1a";
 var storageCostSection = "PublishModal_storageCostSection__m8gxhr18";
 var storageCostSummary = "PublishModal_storageCostSummary__m8gxhr19";
 var storageCostValue = "PublishModal_storageCostValue__m8gxhr1b";
 var storageDetailsBox = "PublishModal_storageDetailsBox__m8gxhr1d";
-var title$1 = "PublishModal_title__m8gxhr3";
+var title$2 = "PublishModal_title__m8gxhr3";
 var twoColumnSection = "PublishModal_twoColumnSection__m8gxhr7";
 var uploadAreaSquare = "PublishModal_uploadAreaSquare__m8gxhry";
-var uploadPlaceholder = "PublishModal_uploadPlaceholder__m8gxhrz";
+var uploadPlaceholder$1 = "PublishModal_uploadPlaceholder__m8gxhrz";
 
 //#endregion
 //#region src/components/publish-modal/PublishModal.tsx
@@ -2761,8 +2939,8 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 	const epochs = useStore(siteMetadataStore.epochs);
 	const isDirty = useStore(siteMetadataStore.isDirty);
 	const isLoading = useStore(siteMetadataStore.loading);
-	const title$5 = useStore(siteMetadataStore.title);
-	const description$5 = useStore(siteMetadataStore.description);
+	const title$6 = useStore(siteMetadataStore.title);
+	const description$6 = useStore(siteMetadataStore.description);
 	const { epochDurationMs, getExpirationDate } = useEpochDuration(walrusClient);
 	useEffect(() => {
 		if (siteId && epochs && previousEpochs === 0) setPreviousEpochs(epochs);
@@ -2852,15 +3030,15 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
 		open: isOpen,
 		onOpenChange: sitePublishingStore.closePublishDialog,
-		children: [/* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay$1 }), /* @__PURE__ */ jsxs(Dialog.Content, {
-			className: content$1,
+		children: [/* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay$2 }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: content$2,
 			children: [
 				/* @__PURE__ */ jsx(Dialog.Title, {
-					className: title$1,
+					className: title$2,
 					children: siteId ? "Edit Site" : "Publish New Site"
 				}),
 				/* @__PURE__ */ jsx(Dialog.Description, {
-					className: description$1,
+					className: description$2,
 					children: "Make your project live in the Walrus network."
 				}),
 				/* @__PURE__ */ jsx(Stepper, {
@@ -2882,7 +3060,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 										/* @__PURE__ */ jsx("img", {
 											src: imageDisplayUrl,
 											alt: "Site preview",
-											className: previewImage
+											className: previewImage$1
 										}),
 										/* @__PURE__ */ jsx("div", { style: {
 											position: "absolute",
@@ -2890,7 +3068,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 											background: "linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.7) 100%)",
 											pointerEvents: "none"
 										} }),
-										(title$5 || description$5) && /* @__PURE__ */ jsxs("div", {
+										(title$6 || description$6) && /* @__PURE__ */ jsxs("div", {
 											style: {
 												position: "absolute",
 												bottom: 0,
@@ -2900,7 +3078,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 												color: "white",
 												pointerEvents: "none"
 											},
-											children: [title$5 && /* @__PURE__ */ jsx("h3", {
+											children: [title$6 && /* @__PURE__ */ jsx("h3", {
 												style: {
 													fontSize: "0.875rem",
 													fontWeight: 600,
@@ -2912,8 +3090,8 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 													WebkitLineClamp: 2,
 													WebkitBoxOrient: "vertical"
 												},
-												children: title$5
-											}), description$5 && /* @__PURE__ */ jsx("p", {
+												children: title$6
+											}), description$6 && /* @__PURE__ */ jsx("p", {
 												style: {
 													fontSize: "0.75rem",
 													opacity: .9,
@@ -2924,7 +3102,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 													WebkitLineClamp: 2,
 													WebkitBoxOrient: "vertical"
 												},
-												children: description$5
+												children: description$6
 											})]
 										})
 									]
@@ -3134,9 +3312,9 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 								className: dialogRightColumn,
 								children: [
 									/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsxs("div", {
-										className: fieldLabel,
+										className: fieldLabel$1,
 										children: [/* @__PURE__ */ jsx(Label, { children: "Title" }), /* @__PURE__ */ jsxs("span", {
-											className: charCount,
+											className: charCount$1,
 											children: [siteMetadataStore.title.get().length, "/120"]
 										})]
 									}), /* @__PURE__ */ jsx(Input, {
@@ -3145,9 +3323,9 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 										placeholder: "Add a title..."
 									})] }),
 									/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsxs("div", {
-										className: fieldLabel,
+										className: fieldLabel$1,
 										children: [/* @__PURE__ */ jsx(Label, { children: "Description" }), /* @__PURE__ */ jsxs("span", {
-											className: charCount,
+											className: charCount$1,
 											children: [siteMetadataStore.description.get().length, "/150"]
 										})]
 									}), /* @__PURE__ */ jsx(Textarea, {
@@ -3169,7 +3347,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 									})] }),
 									!siteId && /* @__PURE__ */ jsxs("fieldset", { children: [
 										/* @__PURE__ */ jsxs("div", {
-											className: fieldLabel,
+											className: fieldLabel$1,
 											children: [/* @__PURE__ */ jsx(Label, { children: "Storage Duration" }), epochs > 0 && /* @__PURE__ */ jsxs("span", {
 												style: {
 													fontSize: "0.75rem",
@@ -3262,7 +3440,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 							disabled: isLoading || isExtending,
 							children: isLoading || isExtending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, {
 								size: 16,
-								className: spinner
+								className: spinner$1
 							}), isExtending ? "Extending Storage..." : "Saving..."] }) : "Save"
 						})]
 					})
@@ -3283,7 +3461,7 @@ const PublishModal = ({ siteId, assets, onDeploy, onSaveMetadata, onExtendBlobs,
 							disabled: isWorking,
 							children: [isWorking && /* @__PURE__ */ jsx(Loader2, {
 								size: 16,
-								className: spinner
+								className: spinner$1
 							}), deployStatusText]
 						})
 					}), /* @__PURE__ */ jsx(Banner, {
@@ -3385,7 +3563,7 @@ function MetadataEditDialog({ isOpen, onClose }) {
 					className: dialogBodyTwoColumn,
 					children: /* @__PURE__ */ jsxs("div", { children: [
 						/* @__PURE__ */ jsxs("div", {
-							className: fieldLabel,
+							className: fieldLabel$1,
 							children: [/* @__PURE__ */ jsx(Label, { children: "Preview Image" }), /* @__PURE__ */ jsx("span", {
 								style: {
 									fontSize: "0.75rem",
@@ -3454,7 +3632,7 @@ function MetadataEditDialog({ isOpen, onClose }) {
 									opacity: isLoading ? .6 : 1
 								},
 								children: isLoading ? /* @__PURE__ */ jsxs("div", {
-									className: uploadPlaceholder,
+									className: uploadPlaceholder$1,
 									children: [/* @__PURE__ */ jsx("div", { style: {
 										width: "32px",
 										height: "32px",
@@ -3481,7 +3659,7 @@ function MetadataEditDialog({ isOpen, onClose }) {
 										borderRadius: "0.5rem"
 									}
 								}) : /* @__PURE__ */ jsxs("div", {
-									className: uploadPlaceholder,
+									className: uploadPlaceholder$1,
 									children: [
 										/* @__PURE__ */ jsx(Upload, {
 											size: 32,
@@ -4452,9 +4630,9 @@ var DomainCardSvg_default = DomainCardSvg;
 
 //#endregion
 //#region src/components/suins-modal/SuiNsModal.css.ts
-var body = "SuiNsModal_body__lh8k8k5";
-var content = "SuiNsModal_content__lh8k8k1";
-var description = "SuiNsModal_description__lh8k8k4";
+var body$1 = "SuiNsModal_body__lh8k8k5";
+var content$1 = "SuiNsModal_content__lh8k8k1";
+var description$1 = "SuiNsModal_description__lh8k8k4";
 var domainCard = "SuiNsModal_domainCard__lh8k8kb";
 var domainCardBg = "SuiNsModal_domainCardBg__lh8k8kc";
 var domainCardGrid = "SuiNsModal_domainCardGrid__lh8k8ka";
@@ -4462,13 +4640,13 @@ var domainExpiry = "SuiNsModal_domainExpiry__lh8k8ke";
 var domainItem = "SuiNsModal_domainItem__lh8k8k9";
 var domainList = "SuiNsModal_domainList__lh8k8k8";
 var domainName = "SuiNsModal_domainName__lh8k8kd";
-var header = "SuiNsModal_header__lh8k8k2";
+var header$1 = "SuiNsModal_header__lh8k8k2";
 var link = "SuiNsModal_link__lh8k8kg";
 var loadingSpinner = "SuiNsModal_loadingSpinner__lh8k8kh";
-var overlay = "SuiNsModal_overlay__lh8k8k0";
+var overlay$1 = "SuiNsModal_overlay__lh8k8k0";
 var section = "SuiNsModal_section__lh8k8k6";
 var sectionTitle = "SuiNsModal_sectionTitle__lh8k8k7";
-var title = "SuiNsModal_title__lh8k8k3";
+var title$1 = "SuiNsModal_title__lh8k8k3";
 
 //#endregion
 //#region src/components/suins-modal/RegisterSuiNsDialog.tsx
@@ -4499,13 +4677,13 @@ const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, cl
 		open: isOpen,
 		onOpenChange: (open) => !open && handleClose(),
 		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
-			className: overlay,
+			className: overlay$1,
 			style: {
 				zIndex: 51,
 				backgroundColor: "rgba(0, 0, 0, 0.7)"
 			}
 		}), /* @__PURE__ */ jsxs(Dialog.Content, {
-			className: content,
+			className: content$1,
 			style: {
 				maxWidth: "32rem",
 				zIndex: 52
@@ -4545,14 +4723,14 @@ const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, cl
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: header,
+					className: header$1,
 					children: [
 						/* @__PURE__ */ jsx(Dialog.Title, {
-							className: title,
+							className: title$1,
 							children: "Register SuiNS Domain"
 						}),
 						/* @__PURE__ */ jsx(Dialog.Description, {
-							className: description,
+							className: description$1,
 							children: "Search and register a new .sui domain name"
 						}),
 						/* @__PURE__ */ jsx(Dialog.Close, {
@@ -4583,7 +4761,7 @@ const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, cl
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: body,
+					className: body$1,
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							style: { marginBottom: "1rem" },
@@ -4959,8 +5137,8 @@ const SuiNsModal = ({ siteId, onAssociateDomain, currentAccount, portalDomain, p
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
 		open: isOpen,
 		onOpenChange: isDomainDialogOpen.set,
-		children: [/* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay }), /* @__PURE__ */ jsxs(Dialog.Content, {
-			className: content,
+		children: [/* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay$1 }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: content$1,
 			children: [
 				isAssigning && /* @__PURE__ */ jsx("div", {
 					style: {
@@ -4996,17 +5174,17 @@ const SuiNsModal = ({ siteId, onAssociateDomain, currentAccount, portalDomain, p
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: header,
+					className: header$1,
 					children: [/* @__PURE__ */ jsx(Dialog.Title, {
-						className: title,
+						className: title$1,
 						children: "Customize Domain"
 					}), /* @__PURE__ */ jsx(Dialog.Description, {
-						className: description,
+						className: description$1,
 						children: "Associate your website with a SuiNS domain for easy access"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: body,
+					className: body$1,
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: section,
@@ -5252,5 +5430,392 @@ const PublishButton = ({ children, siteId, assets, onUpdateSiteMetadata, onAssoc
 var PublishButton_default = PublishButton;
 
 //#endregion
-export { Banner, Button, DeploySteps, DeploymentStatus, FlickeringGrid, Input, Label, PublishButton_default as PublishButton, PublishMenu_default as PublishMenu, PublishModal_default as PublishModal, Stepper, SuiNsModal_default as SuiNsModal, Textarea, isAssigningDomain, isDomainDialogOpen, isExtendTimeDialogOpen, isRegisterSuiNSDomainDialogOpen, siteMetadataStore, sitePublishingStore, useEpochDuration, useSitePublishing, useSuiNsDomainsQuery, useSuiNsRegistration, useTransactionExecutor, useWalrusSiteQuery, useWalrusSitesQuery, useZenFsWorkspace, useZenfsFilesQuery };
+//#region src/components/update-metadata-modal/UpdateMetadataModal.css.ts
+var body = "UpdateMetadataModal_body__1b8g8dv7";
+var charCount = "UpdateMetadataModal_charCount__1b8g8dvb";
+var closeButton = "UpdateMetadataModal_closeButton__1b8g8dv6";
+var content = "UpdateMetadataModal_content__1b8g8dv2";
+var description = "UpdateMetadataModal_description__1b8g8dv5";
+var errorBanner = "UpdateMetadataModal_errorBanner__1b8g8dvo";
+var errorText = "UpdateMetadataModal_errorText__1b8g8dvn";
+var fieldLabel = "UpdateMetadataModal_fieldLabel__1b8g8dva";
+var footer = "UpdateMetadataModal_footer__1b8g8dv9";
+var header = "UpdateMetadataModal_header__1b8g8dv3";
+var imagePreview = "UpdateMetadataModal_imagePreview__1b8g8dvl";
+var loadingContainer = "UpdateMetadataModal_loadingContainer__1b8g8dv8";
+var optionalLabel = "UpdateMetadataModal_optionalLabel__1b8g8dvc";
+var overlay = "UpdateMetadataModal_overlay__1b8g8dv1";
+var previewImage = "UpdateMetadataModal_previewImage__1b8g8dvj";
+var spinner = "UpdateMetadataModal_spinner__1b8g8dvq";
+var title = "UpdateMetadataModal_title__1b8g8dv4";
+var uploadArea = "UpdateMetadataModal_uploadArea__1b8g8dvg";
+var uploadHint = "UpdateMetadataModal_uploadHint__1b8g8dvi";
+var uploadModeButton = "UpdateMetadataModal_uploadModeButton__1b8g8dve";
+var uploadModeButtonActive = "UpdateMetadataModal_uploadModeButtonActive__1b8g8dvf";
+var uploadModeToggle = "UpdateMetadataModal_uploadModeToggle__1b8g8dvd";
+var uploadPlaceholder = "UpdateMetadataModal_uploadPlaceholder__1b8g8dvh";
+var urlInputContainer = "UpdateMetadataModal_urlInputContainer__1b8g8dvk";
+var urlInputWrapper = "UpdateMetadataModal_urlInputWrapper__1b8g8dvm";
+var warningBanner = "UpdateMetadataModal_warningBanner__1b8g8dvp";
+
+//#endregion
+//#region src/components/update-metadata-modal/UpdateMetadataModal.tsx
+/**
+* UpdateMetadataModal Component
+*
+* A modal dialog component for updating metadata (name, description, project URL, preview image)
+* of an existing Walrus site on the Sui blockchain.
+*
+* ## Features
+* - Updates site name (max 120 chars), description (max 150 chars), project URL, and preview image
+* - Supports image upload (max 5MB) or URL input
+* - Validates wallet connection before allowing submission
+* - Automatically loads current site metadata when opened
+* - Shows loading states and error messages
+*
+* ## Usage
+*
+* ```tsx
+* import { UpdateMetadataModal, isUpdateMetadataModalOpen } from '@cmdoss/walrus-site-builder-react'
+* import { useStore } from '@nanostores/react'
+*
+* function MyComponent() {
+*   const isOpen = useStore(isUpdateMetadataModalOpen)
+*
+*   return (
+*     <UpdateMetadataModal
+*       siteId="0x123..."
+*       isOpen={isOpen}
+*       onOpenChange={isUpdateMetadataModalOpen.set}
+*       onSuccess={(digest) => console.log('Updated:', digest)}
+*       clients={{ suiClient, queryClient, walrusClient }}
+*       currentAccount={currentAccount}
+*       signAndExecuteTransaction={signAndExecuteTransaction}
+*     />
+*   )
+* }
+* ```
+*
+* ## State Management
+*
+* The modal visibility is typically controlled via the `isUpdateMetadataModalOpen` atom:
+*
+* ```tsx
+* import { isUpdateMetadataModalOpen } from '@cmdoss/walrus-site-builder-react'
+*
+* // Open modal
+* isUpdateMetadataModalOpen.set(true)
+*
+* // Close modal
+* isUpdateMetadataModalOpen.set(false)
+* ```
+*
+* @see {@link useUpdateSiteMetadata} - The hook used internally for metadata updates
+* @see {@link useWalrusSiteQuery} - Used to fetch current site data
+*/
+const UpdateMetadataModal = ({ siteId, isOpen, onOpenChange, onSuccess, onError, clients: { suiClient, queryClient, walrusClient }, currentAccount, signAndExecuteTransaction, sponsorConfig }) => {
+	const [siteName, setSiteName] = useState("");
+	const [description$6, setDescription] = useState("");
+	const [projectUrl, setProjectUrl] = useState("");
+	const [imageUrl, setImageUrl] = useState("");
+	const [uploadMode, setUploadMode] = useState("url");
+	const [urlInput, setUrlInput] = useState("");
+	const [urlError, setUrlError] = useState("");
+	const [fileSizeError, setFileSizeError] = useState("");
+	const fileInputRef = useRef(null);
+	const MAX_FILE_SIZE = 5 * 1024 * 1024;
+	const { data: siteData, isLoading: isLoadingSite } = useWalrusSiteQuery(siteId, {
+		suiClient,
+		queryClient
+	});
+	const { updateSiteMetadata, isUpdating, error } = useUpdateSiteMetadata({
+		siteId,
+		clients: {
+			suiClient,
+			queryClient,
+			walrusClient
+		},
+		currentAccount,
+		signAndExecuteTransaction,
+		sponsorConfig
+	});
+	const isSdkReady = !!currentAccount && !!suiClient && !!walrusClient;
+	useEffect(() => {
+		if (siteData && isOpen) {
+			setSiteName(siteData.name || "");
+			setDescription(siteData.description || "");
+			setProjectUrl(siteData.project_url || "");
+			setImageUrl(siteData.image_url || "");
+			setUrlInput(siteData.image_url || "");
+		}
+	}, [siteData, isOpen]);
+	useEffect(() => {
+		if (!isOpen) {
+			setUrlError("");
+			setFileSizeError("");
+			setUploadMode("url");
+		}
+	}, [isOpen]);
+	const handleImageChange = (e) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+		if (file.size > MAX_FILE_SIZE) {
+			setFileSizeError(`File size exceeds 5MB limit (${(file.size / 1024 / 1024).toFixed(2)}MB)`);
+			e.target.value = "";
+			return;
+		}
+		setFileSizeError("");
+		const reader = new FileReader();
+		reader.onload = (e$1) => {
+			const result = e$1.target?.result;
+			if (typeof result === "string") setImageUrl(result);
+		};
+		reader.readAsDataURL(file);
+	};
+	const handleUrlSubmit = () => {
+		if (!urlInput.trim()) {
+			setUrlError("Please enter a valid URL");
+			return;
+		}
+		try {
+			new URL(urlInput);
+			setImageUrl(urlInput);
+			setUrlError("");
+		} catch {
+			setUrlError("Please enter a valid URL");
+		}
+	};
+	const handleSubmit = async () => {
+		if (!isSdkReady) {
+			onError?.(/* @__PURE__ */ new Error("Wallet not connected. Please connect your wallet first."));
+			return;
+		}
+		try {
+			const digest = await updateSiteMetadata({
+				siteName,
+				metadata: {
+					description: description$6 || void 0,
+					project_url: projectUrl || void 0,
+					image_url: imageUrl || void 0
+				}
+			});
+			onSuccess?.(digest);
+			onOpenChange(false);
+		} catch (err) {
+			const error$1 = err instanceof Error ? err : /* @__PURE__ */ new Error("Unknown error");
+			onError?.(error$1);
+		}
+	};
+	const hasChanges = siteName !== (siteData?.name || "") || description$6 !== (siteData?.description || "") || projectUrl !== (siteData?.project_url || "") || imageUrl !== (siteData?.image_url || "");
+	const isLoading = isLoadingSite || isUpdating;
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: isOpen,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlay }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: content,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: header,
+					children: [
+						/* @__PURE__ */ jsx(Dialog.Title, {
+							className: title,
+							children: "Update Site Metadata"
+						}),
+						/* @__PURE__ */ jsx(Dialog.Description, {
+							className: description,
+							children: "Update the metadata for your site"
+						}),
+						/* @__PURE__ */ jsx(Dialog.Close, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: closeButton,
+								children: /* @__PURE__ */ jsx(X, { size: 20 })
+							})
+						})
+					]
+				}),
+				isLoadingSite ? /* @__PURE__ */ jsxs("div", {
+					className: loadingContainer,
+					children: [/* @__PURE__ */ jsx(Loader2, {
+						size: 24,
+						className: spinner
+					}), /* @__PURE__ */ jsx("p", { children: "Loading site data..." })]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: body,
+					children: [
+						/* @__PURE__ */ jsxs("fieldset", { children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: fieldLabel,
+								children: [/* @__PURE__ */ jsx(Label, { children: "Preview Image" }), /* @__PURE__ */ jsx("span", {
+									className: optionalLabel,
+									children: "Max 5MB"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: uploadModeToggle,
+								children: [/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => {
+										setUploadMode("file");
+										setUrlError("");
+									},
+									className: uploadMode === "file" ? uploadModeButtonActive : uploadModeButton,
+									children: "Upload File"
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => {
+										setUploadMode("url");
+										setFileSizeError("");
+									},
+									className: uploadMode === "url" ? uploadModeButtonActive : uploadModeButton,
+									children: "From URL"
+								})]
+							}),
+							uploadMode === "file" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("div", {
+									className: uploadArea,
+									onClick: () => !isUpdating && fileInputRef.current?.click(),
+									style: {
+										cursor: isUpdating ? "wait" : "pointer",
+										opacity: isUpdating ? .6 : 1
+									},
+									children: imageUrl ? /* @__PURE__ */ jsx("img", {
+										src: imageUrl,
+										alt: "Preview",
+										className: previewImage
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: uploadPlaceholder,
+										children: [
+											/* @__PURE__ */ jsx(Upload, { size: 32 }),
+											/* @__PURE__ */ jsx("p", { children: "Click to upload" }),
+											/* @__PURE__ */ jsx("p", {
+												className: uploadHint,
+												children: "Square image recommended"
+											})
+										]
+									})
+								}),
+								/* @__PURE__ */ jsx("input", {
+									ref: fileInputRef,
+									type: "file",
+									accept: "image/*",
+									onChange: handleImageChange,
+									style: { display: "none" }
+								}),
+								fileSizeError && /* @__PURE__ */ jsxs("p", {
+									className: errorText,
+									children: [/* @__PURE__ */ jsx(Info, { size: 14 }), fileSizeError]
+								})
+							] }) : /* @__PURE__ */ jsxs("div", {
+								className: urlInputContainer,
+								children: [
+									imageUrl && /* @__PURE__ */ jsx("div", {
+										className: imagePreview,
+										children: /* @__PURE__ */ jsx("img", {
+											src: imageUrl,
+											alt: "Preview",
+											className: previewImage
+										})
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: urlInputWrapper,
+										children: [/* @__PURE__ */ jsx(Input, {
+											value: urlInput,
+											onChange: (e) => {
+												setUrlInput(e.target.value);
+												setUrlError("");
+											},
+											onKeyDown: (e) => {
+												if (e.key === "Enter") handleUrlSubmit();
+											},
+											placeholder: "https://example.com/image.png",
+											disabled: isUpdating
+										}), /* @__PURE__ */ jsx(Button, {
+											onClick: handleUrlSubmit,
+											disabled: isUpdating,
+											style: { flexShrink: 0 },
+											children: "Apply"
+										})]
+									}),
+									urlError && /* @__PURE__ */ jsxs("p", {
+										className: errorText,
+										children: [/* @__PURE__ */ jsx(Info, { size: 14 }), urlError]
+									})
+								]
+							})
+						] }),
+						/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsxs("div", {
+							className: fieldLabel,
+							children: [/* @__PURE__ */ jsx(Label, { children: "Site Name" }), /* @__PURE__ */ jsxs("span", {
+								className: charCount,
+								children: [siteName.length, "/120"]
+							})]
+						}), /* @__PURE__ */ jsx(Input, {
+							value: siteName,
+							onChange: (e) => setSiteName(e.target.value.slice(0, 120)),
+							placeholder: "Enter site name...",
+							disabled: isUpdating
+						})] }),
+						/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsxs("div", {
+							className: fieldLabel,
+							children: [/* @__PURE__ */ jsx(Label, { children: "Description" }), /* @__PURE__ */ jsxs("span", {
+								className: charCount,
+								children: [description$6.length, "/150"]
+							})]
+						}), /* @__PURE__ */ jsx(Textarea, {
+							value: description$6,
+							onChange: (e) => setDescription(e.target.value.slice(0, 150)),
+							placeholder: "Enter description...",
+							rows: 4,
+							disabled: isUpdating
+						})] }),
+						/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsxs(Label, { children: ["Project URL", /* @__PURE__ */ jsx("span", {
+							className: optionalLabel,
+							children: " (Optional)"
+						})] }), /* @__PURE__ */ jsx(Input, {
+							value: projectUrl,
+							onChange: (e) => setProjectUrl(e.target.value),
+							placeholder: "https://github.com/username/project",
+							disabled: isUpdating
+						})] }),
+						!isSdkReady && /* @__PURE__ */ jsxs("div", {
+							className: warningBanner,
+							children: [/* @__PURE__ */ jsx(Info, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "Please connect your wallet to update metadata" })]
+						}),
+						error && /* @__PURE__ */ jsxs("div", {
+							className: errorBanner,
+							children: [/* @__PURE__ */ jsx(Info, { size: 16 }), /* @__PURE__ */ jsxs("span", { children: ["Failed to update metadata: ", error.message] })]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: footer,
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onOpenChange(false),
+						disabled: isUpdating,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsxs(Button, {
+						onClick: handleSubmit,
+						disabled: !hasChanges || isLoading || !isSdkReady,
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "0.5rem"
+						},
+						children: [isUpdating && /* @__PURE__ */ jsx(Loader2, {
+							size: 16,
+							className: spinner
+						}), isUpdating ? "Updating..." : !isSdkReady ? "Connect Wallet" : "Update Metadata"]
+					})]
+				})
+			]
+		})] })
+	});
+};
+var UpdateMetadataModal_default = UpdateMetadataModal;
+
+//#endregion
+export { Banner, Button, DeploySteps, DeploymentStatus, FlickeringGrid, Input, Label, PublishButton_default as PublishButton, PublishMenu_default as PublishMenu, PublishModal_default as PublishModal, Stepper, SuiNsModal_default as SuiNsModal, Textarea, UpdateMetadataModal_default as UpdateMetadataModal, isAssigningDomain, isDomainDialogOpen, isExtendTimeDialogOpen, isRegisterSuiNSDomainDialogOpen, isUpdateMetadataModalOpen, siteMetadataStore, sitePublishingStore, useEpochDuration, useSitePublishing, useSuiNsDomainsQuery, useSuiNsRegistration, useTransactionExecutor, useUpdateSiteMetadata, useWalrusSiteQuery, useWalrusSitesQuery, useZenFsWorkspace, useZenfsFilesQuery };
 //# sourceMappingURL=index.js.map