@medialane/ui 0.295.0 → 0.296.0

package/dist/components/fast-mint/fast-mint.js

@@ -1,156 +1,29 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import Image from "next/image";
 import { useForm } from "react-hook-form";
-import { buildAssetMetadata } from "@medialane/sdk";
+import { Loader2 } from "lucide-react";
+import { profileHref } from "@medialane/sdk";
 import { describeError } from "../../utils/describe-error.js";
-import { UPLOAD_LIMITS, acceptFor, uploadError } from "../../utils/upload-limits.js";
-import { executeIntent, deployedCollectionFromReceipt, mintedTokenIdFromReceipt } from "@medialane/sdk/starknet";
-import { mintableCollections, collectionKey } from "./mintable-collections.js";
-import {
-  ImagePlus,
-  Music,
-  Video,
-  FileText,
-  Loader2,
-  Layers,
-  ImagePlus as SingleIcon,
-  ChevronDown,
-  Boxes,
-  Plus,
-  Check,
-  ShieldCheck
-} from "lucide-react";
+import { uploadError } from "../../utils/upload-limits.js";
+import { uploadFileToIpfs } from "../../utils/ipfs-upload.js";
+import { cn } from "../../utils/cn.js";
 import { Input } from "../input.js";
 import { Textarea } from "../textarea.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
 import { MedialaneCollectionCard } from "../medialane-collection-card.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../dialog.js";
-import { IPTypeFields } from "../ip-type-fields.js";
-import {
-  IP_TYPES,
-  LICENSE_TYPES,
-  GEOGRAPHIC_SCOPES,
-  AI_POLICIES,
-  DERIVATIVES_OPTIONS
-} from "../../data/ip.js";
-import { IP_TEMPLATES } from "../../data/ip-templates.js";
-import { suggestLaunchpadSymbol } from "../../utils/launchpad-defaults.js";
-import { uploadFileToIpfs, uploadJsonToIpfs, uploadFailureToast } from "../../utils/ipfs-upload.js";
-import { cn } from "../../utils/cn.js";
 import { Dropzone } from "./dropzone.js";
 import { SuccessView } from "./success-view.js";
