slice-machine-ui 2.19.2-alpha.jp-figma-to-prismic.7 → 2.19.2-alpha.jp-figma-to-slice-1.2

package/out/_next/static/chunks/593-97393b59cba3d429.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[593],{21442:function(e,t,i){"use strict";i.d(t,{H:function(){return s}});var r=i(2784),n=i(54597);let s=()=>{let{openScreenshotsModal:e}=(0,n.Z)(),[t,i]=(0,r.useState)({sliceFilterFn:e=>e});return{modalPayload:t,onOpenModal:t=>{i(t),e()}}}},86652:function(e,t,i){"use strict";i.d(t,{Z:function(){return _}});var r,n,s=i(52322),o=i(2784),l=i(951),a=i(75100),d=i(56580),c=i(75289),x=i(68238),u=i.n(x);let p=e=>{let{children:t}=e;return(0,s.jsx)("kbd",{className:u().root,children:t})};var h=i(42828),v=i(30527),f=i(55862),m=i(75966),g=i(34830),j=i(54597);(r=n||(n={})).Mac="Mac",r.Linux="Linux",r.Windows="Windows";let b=()=>{let{userAgent:e}=navigator,t="Linux";return Object.values(n).forEach(i=>{e.includes(i)&&(t=i)}),t};var y=i(76473),C=i(88932),E=i(94160);async function w(e){let{variationId:t,slice:i,file:r,method:n}=e;try{let e=new FormData;e.append("file",r),e.append("libraryName",i.from),e.append("sliceName",i.model.name),e.append("variationId",t);let{errors:s,url:o}=await (0,E.XQ)({libraryName:i.from,sliceId:i.model.id,variationId:t,file:r});if(s.length>0)throw s;return E.Xe.track({event:"screenshot-taken",type:"custom",method:n}),{...i,screenshots:{...i.screenshots,[t]:{url:o}}}}catch(t){let e="Screenshot not saved";console.error(e,t),C.Am.error(e)}}var F=i(77823),k=i(7974);let D=e=>{let{inputFile:t,handleFile:i,children:r,isDragActive:n}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.__,{htmlFor:"input-file",variant:"buttons.white",sx:{p:2,px:0,display:"flex",justifyContent:"center",width:200,alignItems:"center",flex:1},children:r||"Select file"}),(0,s.jsx)("input",{id:"input-file",type:"file",ref:t,style:{display:"none"},accept:k.nG.map(e=>"image/".concat(e)).join(","),onChange:e=>{var t;i(null===(t=e.target.files)||void 0===t?void 0:t[0],n)}})]})},I=()=>(0,s.jsx)(c.kC,{variant:"boxes.centered",sx:{p:2,position:"absolute",height:"100%",width:"100%",background:"rgba(249, 248, 249, 0.7)",backdropFilter:"blur(5px)",zIndex:"1",pointerEvents:"none"},children:(0,s.jsxs)(c.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:[(0,s.jsx)(S,{isActive:!0}),(0,s.jsx)(c.xv,{sx:{my:2},children:"Drop file here"}),(0,s.jsx)(c.xv,{variant:"secondary",children:"Maximum upload size file: 128Mb"})]})}),S=e=>{let{isActive:t}=e;return(0,s.jsx)(c.kC,{sx:{p:1,borderRadius:"50%",bg:t?"#F1EEFE":"#EDECEE",alignItems:"center",justifyContent:"center",width:"48px",height:"48px"},children:(0,s.jsx)(l.IEK,{style:{color:t?"#6E56CF":"#6F6E77",fontSize:"34px"}})})};var R=e=>{let{variationID:t,slice:i,imageTypes:r=k.nG,onUploadSuccess:n}=e,l=i.screenshots[t],{saveSliceCustomScreenshotSuccess:a}=(0,j.Z)(),[d,x]=(0,o.useState)(!1),[u,p]=(0,o.useState)(!1),[h,v]=(0,o.useState)(!1);(0,y.y1)(["meta+v","ctrl+v"],()=>void E(),[t,i]);let{FileInputRenderer:f,fileInputProps:m}=function(e){let{onHandleFile:t}=e,i=(0,o.useRef)(null),r=async(e,r)=>{e&&(await t(e,r),(null==i?void 0:i.current)&&(i.current.value=""))};return{handleFile:r,inputFile:i,FileInputRenderer:D,fileInputProps:{inputFile:i,handleFile:r}}}({onHandleFile:async(e,r)=>{v(!0);let s=await w({slice:i,file:e,method:r?"dragAndDrop":"upload",variationId:t});p(!1);let o=null==s?void 0:s.screenshots[t];o&&(a(t,o,s),n&&n(s)),v(!1)}}),g=async e=>{if(e.size>128e6)return C.Am.error("File is too big. Max file size: 128Mb.");v(!0);let r=await w({slice:i,file:e,method:"dragAndDrop",variationId:t}),s=null==r?void 0:r.screenshots[t];s&&(a(t,s,r),n&&n(r)),v(!1)},b="function"==typeof navigator.clipboard.read,E=async()=>{if(b)try{let e=await navigator.clipboard.read();if(void 0!==e[0]){let t=e[0].types.find(e=>r.map(e=>"image/".concat(e)).includes(e));if(void 0!==t){let i=await e[0].getType(t),r=new File([i],"file");return g(r)}}}catch(e){console.error("Could not paste file",e)}},R=e=>t=>{t.preventDefault(),x(e)},z=e=>t=>{t.preventDefault(),p(e)};return(0,s.jsxs)(c.kC,{as:"form",variant:"boxes.centered",sx:{bg:"#F9F8F9",position:"relative",borderRadius:"6px",height:"320px"},onDragEnter:R(!0),onDragLeave:R(!1),onDragOver:R(!0),onMouseEnter:z(!0),onMouseLeave:z(!1),onSubmit:e=>e.preventDefault(),onDrop:e=>{var t;e.preventDefault(),x(!1);let i=null===(t=e.dataTransfer.files)||void 0===t?void 0:t[0];if(void 0!==i)return r.some(e=>"image/".concat(e)===i.type)?void g(i):C.Am.error("Only files of type ".concat(r.join(", ")," are accepted."))},children:[h?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.$j,{}),(0,s.jsx)(c.xv,{sx:{my:2},children:"Uploading file ..."})]}):null,h||void 0===l?null:(0,s.jsx)(F.q,{src:l.url,sx:{width:"100%",height:"100%",maxHeight:"100%",backdropFilter:"blur(5px)"}}),h?null:(0,s.jsx)(c.kC,{sx:{p:2,position:"absolute",width:"100%",height:"100%",borderRadius:"6px",background:"#F9F8F9B2",justifyContent:"center",alignItems:"center",visibility:u||void 0===l?"visible":"hidden"},children:(0,s.jsx)(c.kC,{variant:"boxes.centered",sx:{border:"1px dashed #6E56CF",height:"100%",width:"100%",borderRadius:"4px"},children:(0,s.jsxs)(c.kC,{sx:{width:"100%",justifyContent:"center",alignItems:"center",flexDirection:"column"},children:[(0,s.jsx)(S,{isActive:d}),(0,s.jsx)(c.xv,{sx:{my:2},children:b?"Paste, drop or ...":"Drop or ..."}),(0,s.jsx)(f,{...m,isDragActive:d}),(0,s.jsx)(c.xv,{sx:{color:"greyIcon",mt:1},children:"Maximum file size: 128Mb"})]})})}),d?(0,s.jsx)(I,{}):null]})};let z=()=>{let e=b(),t=[n.Windows,n.Linux].includes(e)?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p,{children:"ctrl"})," + ",(0,s.jsx)(p,{children:"shift"})," + ",(0,s.jsx)(p,{children:"c"})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(p,{children:"cmd"})," + ",(0,s.jsx)(p,{children:"shift"})," + ",(0,s.jsx)(p,{children:"c"})]});return(0,s.jsxs)(c.kC,{sx:{pl:"4px",alignItems:"center",color:"#000",borderRadius:"6px",fontSize:"12px",lineHeight:"24px",border:"1px solid #E4E2E4",boxShadow:"0px 1px 0px 0px rgba(0, 0, 0, 0.04)",width:"100%",minHeight:"40px"},children:[(0,s.jsx)(h.Y,{variant:"square"}),(0,s.jsxs)("div",{children:["Use\xa0",t," to copy any frame as .png, then just paste it here"]})]})},M=e=>{let{isValid:t}=e;return(0,s.jsx)(c.kC,{sx:{p:2,border:"1px solid #E4E2E4",borderRadius:"6px",bg:"#FFF"},children:t?(0,s.jsx)(l.Ypm,{style:{fontSize:"16px"}}):(0,s.jsx)(a.j6O,{style:{fontSize:"16px",color:"#ED811C"}})})},O=e=>{let{slice:t,onSelectVariation:i,variationSelector:r}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.X6,{as:"h4",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.model.name}),(0,s.jsx)(c.xu,{children:(0,s.jsx)(c.xu,{as:"ul",sx:{pl:0,my:3},children:t.model.variations.map(e=>{let{sliceID:n,variationID:o}=r,l=n===t.model.id&&o===e.id;return(0,s.jsx)(c.xu,{as:"li",sx:{listStyle:"none",my:2,p:2,cursor:"pointer",borderRadius:"4px",...l&&{bg:"#EDECEE",fontWeight:"500"},":hover":{bg:"#EDECEE"}},onClick:()=>i({sliceID:t.model.id,variationID:e.id}),children:(0,s.jsxs)(c.kC,{sx:{alignItems:"center"},children:[(0,s.jsx)(M,{isValid:!!t.screenshots[e.id]}),(0,s.jsx)(c.xv,{sx:{ml:2},children:e.name})]})},"".concat(t.model.id,"-").concat(e.id))})})})]})},A=(e,t)=>e||(t.length?{sliceID:t[0].model.id,variationID:t[0].model.variations[0].id}:void 0);function H(e){let{children:t}=e,i=(0,v.W)();return(0,s.jsx)(c.kC,{sx:{position:"sticky",top:0,zIndex:1,background:"gray",p:"16px",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:i,borderTopRightRadius:i,borderBottom:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.borders))}},children:t})}var _=e=>{let{slices:t,defaultVariationSelector:i,onUploadSuccess:r}=e,{closeModals:n}=(0,j.Z)(),{isOpen:l}=(0,d.v9)(e=>({isOpen:(0,m.gP)(e,g.q.SCREENSHOTS)})),[a,x]=(0,o.useState)(A(i,t));if((0,o.useEffect)(()=>{x(A(i,t))},[null==i?void 0:i.sliceID,null==i?void 0:i.variationID,l]),0===t.length||!a)return null;let u="function"==typeof navigator.clipboard.read;return(0,s.jsx)(f.Z,{isOpen:l,shouldCloseOnOverlayClick:!0,onRequestClose:()=>n(),children:(0,s.jsx)(v.Z,{radius:"0px",bodySx:{p:0,bg:"#FFF",position:"relative"},sx:{border:"none"},Header:(0,s.jsxs)(H,{children:[(0,s.jsx)(c.X6,{sx:{fontSize:"20px"},children:"Slice screenshots"}),(0,s.jsx)(c.x8,{type:"button",onClick:()=>n()})]}),Footer:null,children:(0,s.jsxs)(c.xu,{sx:{display:"flex",flexWrap:"wrap",height:"100%"},children:[(0,s.jsx)(c.xu,{sx:{p:3,bg:"grey07",flexGrow:1,overflow:"auto",maxHeight:"100%",flexBasis:"sidebar"},children:t.map((e,t)=>(0,s.jsx)(O,{slice:e,variationSelector:a,onSelectVariation:x},"".concat(e.model.id,"-").concat(t)))}),(0,s.jsxs)(c.kC,{as:"main",sx:{p:3,flexGrow:99999,flexBasis:0,flexDirection:"column",minWidth:320,gap:"8px"},children:[u?(0,s.jsx)(z,{}):void 0,(()=>{let e=t.find(e=>e.model.id===a.sliceID);return e?(0,s.jsx)(R,{variationID:a.variationID,slice:e,onUploadSuccess:r}):null})()]})]})})})}},77823:function(e,t,i){"use strict";i.d(t,{q:function(){return a}});var r=i(52322),n=i(2784),s=i(65186),o=i(75289);let l=(0,n.memo)(e=>{let{src:t}=e;return(0,r.jsx)(o.Ee,{src:t,alt:"Preview image",sx:{maxHeight:"100%"}})}),a=e=>{let{src:t,sx:i}=e;return(0,r.jsx)(o.kC,{sx:{position:"relative",alignItems:"center",justifyContent:"center",overflow:"hidden",backgroundImage:"url(/pattern.png)",backgroundColor:"headSection",backgroundRepeat:"repeat",backgroundSize:"20px",borderRadius:"4px",...i},children:void 0!==t?(0,r.jsx)(l,{src:t}):(0,r.jsxs)(o.xv,{sx:{display:"flex",flexDirection:"column",alignItems:"center"},children:[(0,r.jsx)(s.eJU,{}),"You have no screenshot yet."]})})}},68238:function(e){e.exports={root:"Kbd_root__LRA1F"}}}]);