-import { profileHref } from "@medialane/sdk";
-import { useImageUrl } from "../../utils/use-image-url.js";
-const MEDIA_ROUTE_MIME_TYPES = new Set(UPLOAD_LIMITS.media.mimeTypes);
-const DOCUMENT_MIME_TYPES = new Set(UPLOAD_LIMITS.document.mimeTypes.filter((type) => type !== "application/octet-stream"));
-function detectMediaKind(mime) {
-  if (mime.startsWith("image/")) return MEDIA_ROUTE_MIME_TYPES.has(mime) ? "image" : null;
-  if (mime.startsWith("video/")) return MEDIA_ROUTE_MIME_TYPES.has(mime) ? "video" : null;
-  if (mime.startsWith("audio/")) return MEDIA_ROUTE_MIME_TYPES.has(mime) ? "audio" : null;
-  if (DOCUMENT_MIME_TYPES.has(mime)) return "document";
-  return null;
-}
-const IP_TYPE_BY_KIND = {
-  image: "NFT",
-  audio: "Audio",
-  video: "Video",
-  document: "Documents"
-};
-const MEDIA_KIND_ICON = {
-  image: ImagePlus,
-  audio: Music,
-  video: Video,
-  document: FileText
-};
-function ToggleGroup({
-  value,
-  options,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "flex rounded-lg border border-border overflow-hidden w-full", children: options.map((opt, i) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange(opt),
-      className: cn(
-        "flex-1 px-3 py-2 text-sm transition-colors",
-        i > 0 && "border-l border-border",
-        value === opt ? "bg-primary text-primary-foreground font-medium" : "bg-background hover:bg-muted text-muted-foreground"
-      ),
-      children: opt
-    },
-    opt
-  )) });
-}
-function collectionDisplayLabel(col) {
-  return col.name || col.symbol || `Collection #${col.collectionId}`;
-}
-function CollectionThumb({ image }) {
-  const resolveImage = useImageUrl();
-  const imageUrl = resolveImage(image);
-  return /* @__PURE__ */ jsx("div", { className: "relative h-10 w-10 rounded-lg overflow-hidden bg-muted shrink-0", children: imageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Boxes, { className: "h-4 w-4 text-muted-foreground/40" }) }) });
-}
-function CollectionPicker({
-  collections,
-  value,
-  onChange,
-  valueOf
-}) {
-  const [open, setOpen] = useState(false);
-  const selected = value ? collections.find((c) => valueOf(c) === value) ?? null : null;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": open,
-        className: "flex w-full items-center gap-3 rounded-xl border border-border p-3 text-left transition-colors hover:bg-muted/40",
-        children: [
-          /* @__PURE__ */ jsx(CollectionThumb, { image: selected?.image }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate", children: selected ? collectionDisplayLabel(selected) : collections.length ? "Choose a collection" : "No collections yet" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: selected ? `${selected.totalSupply ?? 0} work${selected.totalSupply === 1 ? "" : "s"}` : "Where this work will live" })
-          ] }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto p-1", children: collections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No collections yet \u2014 create one instead." }) : collections.map((col) => {
-      const id = valueOf(col);
-      const isSelected = !!id && value === id;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          disabled: !id,
-          onClick: () => {
-            if (!id) return;
-            onChange(id);
-            setOpen(false);
-          },
-          className: "flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left transition-colors hover:bg-muted/60",
-          children: [
-            /* @__PURE__ */ jsx(CollectionThumb, { image: col.image }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: collectionDisplayLabel(col) }),
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-                col.totalSupply ?? 0,
-                " work",
-                col.totalSupply === 1 ? "" : "s"
-              ] })
-            ] }),
-            isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-brand-blue shrink-0" })
-          ]
-        },
-        id ?? col.contractAddress ?? col.name
-      );
-    }) }) })
-  ] });
-}
+import { AssetTypePicker, CoverUpload, MediaRow } from "./asset-form-parts.js";
+import { CollectionSection } from "./collection-section.js";
+import { LicensingSection } from "./licensing-section.js";
+import { IpTypeSection } from "./ip-type-section.js";
+import { DEFAULT_VALUES } from "./form.js";
+import { IP_TYPE_BY_KIND, MEDIA_ROUTE_MIME_TYPES, detectMediaKind } from "./media-kind.js";
+import { mintAsset } from "./mint-asset.js";
+import { mintableCollections } from "./mintable-collections.js";
+import { useIpfsUpload } from "./use-ipfs-upload.js";
+import { useNewCollectionDraft } from "./use-new-collection-draft.js";
 function FastMint(props) {
   const {
     presentation = "inline",
@@ -171,79 +44,36 @@ function FastMint(props) {
   } = props;
   const [status, setStatus] = useState("idle");
   const [errorMsg, setErrorMsg] = useState(null);
+  const media = useIpfsUpload();
+  const feature = useIpfsUpload();
   const [mediaFile, setMediaFile] = useState(null);
-  const [mediaPreview, setMediaPreview] = useState(null);
-  const [mediaUri, setMediaUri] = useState(null);
   const [mediaKind, setMediaKind] = useState("image");
-  const [mediaUploading, setMediaUploading] = useState(false);
-  const previewUrlRef = useRef(null);
   const mediaInputRef = useRef(null);
-  const [featurePreview, setFeaturePreview] = useState(null);
-  const [featureUri, setFeatureUri] = useState(null);
-  const [featureUploading, setFeatureUploading] = useState(false);
-  const featurePreviewRef = useRef(null);
   const featureInputRef = useRef(null);
   const [assetType, setAssetType] = useState("single");
   const [editionCount, setEditionCount] = useState("10");
   const [collectionMode, setCollectionMode] = useState("existing");
   const [existingCollectionId, setExistingCollectionId] = useState("");
   const [existingCollectionContract, setExistingCollectionContract] = useState("");
-  const [newCollectionName, setNewCollectionName] = useState("");
-  const [newCollectionSymbol, setNewCollectionSymbol] = useState("");
-  const [newCollectionDescription, setNewCollectionDescription] = useState("");
-  const [autoSymbol, setAutoSymbol] = useState("");
-  const [autoCollectionName, setAutoCollectionName] = useState("");
-  const [autoCollectionDescription, setAutoCollectionDescription] = useState("");
   const [ipType, setIpType] = useState("NFT");
-  const [advancedOpen, setAdvancedOpen] = useState(false);
-  const [ipTypeOpen, setIpTypeOpen] = useState(false);
   const templateFieldsRef = useRef([]);
   const [mintedAsset, setMintedAsset] = useState(null);
-  useEffect(() => () => {
-    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
-    if (featurePreviewRef.current) URL.revokeObjectURL(featurePreviewRef.current);
-  }, []);
-  const form = useForm({
-    defaultValues: {
-      name: "",
-      description: "",
-      external_url: "",
-      licenseType: "CC BY-SA",
-      commercialUse: "Yes",
-      derivatives: "Share-Alike",
-      attribution: "Required",
-      geographicScope: "Worldwide",
-      aiPolicy: "Allowed",
-      royalty: 0
-    }
-  });
+  const form = useForm({ defaultValues: DEFAULT_VALUES });
   const name = form.watch("name");
+  const description = form.watch("description");
+  const draft = useNewCollectionDraft(name, description);
   useEffect(() => {
     if (walletAddress && !form.getValues("external_url")) {
       form.setValue("external_url", `https://medialane.io/account/${walletAddress}`);
     }
   }, [walletAddress, form]);
-  useEffect(() => {
-    const s = suggestLaunchpadSymbol(name);
-    if (!s) return;
-    if (!newCollectionSymbol || newCollectionSymbol === autoSymbol) {
-      setNewCollectionSymbol(s);
-      setAutoSymbol(s);
-    }
-    if (!newCollectionName || newCollectionName === autoCollectionName) {
-      setNewCollectionName(name);
-      setAutoCollectionName(name);
-    }
-  }, [name, autoSymbol, autoCollectionName, newCollectionSymbol, newCollectionName]);
-  const description = form.watch("description");
-  useEffect(() => {
-    if (!newCollectionDescription || newCollectionDescription === autoCollectionDescription) {
-      setNewCollectionDescription(description);
-      setAutoCollectionDescription(description);
-    }
-  }, [description, autoCollectionDescription, newCollectionDescription]);
   const erc721Collections = mintableCollections("single", collections);
   const erc1155Collections = mintableCollections("editions", collections);
+  const uploadFile = async (file, kind) => {
+    const token = await getUploadToken();
+    if (!token) throw new Error("Sign in first");
+    return (await uploadFileToIpfs(client.api, file, kind)).uri;
+  };
   const handleMediaSelect = async (file) => {
     const kind = detectMediaKind(file.type);
     if (!kind) {
@@ -254,8 +84,8 @@ function FastMint(props) {
       setErrorMsg(`Please upload a${mediaKindLock === "image" ? "n" : ""} ${mediaKindLock}.`);
       return;
     }
-    const viaMediaRoute = MEDIA_ROUTE_MIME_TYPES.has(file.type);
-    const fileError = uploadError(file, viaMediaRoute ? "media" : "document");
+    const route = MEDIA_ROUTE_MIME_TYPES.has(file.type) ? "media" : "document";
+    const fileError = uploadError(file, route);
     if (fileError) {
       setErrorMsg(fileError);
       return;
@@ -263,74 +93,20 @@ function FastMint(props) {
     setMediaFile(file);
     setMediaKind(kind);
     setIpType(IP_TYPE_BY_KIND[kind]);
-    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
-    const objectUrl = URL.createObjectURL(file);
-    previewUrlRef.current = objectUrl;
-    setMediaPreview(objectUrl);
-    setMediaUri(null);
-    setMediaUploading(true);
-    try {
-      const token = await getUploadToken();
-      if (!token) throw new Error("Sign in first");
-      const { uri } = await uploadFileToIpfs(client.api, file, viaMediaRoute ? "media" : "document");
-      setMediaUri(uri);
-    } catch (err) {
-      const t = uploadFailureToast(err);
-      setErrorMsg(t.description ?? t.title);
-    } finally {
-      setMediaUploading(false);
-    }
+    await media.start(file, (f) => uploadFile(f, route), setErrorMsg);
   };
   const clearMedia = () => {
     setMediaFile(null);
-    setMediaPreview(null);
-    setMediaUri(null);
+    media.clear();
     if (mediaInputRef.current) mediaInputRef.current.value = "";
   };
-  const handleFeatureSelect = async (file) => {
-    if (featurePreviewRef.current) URL.revokeObjectURL(featurePreviewRef.current);
-    const objectUrl = URL.createObjectURL(file);
-    featurePreviewRef.current = objectUrl;
-    setFeaturePreview(objectUrl);
-    setFeatureUri(null);
-    setFeatureUploading(true);
-    try {
-      const token = await getUploadToken();
-      if (!token) throw new Error("Sign in first");
-      const { uri } = await uploadFileToIpfs(client.api, file, "image");
-      setFeatureUri(uri);
-    } catch (err) {
-      const t = uploadFailureToast(err);
-      setErrorMsg(t.description ?? t.title);
-    } finally {
-      setFeatureUploading(false);
-    }
-  };
-  const handleLicenseChange = (value) => {
-    form.setValue("licenseType", value);
-    const def = LICENSE_TYPES.find((l) => l.value === value);
-    if (def) {
-      form.setValue("commercialUse", def.commercialUse);
-      form.setValue("derivatives", def.derivatives);
-      form.setValue("attribution", def.attribution);
-    }
-  };
-  const ready = !!mediaUri && !mediaUploading && name.trim().length > 0 && (mediaKind === "image" || !!featureUri) && (collectionMode === "existing" ? assetType === "single" ? !!existingCollectionId : !!existingCollectionContract : newCollectionName.trim().length > 0 && newCollectionSymbol.trim().length > 0);
-  async function pollForNewCollection(name2, symbol) {
-    for (let attempt = 0; attempt < 8; attempt++) {
-      const list = await refetchCollections();
-      const match = list.find((c) => c.name === name2 && c.symbol === symbol);
-      if (match?.collectionId) return match;
-      await new Promise((r) => setTimeout(r, 1500));
-    }
-    return null;
-  }
+  const ready = !!media.uri && !media.uploading && name.trim().length > 0 && (mediaKind === "image" || !!feature.uri) && (collectionMode === "existing" ? assetType === "single" ? !!existingCollectionId : !!existingCollectionContract : draft.name.trim().length > 0 && draft.symbol.trim().length > 0);
   const onSubmit = async (values) => {
     if (!hasWallet) {
       onRequireWallet();
       return;
     }
-    if (!walletAddress || !mediaUri) return;
+    if (!walletAddress || !media.uri) return;
     if (values.external_url && !values.external_url.startsWith("http://") && !values.external_url.startsWith("https://")) {
       setErrorMsg("External link must start with http:// or https://");
       return;
@@ -338,93 +114,24 @@ function FastMint(props) {
     setStatus("minting");
     setErrorMsg(null);
     try {
-      const signer = await getSigner();
-      const image = mediaKind === "image" ? mediaUri : featureUri;
-      const animationUrl = mediaKind === "image" ? void 0 : mediaUri;
-      const built = buildAssetMetadata({
-        name: values.name,
-        description: values.description || "",
-        externalUrl: values.external_url || "",
-        imageUri: image,
-        creator: walletAddress,
+      const asset = await mintAsset({
+        client,
+        signer: await getSigner(),
+        walletAddress,
+        values,
         ipType,
-        licenseType: values.licenseType,
-        commercialUse: values.commercialUse,
-        derivatives: values.derivatives,
-        attribution: values.attribution,
-        geographicScope: values.geographicScope,
-        aiPolicy: values.aiPolicy,
-        royalty: String(values.royalty),
-        templateTraits: templateFieldsRef.current.filter(({ traitType, value }) => traitType.trim() && value.trim()).map(({ traitType, value }) => ({ traitType, value }))
+        templateFields: templateFieldsRef.current,
+        mediaKind,
+        mediaUri: media.uri,
+        featureUri: feature.uri,
+        assetType,
+        editionCount,
+        destination: collectionMode === "new" ? { mode: "new", name: draft.name, symbol: draft.symbol, description: draft.description } : { mode: "existing", collectionId: existingCollectionId, collectionContract: existingCollectionContract },
+        singleCollections: erc721Collections,
+        refetchCollections,
+        getUploadToken
       });
-      const metadata = { ...built };
-      if (animationUrl) metadata.animation_url = animationUrl;
-      const uploadToken = await getUploadToken();
-      if (!uploadToken) throw new Error("Sign in first");
-      const tokenUri = await uploadJsonToIpfs(client.api, metadata);
-      let result;
-      let finalContractAddress;
-      let finalTokenId = null;
-      if (assetType === "single") {
-        let collectionId = existingCollectionId;
-        let contractAddress = erc721Collections.find((c) => c.collectionId === existingCollectionId)?.contractAddress ?? null;
-        if (collectionMode === "new") {
-          const intentRes2 = await client.api.intents.create("create-collection", {
-            owner: walletAddress,
-            name: newCollectionName,
-            symbol: newCollectionSymbol,
-            description: newCollectionDescription || void 0,
-            image
-          });
-          await executeIntent(signer, client, intentRes2);
-          const found = await pollForNewCollection(newCollectionName, newCollectionSymbol);
-          if (!found) throw new Error("Collection created, but it's still indexing \u2014 try minting again in a moment from My Collections.");
-          collectionId = found.collectionId;
-          contractAddress = found.contractAddress ?? null;
-        }
-        const intentRes = await client.api.intents.create("mint", {
-          owner: walletAddress,
-          collectionId,
-          recipient: walletAddress,
-          tokenUri,
-          royaltyBps: Math.round(values.royalty * 100)
-        });
-        result = await executeIntent(signer, client, intentRes);
-        finalContractAddress = contractAddress;
-        if (finalContractAddress) {
-          finalTokenId = mintedTokenIdFromReceipt(result.receipt, finalContractAddress);
-        }
-      } else {
-        let collectionContract = existingCollectionContract;
-        if (collectionMode === "new") {
-          const intentRes2 = await client.api.intents.create("create-collection", {
-            owner: walletAddress,
-            name: newCollectionName,
-            symbol: newCollectionSymbol,
-            description: newCollectionDescription || void 0,
-            image,
-            baseUri: "",
-            service: "mip-erc1155"
-          });
-          const deployResult = await executeIntent(signer, client, intentRes2);
-          const deployed = deployedCollectionFromReceipt(deployResult.receipt, "mip-erc1155");
-          if (!deployed) throw new Error("Collection deployed, but its address couldn't be read \u2014 check My Collections to mint into it.");
-          collectionContract = deployed;
-        }
-        const intentRes = await client.api.intents.create("mint", {
-          owner: walletAddress,
-          recipient: walletAddress,
-          collectionContract,
-          tokenUri,
-          value: editionCount,
-          royaltyBps: Math.round(values.royalty * 100)
-        });
-        result = await executeIntent(signer, client, intentRes);
-        finalContractAddress = collectionContract;
-        finalTokenId = mintedTokenIdFromReceipt(result.receipt, collectionContract);
-      }
-      if (finalContractAddress && finalTokenId) {
-        const asset = { contract: finalContractAddress, tokenId: finalTokenId, image };
+      if (asset) {
         setMintedAsset(asset);
         onMinted?.(asset);
       }
@@ -440,25 +147,19 @@ function FastMint(props) {
     setMintedAsset(null);
     form.reset();
     clearMedia();
-    setFeaturePreview(null);
-    setFeatureUri(null);
+    feature.clear();
     setAssetType("single");
     setEditionCount("10");
     setCollectionMode("existing");
     setExistingCollectionId("");
     setExistingCollectionContract("");
-    setNewCollectionName("");
-    setNewCollectionSymbol("");
-    setNewCollectionDescription("");
-    setAutoSymbol("");
-    setAutoCollectionName("");
-    setAutoCollectionDescription("");
+    draft.reset();
     templateFieldsRef.current = [];
   };
   const busy = status === "minting";
-  const KindIcon = MEDIA_KIND_ICON[mediaKind];
+  const previewImage = mediaKind === "image" ? media.preview : feature.preview;
   const selectedExistingCollection = assetType === "single" ? erc721Collections.find((c) => c.collectionId === existingCollectionId) : erc1155Collections.find((c) => c.contractAddress === existingCollectionContract);
-  const collectionLabel = mediaUri ? collectionMode === "new" ? newCollectionName || "New collection" : selectedExistingCollection?.name || "IP Asset" : void 0;
+  const collectionLabel = media.uri ? collectionMode === "new" ? draft.name || "New collection" : selectedExistingCollection?.name || "IP Asset" : void 0;
   const wrap = (node) => {
     if (presentation !== "dialog") return node;
     return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => {
@@ -476,7 +177,7 @@ function FastMint(props) {
         {
           footer: successFooter,
           presentation,
-          previewImage: mediaKind === "image" ? mediaPreview : featurePreview,
+          previewImage,
           name,
           collectionLabel,
           mintedAsset,
@@ -500,53 +201,23 @@ function FastMint(props) {
       )
     );
   }
+  const submitBlocked = !ready || busy || !hasWallet;
   return wrap(
     /* @__PURE__ */ jsxs("section", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-xl border border-border p-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative h-14 w-14 rounded-lg bg-muted overflow-hidden shrink-0", children: [
-          mediaKind === "image" && mediaPreview ? /* @__PURE__ */ jsx(Image, { src: mediaPreview, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(KindIcon, { className: "h-6 w-6 text-muted-foreground" }) }),
-          mediaUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/70", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate", children: mediaFile.name }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: mediaUploading ? "Uploading\u2026" : mediaUri ? "Uploaded" : "Upload failed" }),
-            mediaUri && (() => {
-              const template = IP_TEMPLATES[ipType];
-              const TemplateIcon = template.icon;
-              return /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: cn(
-                    "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-2xs font-medium",
-                    template.color.bg,
-                    template.color.text,
-                    template.color.border
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(TemplateIcon, { className: "h-3 w-3" }),
-                    template.label
-                  ]
-                }
-              );
-            })()
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => mediaInputRef.current?.click(),
-            className: "text-xs font-semibold text-brand-blue hover:underline shrink-0",
-            children: "Change"
-          }
-        ),
-        /* @__PURE__ */ jsx("input", { ref: mediaInputRef, type: "file", className: "hidden", onChange: (e) => {
-          const f = e.target.files?.[0];
-          if (f) handleMediaSelect(f);
-        } })
-      ] }),
-      mediaUri && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-8 items-start", children: [
+      /* @__PURE__ */ jsx(
+        MediaRow,
+        {
+          file: mediaFile,
+          kind: mediaKind,
+          preview: media.preview,
+          uri: media.uri,
+          uploading: media.uploading,
+          ipType,
+          inputRef: mediaInputRef,
+          onSelect: handleMediaSelect
+        }
+      ),
+      media.uri && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-8 items-start", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Title *" }),
@@ -564,7 +235,7 @@ function FastMint(props) {
             /* @__PURE__ */ jsx(
               Textarea,
               {
-                value: form.watch("description"),
+                value: description,
                 onChange: (e) => form.setValue("description", e.target.value),
                 placeholder: "Describe your work, its story, and any context for buyers\u2026",
                 rows: 3
@@ -585,277 +256,60 @@ function FastMint(props) {
               }
             )
           ] }),
-          mediaKind !== "image" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Upload a cover image for your asset *" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "button",
-                  tabIndex: 0,
-                  onClick: () => !featureUploading && featureInputRef.current?.click(),
-                  onKeyDown: (e) => {
-                    if ((e.key === "Enter" || e.key === " ") && !featureUploading) {
-                      e.preventDefault();
-                      featureInputRef.current?.click();
-                    }
-                  },
-                  className: "relative h-20 w-20 rounded-xl border-2 border-dashed border-border bg-muted flex items-center justify-center overflow-hidden shrink-0 cursor-pointer hover:border-primary/50 transition-colors",
-                  children: [
-                    featurePreview ? /* @__PURE__ */ jsx(Image, { src: featurePreview, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx(ImagePlus, { className: "h-6 w-6 text-muted-foreground" }),
-                    featureUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/70", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }),
-                    /* @__PURE__ */ jsx("input", { ref: featureInputRef, type: "file", accept: acceptFor("image"), className: "hidden", onChange: (e) => {
-                      const f = e.target.files?.[0];
-                      if (f) handleFeatureSelect(f);
-                    } })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Cover art shown wherever the work is previewed. JPG, PNG, GIF, SVG or WebP." })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Asset Type" }),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setAssetType("single"),
-                  className: cn(
-                    "flex items-start gap-3 rounded-xl border p-4 text-left transition-colors",
-                    assetType === "single" ? "border-brand-blue bg-brand-blue/5" : "border-border hover:bg-muted/40"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(SingleIcon, { className: cn("h-5 w-5 shrink-0 mt-0.5", assetType === "single" ? "text-brand-blue" : "text-muted-foreground") }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold", children: "Single Edition NFT" }),
-                      /* @__PURE__ */ jsx("span", { className: "block text-xs mt-0.5 text-muted-foreground", children: "Minted once" })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setAssetType("editions"),
-                  className: cn(
-                    "flex items-start gap-3 rounded-xl border p-4 text-left transition-colors",
-                    assetType === "editions" ? "border-brand-blue bg-brand-blue/5" : "border-border hover:bg-muted/40"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Layers, { className: cn("h-5 w-5 shrink-0 mt-0.5", assetType === "editions" ? "text-brand-blue" : "text-muted-foreground") }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold", children: "Limited Editions NFT" }),
-                      /* @__PURE__ */ jsx("span", { className: "block text-xs mt-0.5 text-muted-foreground", children: "Several numbered copies" })
-                    ] })
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          assetType === "editions" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Number of copies" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "number",
-                min: 1,
-                value: editionCount,
-                onChange: (e) => setEditionCount(e.target.value),
-                className: "max-w-[140px]"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx(Boxes, { className: "h-4 w-4" }),
-                "Collection *"
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg border border-border overflow-hidden", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setCollectionMode("existing"),
-                    className: cn(
-                      "px-3 h-7 text-xs font-medium transition-colors",
-                      collectionMode === "existing" ? "bg-primary text-primary-foreground" : "bg-background hover:bg-muted text-muted-foreground"
-                    ),
-                    children: "Existing"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setCollectionMode("new"),
-                    className: cn(
-                      "px-3 h-7 text-xs font-medium border-l border-border transition-colors flex items-center gap-1",
-                      collectionMode === "new" ? "bg-primary text-primary-foreground" : "bg-background hover:bg-muted text-muted-foreground"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
-                      "New"
-                    ]
-                  }
-                )
-              ] })
-            ] }),
-            collectionMode === "existing" ? /* @__PURE__ */ jsx(
-              CollectionPicker,
-              {
-                collections: assetType === "single" ? erc721Collections : erc1155Collections,
-                value: assetType === "single" ? existingCollectionId : existingCollectionContract,
-                onChange: assetType === "single" ? setExistingCollectionId : setExistingCollectionContract,
-                valueOf: collectionKey(assetType === "single" ? "single" : "editions")
-              }
-            ) : /* @__PURE__ */ jsxs("div", { className: "flex gap-3 rounded-xl border border-border p-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "relative h-16 w-16 rounded-lg overflow-hidden bg-muted shrink-0", children: (mediaKind === "image" ? mediaPreview : featurePreview) ? /* @__PURE__ */ jsx(
-                Image,
-                {
-                  src: mediaKind === "image" ? mediaPreview : featurePreview,
-                  alt: "",
-                  fill: true,
-                  className: "object-cover",
-                  unoptimized: true
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Boxes, { className: "h-5 w-5 text-muted-foreground/40" }) }) }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      value: newCollectionName,
-                      onChange: (e) => setNewCollectionName(e.target.value),
-                      placeholder: "Collection name",
-                      className: "h-9 text-sm"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      value: newCollectionSymbol,
-                      onChange: (e) => setNewCollectionSymbol(e.target.value.toUpperCase()),
-                      placeholder: "SYMBOL",
-                      className: "h-9 text-sm"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Textarea,
-                  {
-                    value: newCollectionDescription,
-                    onChange: (e) => setNewCollectionDescription(e.target.value),
-                    placeholder: "Describe this collection\u2026",
-                    rows: 2,
-                    className: "text-sm resize-none"
-                  }
-                ),
-                /* @__PURE__ */ jsx("p", { className: "text-2xs text-muted-foreground", children: "Prefilled from your asset \u2014 edit anything above." })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Collapsible, { open: advancedOpen, onOpenChange: setAdvancedOpen, children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border overflow-hidden", children: [
-            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: "w-full flex items-center justify-between px-4 py-3.5 hover:bg-muted/30 transition-colors", children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4 text-primary" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Licensing Terms" }),
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-normal", children: "Optional \xB7 Berne Convention" })
-              ] }),
-              /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform", advancedOpen && "rotate-180") })
-            ] }) }),
-            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 space-y-4 border-t border-border/60 pt-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "License" }),
-                /* @__PURE__ */ jsxs(Select, { value: form.watch("licenseType"), onValueChange: handleLicenseChange, children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsx(SelectContent, { children: LICENSE_TYPES.map((l) => /* @__PURE__ */ jsx(SelectItem, { value: l.value, children: l.label }, l.value)) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Commercial use" }),
-                /* @__PURE__ */ jsx(ToggleGroup, { value: form.watch("commercialUse"), options: ["Yes", "No"], onChange: (v) => form.setValue("commercialUse", v) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Derivatives" }),
-                /* @__PURE__ */ jsx(ToggleGroup, { value: form.watch("derivatives"), options: DERIVATIVES_OPTIONS, onChange: (v) => form.setValue("derivatives", v) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Territory" }),
-                /* @__PURE__ */ jsxs(Select, { value: form.watch("geographicScope"), onValueChange: (v) => form.setValue("geographicScope", v), children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsx(SelectContent, { children: GEOGRAPHIC_SCOPES.map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s, children: s }, s)) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "AI & data mining" }),
-                /* @__PURE__ */ jsx(ToggleGroup, { value: form.watch("aiPolicy"), options: AI_POLICIES, onChange: (v) => form.setValue("aiPolicy", v) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Royalty % (0\u201350)" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    type: "number",
-                    min: 0,
-                    max: 50,
-                    step: 0.5,
-                    value: form.watch("royalty"),
-                    onChange: (e) => form.setValue("royalty", parseFloat(e.target.value) || 0),
-                    className: "max-w-[120px]"
-                  }
-                )
-              ] })
-            ] }) })
-          ] }) }),
-          /* @__PURE__ */ jsx(Collapsible, { open: ipTypeOpen, onOpenChange: setIpTypeOpen, children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border overflow-hidden", children: [
-            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: "w-full flex items-center justify-between px-4 py-3.5 hover:bg-muted/30 transition-colors", children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4 text-primary" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "IP Type & Metadata" }),
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-normal", children: "Optional" })
-              ] }),
-              /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform", ipTypeOpen && "rotate-180") })
-            ] }) }),
-            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 space-y-4 border-t border-border/60 pt-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "IP Type" }),
-                /* @__PURE__ */ jsxs(Select, { value: ipType, onValueChange: (v) => setIpType(v), children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsx(SelectContent, { children: IP_TYPES.map((t) => /* @__PURE__ */ jsx(SelectItem, { value: t, children: t }, t)) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                IPTypeFields,
-                {
-                  ipType,
-                  onChange: (fields) => {
-                    templateFieldsRef.current = fields;
-                  },
-                  uploadDocument: async (file) => {
-                    const token = await getUploadToken();
-                    if (!token) throw new Error("Sign in first");
-                    const { uri } = await uploadFileToIpfs(client.api, file, "document");
-                    return uri;
-                  },
-                  existingDocument: mediaKind === "document" && mediaUri && mediaFile ? { uri: mediaUri, name: mediaFile.name } : null
-                }
-              )
-            ] }) })
-          ] }) }),
+          mediaKind !== "image" && /* @__PURE__ */ jsx(
+            CoverUpload,
+            {
+              preview: feature.preview,
+              uploading: feature.uploading,
+              inputRef: featureInputRef,
+              onSelect: (file) => void feature.start(file, (f) => uploadFile(f, "image"), setErrorMsg)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AssetTypePicker,
+            {
+              value: assetType,
+              onChange: setAssetType,
+              editionCount,
+              onEditionCount: setEditionCount
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CollectionSection,
+            {
+              assetType,
+              mode: collectionMode,
+              onModeChange: setCollectionMode,
+              collections: assetType === "single" ? erc721Collections : erc1155Collections,
+              existingId: existingCollectionId,
+              existingContract: existingCollectionContract,
+              onExistingId: setExistingCollectionId,
+              onExistingContract: setExistingCollectionContract,
+              draft,
+              previewImage
+            }
+          ),
+          /* @__PURE__ */ jsx(LicensingSection, { form }),
+          /* @__PURE__ */ jsx(
+            IpTypeSection,
+            {
+              ipType,
+              onIpTypeChange: setIpType,
+              fieldsRef: templateFieldsRef,
+              uploadDocument: (file) => uploadFile(file, "document"),
+              existingDocument: mediaKind === "document" ? { uri: media.uri, name: mediaFile.name } : null
+            }
+          ),
           status === "error" && errorMsg && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: errorMsg }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              disabled: !ready || busy || !hasWallet,
+              disabled: submitBlocked,
               onClick: form.handleSubmit(onSubmit),
               className: cn(
                 "w-full h-12 text-base font-semibold text-white rounded-xl flex items-center justify-center gap-2 transition-all hover:brightness-110 active:scale-[0.98] bg-brand-blue",
-                (!ready || busy || !hasWallet) && "opacity-40 pointer-events-none"
+                submitBlocked && "opacity-40 pointer-events-none"
               ),
               children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
@@ -868,7 +322,7 @@ function FastMint(props) {
         /* @__PURE__ */ jsx("div", { className: "order-first lg:order-last lg:sticky lg:top-20 max-w-[260px] mx-auto w-full lg:max-w-none lg:mx-0", children: /* @__PURE__ */ jsx(
           MedialaneCollectionCard,
           {
-            image: mediaKind === "image" ? mediaPreview : featurePreview,
+            image: previewImage,
             name,
             collection: collectionLabel,
             creator: walletAddress ? `${walletAddress.slice(0, 6)}\u2026${walletAddress.slice(-4)}` : void 0,