package/out/_next/static/chunks/907-0f84907d31c989bf.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[907],{91589:function(e,a,t){t.d(a,{S:function(){return j}});var i=t(52322),r=t(11699),n=t(2784),l=t(76473),s=t(88932),o=t(30195),c=t(94160),d=t(34166),u=t(98250),m=t(68968),g=t(96317),p=t(42828),h=t(80148),f=t(54597),x=t(62434);function y(e){let a;let{slice:t}=e,n="uploading"===t.status||"generating"===t.status,l="uploadError"===t.status||"generateError"===t.status||"cancelled"===t.status,s="pending"===t.status||"generateError"===t.status||"generating"===t.status||"success"===t.status||"cancelled"===t.status;return l?a=(0,i.jsx)(r.E,{startIcon:"refresh",color:"grey",onClick:t.onRetry,children:"Retry"}):"figma"===t.source&&(a=(0,i.jsx)(r.c3,{content:"Pasted from Figma",children:(0,i.jsx)(p.Y,{variant:"square"})})),(0,i.jsxs)(x.Zb,{disabled:n,children:[s?(0,i.jsx)(x.ZB,{src:t.thumbnailUrl}):(0,i.jsx)(x.ZB,{component:"div"}),(0,i.jsx)(x.eW,{loading:n,startIcon:function(e){switch(e){case"uploadError":case"generateError":case"cancelled":return"close";case"success":return"check";default:return}}(t.status),title:"success"===t.status?t.model.name:"figma"===t.source?t.image.name.split(".")[0]:t.image.name,subtitle:function(e){let{status:a}=e;switch(a){case"uploading":return"Uploading...";case"uploadError":return"Unable to upload image";case"pending":var t;return(t=e.image.size)<1024?"".concat(t," B"):t<1048576?"".concat((t/1024).toFixed(1)," kB"):"".concat((t/1048576).toFixed(1)," MB");case"generating":return"Generating...";case"generateError":return"Something went wrong";case"cancelled":return"Cancelled";case"success":return"Generated"}}(t),error:l,action:a})]})}let b=o.z.object({__type:o.z.literal("figma-to-prismic/clipboard-data"),name:o.z.string(),image:o.z.string().startsWith("data:image/")});function j(e){let{open:a,location:t,onClose:o,onSuccess:g}=e,[x,j]=(0,n.useState)([]),[I,F]=(0,n.useState)(!1),{syncChanges:k}=(0,m.g)(),{createSliceSuccess:A}=(0,f.Z)(),{completeStep:D}=(0,u.k)(),E=function(e){let{open:a}=e,t=(0,n.useRef)([]);return(0,n.useEffect)(()=>{a&&(t.current=[],h.managerClient.slices.readAllSlices().then(e=>{t.current=e.models.map(e=>{let{model:a}=e;return a})}).catch(()=>null))},[a]),t}({open:a}),{libraryID:U,isLoading:L}=function(){let[e,a]=(0,n.useState)();return(0,n.useEffect)(()=>{h.managerClient.project.getSliceMachineConfig().then(e=>{var t;let i=null==e?void 0:null===(t=e.libraries)||void 0===t?void 0:t[0];if(void 0===i)throw Error("No library found in the config.");a(i)}).catch(()=>{throw Error("Could not get library ID from the config.")})},[]),{libraryID:e,isLoading:void 0===e}}(),z=(0,n.useRef)(crypto.randomUUID()),N=S();(0,l.y1)(["meta+v","ctrl+v"],e=>{e.preventDefault(),B()},{enabled:a&&N}),(0,n.useEffect)(()=>()=>void M(),[]);let P=e=>{let{index:a,slice:t}=e;j(e=>e.map((e,i)=>i===a?t(e):e))},R=e=>{if(H)return;if(e.length>10){s.Am.error("You can only upload ".concat(10," images at a time."));return}let a=x.length;j(a=>[...a,...e.map(e=>({source:"upload",status:"uploading",image:e}))]),e.forEach((e,t)=>{G({index:a+t,imageData:e,source:"upload"})})},B=async()=>{var e;if(!(!a||!N||x.some(e=>"figma"===e.source)||x.some(e=>"uploading"===e.status||"generating"===e.status))){if("function"!=typeof(null===(e=navigator.clipboard)||void 0===e?void 0:e.read)){s.Am.error("Clipboard paste is not supported in this browser.");return}try{let e=await navigator.clipboard.read();if(0===e.length){s.Am.error("No data found in clipboard.");return}let a="pasted-image.png",t=null,i=!1;for(let a of e){let e=a.types.find(e=>e.startsWith("image/"));if(void 0!==e){t=await a.getType(e);break}}for(let r of e)if(r.types.includes("text/plain"))try{let e=await r.getType("text/plain"),n=await e.text(),l=b.safeParse(JSON.parse(n));if(l.success){i=!0;let e=l.data;if(a="".concat(e.name,".png"),!t){let a=await fetch(e.image);t=await a.blob()}}else console.warn("Clipboard data validation failed:",l.error)}catch(e){console.warn("Failed to parse JSON from clipboard:",e)}if(!t){i?s.Am.error("Could not extract Figma data from clipboard. Please try copying again using the Prismic Figma plugin."):s.Am.error("No Figma data found in clipboard. Make sure you've copied a design using the Prismic Figma plugin.");return}let r=x.length;if(r>=10){s.Am.error("You can only upload ".concat(10," images at a time."));return}let n=new File([t],a,{type:t.type});j(e=>[...e,{source:"figma",status:"uploading",image:n}]),G({index:r,imageData:n,source:"figma"}),s.Am.success("Pasted ".concat(a).concat(i?" from Figma":""))}catch(e){console.error("Failed to paste from clipboard:",e),s.Am.error("Failed to paste from clipboard. Please check browser permissions and try again.")}}},G=async e=>{let{index:a,imageData:t,source:i}=e,r=z.current;P({index:a,slice:e=>({...e,status:"uploading",image:t,source:i})});try{let e=await w({image:t});if(r!==z.current)return;P({index:a,slice:a=>({...a,status:"pending",thumbnailUrl:e})})}catch(e){if(r!==z.current)return;P({index:a,slice:e=>({...e,status:"uploadError",onRetry:()=>void G({index:a,imageData:t,source:i})})})}},T=async e=>{let{index:a,imageUrl:i,libraryID:r,source:n}=e,l=z.current,s=crypto.randomUUID();P({index:a,slice:e=>({...e,status:"generating",thumbnailUrl:i,requestId:s})});try{let e=await h.managerClient.customTypes.inferSlice({source:n,libraryID:r,imageUrl:i,requestId:s});if(l!==z.current)return;let o=function(e){let{existingSlices:a,newSlices:t,slice:i}=e,r=new Set,n=new Set;for(let{id:e,name:t}of a)r.add(e),n.add(t.toLowerCase());for(let e of t)"success"===e.status&&(r.add(e.model.id),n.add(e.model.name.toLowerCase()));let l=i.id,s=2;for(;r.has(l);)l="".concat(i.id,"_").concat(s),s++;let o=i.name;for(s=2;n.has(o.toLowerCase());)o="".concat(i.name).concat(s),s++;return{...i,id:l,name:o}}({existingSlices:E.current,newSlices:x,slice:e.slice});if(j(t=>t.map((t,r)=>r!==a?t:{...t,status:"success",thumbnailUrl:i,model:o,langSmithUrl:e.langSmithUrl})),"upload"===n){l=z.current;let e=x[a],{errors:t}=await h.managerClient.slices.createSlice({libraryID:r,model:o});if(t.length)throw Error("Failed to create slice ".concat(o.id,"."));if(await h.managerClient.slices.updateSliceScreenshot({libraryID:r,sliceID:o.id,variationID:o.variations[0].id,data:e.image}),l!==z.current)return}D("createSlice"),c.Xe.track({event:"slice:created",id:o.id,name:o.name,library:r,location:t,mode:"ai",langSmithUrl:e.langSmithUrl}),(0,d.nZ)({type:"model",library:r,sliceId:o.id,variationId:o.variations[0].id,langSmithUrl:e.langSmithUrl})}catch(e){if(l!==z.current)return;P({index:a,slice:t=>({...t,status:e instanceof Error&&"AbortError"===e.name?"cancelled":"generateError",thumbnailUrl:i,onRetry:()=>{T({index:a,imageUrl:i,libraryID:r,source:n})}})})}},_=()=>{void 0!==U&&x.forEach((e,a)=>{"pending"===e.status&&T({index:a,libraryID:U,imageUrl:e.thumbnailUrl,source:e.source})})},M=async()=>{let e=x.flatMap(e=>"generating"===e.status?[e.requestId]:[]);0!==e.length&&await Promise.all(e.map(e=>h.managerClient.customTypes.cancelInferSlice({requestId:e})))},Z=e=>{var a;Y>0||((null===(a=null==e?void 0:e.cancelActiveRequests)||void 0===a||a)&&M(),o(),z.current=crypto.randomUUID(),setTimeout(()=>j([]),250))},O=async()=>{try{if(F(!0),void 0===U)return;let e=await (0,c.y0)();A(e.libraries),k(),g({slices:x.flatMap(e=>"success"===e.status?e.model:[]),library:U}),Z({cancelActiveRequests:!1})}finally{F(!1)}},W=x.filter(e=>"generating"===e.status).length,Y=W+x.filter(e=>"uploading"===e.status).length,q=x.filter(e=>"pending"===e.status).length,V=x.filter(e=>"success"===e.status).length,H=x.some(e=>"generating"===e.status||"success"===e.status),J=Y+q;return(0,i.jsxs)(r.ae,{open:a,onOpenChange:e=>!e&&Z(),children:[(0,i.jsx)(r.al,{title:"Generate with AI"}),(0,i.jsxs)(r.aj,{gap:0,children:[(0,i.jsx)(r.ak,{hidden:!0,children:"Upload images to generate slices with AI"}),L?(0,i.jsx)(r.D,{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",children:(0,i.jsx)(r.bg,{color:"purple9"})}):(0,i.jsxs)(i.Fragment,{children:[0===x.length?(0,i.jsxs)(r.D,{padding:16,height:"100%",gap:16,display:"flex",flexDirection:"column",children:[N&&(0,i.jsxs)(r.D,{display:"flex",gap:16,alignItems:"center",backgroundColor:"grey2",padding:16,borderRadius:12,children:[(0,i.jsxs)(r.D,{display:"flex",gap:8,alignItems:"center",flexGrow:1,children:[(0,i.jsx)(r.D,{width:48,height:48,backgroundColor:"grey12",borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",children:(0,i.jsx)(p.Y,{variant:"original",height:25})}),(0,i.jsxs)(r.D,{display:"flex",flexDirection:"column",flexGrow:1,children:[(0,i.jsx)(r.bL,{variant:"bold",children:"Want to work faster?"}),(0,i.jsx)(r.bL,{variant:"small",color:"grey11",children:"Copy frames from Figma with the Slice Machine plugin and paste them here."})]})]}),(0,i.jsx)(r.E,{endIcon:"arrowForward",color:"indigo",onClick:()=>window.open("https://www.figma.com/community/plugin/TODO","_blank"),sx:{marginRight:8},invisible:!0,children:"Install plugin"})]}),(0,i.jsx)(r.aF,{onFilesSelected:R,assetType:"image",maxFiles:10,overlay:(0,i.jsx)(v,{onFilesSelected:R,onPaste:()=>void B(),droppingFiles:!0}),children:(0,i.jsx)(v,{onFilesSelected:R,onPaste:()=>void B()})})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(r.D,{display:"flex",alignItems:"center",justifyContent:"space-between",padding:16,children:[(0,i.jsx)(r.bL,{variant:"h3",children:"Design"}),(0,i.jsx)(r.aG,{size:"medium",color:"grey",onFilesSelected:R,startIcon:"attachFile",disabled:H,children:"Add images"})]}),(0,i.jsx)(r.bn,{stableScrollbar:!1,children:(0,i.jsx)(r.D,{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,padding:16,children:x.map((e,a)=>(0,i.jsx)(y,{slice:e},"slice-".concat(a)))})})]}),(0,i.jsxs)(r.ah,{children:[W>0?(0,i.jsx)(r.ai,{onClick:()=>void M(),size:"medium",sx:{marginRight:8},invisible:!0,children:"Cancel"}):(0,i.jsx)(r.ai,{onClick:()=>Z(),size:"medium",sx:{marginRight:8},invisible:!0,children:"Close"}),0===V||Y>0?(0,i.jsxs)(r.af,{color:"purple",startIcon:"autoFixHigh",onClick:()=>void _(),disabled:H||Y>0||0===q,loading:Y>0,size:"medium",children:["Generate"," ",J>0?"(".concat(J,") "):"",1===J?"Slice":"Slices"]}):(0,i.jsx)(r.af,{color:"purple",onClick:()=>void O(),loading:I,size:"medium",children:C(t,V)})]})]})]})]})}function v(e){let{droppingFiles:a=!1,onFilesSelected:t,onPaste:n}=e,l=S();return(0,i.jsx)(r.D,{justifyContent:"center",flexDirection:"column",height:"100%",backgroundColor:a?"purple2":"grey2",border:!0,borderStyle:"dashed",borderColor:a?"purple9":"grey6",borderRadius:12,flexGrow:1,children:(0,i.jsx)(r.s,{children:(0,i.jsxs)(r.D,{display:"flex",flexDirection:"column",gap:16,alignItems:"center",children:[(0,i.jsx)(r.x,{lineColor:"purple11",backgroundColor:"purple5",name:"cloudUpload",size:"large"}),(0,i.jsx)(r.D,{display:"flex",flexDirection:"column",gap:4,alignItems:"center",children:l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.bL,{children:"Generate slices from your designs"}),(0,i.jsx)(r.bL,{variant:"small",color:"grey11",children:"Upload your design images or paste them directly from Figma."})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.bL,{children:"Upload your design images."}),(0,i.jsx)(r.bL,{variant:"small",color:"grey11",children:"Once uploaded, you can generate slices automatically using AI."})]})}),(0,i.jsx)(r.D,{display:"flex",alignItems:"center",gap:16,children:l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.E,{size:"small",renderStartIcon:()=>(0,i.jsx)(p.Y,{variant:"original",height:16}),color:"grey",onClick:n,children:"Paste from Figma"}),(0,i.jsx)(r.aG,{size:"small",onFilesSelected:t,color:"purple",invisible:!0,children:"Add images"})]}):(0,i.jsx)(r.aG,{startIcon:"attachFile",onFilesSelected:t,color:"grey",children:"Add images"})})]})})})}async function w(e){let{image:a}=e,t=[await h.managerClient.project.getResolvedRepositoryName(),"shared-slices","prismic-inferred-slices",crypto.randomUUID()].join("/");await h.managerClient.screenshots.initS3ACL();let{url:i}=await h.managerClient.screenshots.uploadScreenshot({keyPrefix:t,data:a});return i}function S(){let e=(0,g.L)("llm-proxy-access");return(null==e?void 0:e.value)==="on"}let C=(e,a)=>{switch(e){case"custom_type":return"Add to type (".concat(a,")");case"page_type":return"Add to page (".concat(a,")");case"slices":return"Done"}}},27213:function(e,a,t){t.d(a,{F:function(){return n}});var i=t(52322),r=t(11699);let n=e=>{let{menuType:a}=e;return{fromImage:{BackgroundIcon:(0,i.jsx)(r.B,{name:"autoFixHigh",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"purple",variant:"solid",radius:6}),title:"Generate from image",description:"Build a slice based on your design image."},fromScratch:{BackgroundIcon:(0,i.jsx)(r.B,{name:"add",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Start from scratch",description:"Build a custom slice your way."},fromTemplate:{BackgroundIcon:(0,i.jsx)(r.B,{name:"contentCopy",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Use a template",description:"Choose from ready-made examples."},fromExisting:{BackgroundIcon:(0,i.jsx)(r.B,{name:"folder",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Reuse an existing slice",description:"Select from your created slices."}}}},6256:function(e,a,t){t.d(a,{c:function(){return b}});var i=t(52322),r=t(2784),n=t(36131),l=t(75289),s=t(94160),o=t(98250),c=t(88932),d=t(63908),u=t(358),m=t(80148);async function g(e){let{sliceName:a,libraryName:t,location:i,onSuccess:r}=e;try{let e=(0,d.fo)(a),{errors:n}=await m.managerClient.slices.createSlice({libraryID:t,model:e});if(n.length>0)throw n;s.Xe.track({event:"slice:created",id:(0,u.MP)(a),name:a,library:t,location:i,mode:"manual"}),await r(e)}catch(t){let e="An unexpected error happened while creating slice ".concat(a,".");console.error(e,t),c.Am.error(e)}}var p=t(68968),h=t(59532),f=t(54597),x=t(46999),y=t(63019);let b=e=>{let{onClose:a,onSuccess:t,localLibraries:c,location:d,remoteSlices:u}=e,{createSliceSuccess:m}=(0,f.Z)(),[b,j]=(0,r.useState)(!1),{syncChanges:v}=(0,p.g)(),{completeStep:w}=(0,o.k)(),S=async e=>{let a=e.sliceName,i=e.from;j(!0),await g({sliceName:a,libraryName:i,location:d,onSuccess:async e=>{m((await (0,s.y0)()).libraries),t(e,i),v(),w("createSlice")}})};return(0,i.jsx)(h.Z,{testId:"create-slice-modal",isOpen:!0,widthInPx:"530px",isLoading:b,formId:"create-new-slice",close:a,buttonLabel:"Create",onSubmit:e=>{S(e)},initialValues:{sliceName:"",from:c[0].name},validate:e=>(0,y.h)(e,c,u),content:{title:"Create a new slice"},children:e=>{let{touched:a,values:t,setFieldValue:r,errors:s}=e;return(0,i.jsxs)(l.xu,{children:[(0,i.jsx)(x.W,{name:"sliceName",label:"Slice name",placeholder:"Pascalised slice API ID (e.g. TextBlock)",error:a.sliceName?s.sliceName:void 0,testId:"slice-name-input"}),(0,i.jsx)(l.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,i.jsx)(n.ZP,{name:"from",options:c.map(e=>({value:e.name,label:e.name})),onChange:e=>e?void r("from",e.value):null,defaultValue:{value:t.from,label:t.from},styles:{option:e=>({...e,color:"#161618"})},theme:e=>({...e,colors:{...e.colors,primary:"#E9E8EA"}}),menuPortalTarget:document.body})]})}})}},63019:function(e,a,t){t.d(a,{h:function(){return o}});var i=t(96009),r=t.n(i),n=t(74600),l=t.n(n),s=t(7974);function o(e,a,t){let{sliceName:i}=e;return i?s.lS.includes(i.toLowerCase())?{sliceName:'Name "'.concat(i,'" is reserved for Slice Machine use.')}:s.xo.exec(i)?l()(r()(i)).replace(/\s/gm,"")!==i.trim()?{sliceName:"Value has to be PascalCased."}:i.match(/^\d/)?{sliceName:"Value cannot start with a number."}:[...a.flatMap(e=>e.components.map(e=>e.model.name)),...t.map(e=>e.name)].includes(i)?{sliceName:"Slice name is already taken."}:void 0:{sliceName:"No special characters allowed."}:{sliceName:"Cannot be empty"}}},21151:function(e,a,t){var i=t(52322),r=t(75289);a.Z=function(e){let{elems:a,renderElem:t,defineElementKey:n,gridTemplateMinPx:l="320px",gridGap:s="16px",sx:o}=e;return(0,i.jsx)(r.xu,{as:"section",sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(l,", 1fr))"),gridGap:s,pt:2,...o},children:a.map((e,a)=>e?(0,i.jsx)("span",{children:t(e,a)},"".concat(n(e),"-").concat(a+1)):null)})}}}]);