@blocklet/pages-kit-inner-components 0.4.96 → 0.4.97

package/lib/cjs/setting.js

@@ -18,7 +18,7 @@
     top: 0;
     right: 0;
   }
-`;function Vt({value:e,onChange:s,...o}){const l=P.useRef(null);return t.jsxs(t.Fragment,{children:[t.jsx(_t,{...o,value:e,onChange:s,InputProps:{endAdornment:t.jsx(r.InputAdornment,{position:"end",children:t.jsx(Et,{color:e??"",style:{width:"1.5rem",height:"1.5rem",padding:0},onClick:()=>{var d;(d=l.current)==null||d.open({value:e??""})}})})}}),t.jsx(Ft,{ref:l,onSave:({value:d},m)=>{s(d),m()}})]})}function qt({label:e,value:s,onChange:o,property:l,component:d,defaultLocale:m,allComponents:u,PropertyValueField:b,onUpload:g}){const{locale:f}=_.useLocaleContext(),k=P.useRef(null);if(!Ce.default(l.subProperties)){const i=N.default(Object.values(l.subProperties||{}),"index").filter(c=>c.data.visible!==!1&&c.data.key);return t.jsxs(r.Stack,{width:"100%",children:[t.jsx(r.FormLabel,{sx:{px:.25,py:.5},children:e}),t.jsx(r.Box,{children:t.jsx(r.Box,{sx:{position:"relative"},children:i.map((c,n)=>{const{data:p}=c,j=p.key??p.id,w=n===i.length-1;let a=null;try{s&&typeof s=="object"?a=s[j]:typeof s=="string"&&(a=(l.type==="yaml"?oe.parse(s||""):JSON.parse(s||"{}"))[j])}catch{}a==null&&(p.locales&&f&&p.locales[f]?a=p.locales[f].defaultValue:p.locales&&m&&p.locales[m]&&(a=p.locales[m].defaultValue));const v=S=>{try{let C={};if(typeof s=="string")try{C=l.type==="yaml"?oe.parse(s||""):JSON.parse(s||"{}")}catch{}else typeof s=="object"&&s!==null&&(C={...s});Te.default(C,j,S);const h=B.transformValue(C,l.type);o==null||o(h)}catch(C){console.error("Error updating property:",C)}},y=8;return t.jsxs(r.Box,{sx:{mb:w?0:1,display:"flex",flexDirection:"row"},children:[t.jsxs(r.Box,{sx:{position:"relative",width:24,flexShrink:0},children:[t.jsx(r.Box,{sx:{position:"absolute",left:y,top:0,height:16,width:0,borderLeft:"1px dashed",borderColor:"divider"}}),t.jsx(r.Box,{sx:{position:"absolute",left:y,top:16,width:12,height:0,borderTop:"1px dashed",borderColor:"divider"}}),!w&&t.jsx(r.Box,{sx:{position:"absolute",left:y,top:16,bottom:-8,width:0,borderLeft:"1px dashed",borderColor:"divider"}})]}),t.jsx(r.Box,{sx:{flexGrow:1},children:t.jsx(b,{component:d,property:p,value:a,onChange:v,size:"small",fullWidth:!0,defaultLocale:m,allComponents:u})})]},p.id)})})})]})}return t.jsx(r.Stack,{width:"100%",gap:2,children:t.jsxs(r.Stack,{sx:{width:"100%",position:"relative",pt:1,pb:"6px",px:"1px",minHeight:50,".monaco-editor,.overflow-guard":{borderRadius:1}},children:[t.jsx(r.FormLabel,{sx:{position:"absolute",left:0,top:0,transform:"translate(0px, -7px) scale(0.75)"},children:e}),t.jsx(ne.CodeEditor,{keyId:l.id,locale:f,language:l.type==="yaml"?"yaml":"json",value:typeof s=="string"?s:"",onChange:i=>{o==null||o(i)},onUpload:i=>{k.current=i,g&&g(i)}},l.id),t.jsx(r.Box,{component:"fieldset",sx:{pointerEvents:"none",position:"absolute",left:0,top:-5,width:"100%",height:"100%",border:1,borderColor:"rgba(0, 0, 0, 0.23)",borderRadius:1,px:1,py:0},children:t.jsx(r.Box,{component:"legend",sx:{fontSize:"0.75em"},children:t.jsx(r.Box,{component:"span",sx:{opacity:0},children:e})})})]})})}const Ut=["string","multiline","json","yaml","url","component","custom"];function we(e){return e.type?!Ut.includes(e.type):!1}function Be({disabled:e,list:s,renderItem:o,...l}){const d=P.useRef(null),m=P.useId(),u=re.useUpdate(),b=N.default(Object.entries(s),c=>c[1].index).map(c=>c[0]),g=P.useRef(b),f=P.useCallback(c=>{g.current=c,u()},[u]),k=P.useCallback(({index:c},{index:n})=>{const p=[...g.current];p.splice(n,0,...p.splice(c,1)),f(p)},[f]);P.useEffect(()=>{f(b)},[b.join("-")]);const[{isOver:x},i]=se.useDrop({accept:m,collect:c=>({isOver:c.isOver()}),canDrop:()=>!e,drop:()=>{var p;const c=()=>{g.current.forEach((j,w)=>{const a=s[j];a&&(a.index=w)})},n=(p=Y.getYjsValue(s))==null?void 0:p.doc;n?n.transact(()=>{c()}):c()}});return P.useEffect(()=>{x||f(b)},[x]),i(d),t.jsx(r.Box,{...l,ref:d,className:Ge.cx(x&&"isDragging"),children:g.current.map((c,n)=>t.jsx(Wt,{type:m,disabled:e,id:c,index:n,itemIndex:p=>g.current.indexOf(p),move:k,children:p=>{const j=s[c];return j?o(j.data,n,p):null}},c))})}function Wt({disabled:e,id:s,index:o,type:l,children:d,itemIndex:m,move:u}){const b=P.useRef(),[{isDragging:g},f,k]=se.useDrag({type:l,item:()=>({id:s}),canDrag:()=>!e,collect:i=>({isDragging:i.isDragging()})}),[,x]=se.useDrop({accept:l,canDrop:()=>!e,hover(i,c){var y;if(!b.current)return;const n=m(i.id),p=o;if(n===p)return;const j=(y=b.current)==null?void 0:y.getBoundingClientRect(),w=(j.bottom-j.top)/2,v=c.getClientOffset().y-j.top;n<p&&v<w||n>p&&v>w||u({id:i.id,index:n},{id:s,index:o})}});return typeof d=="function"?d({isDragging:g,drag:f,drop:i=>(b.current=i,x(i)),preview:k}):(f(x(k(b))),t.jsx(r.Box,{ref:b,children:d}))}function Mt({drop:e,preview:s,drag:o,disabled:l,isDragging:d,children:m,onDelete:u,onVisibilityChange:b,visible:g=!0,actions:f,alwaysShowActions:k=!1}){const{t:x}=_.useLocaleContext();return t.jsx(r.Box,{ref:e,sx:{":hover .hover-visible":{maxWidth:"100%"},opacity:g?1:.5},children:t.jsxs(r.Box,{sx:{position:"relative"},children:[t.jsx(r.Box,{ref:s,sx:{flex:1,borderRadius:.5,bgcolor:d?"action.hover":"background.paper",opacity:.9999},children:m}),!l&&t.jsx(r.Box,{className:k?"":"hover-visible",sx:{maxWidth:k?"100%":0,overflow:"hidden",position:"absolute",right:2,top:2,transition:"max-width 0.3s ease-in-out"},children:t.jsxs(r.Stack,{direction:"row",sx:{bgcolor:i=>r.alpha(i.palette.grey[200],.9),borderRadius:1,p:.5,[`.${r.buttonClasses.root}`]:{minWidth:24,width:24,height:24,p:0}},children:[f,b&&t.jsx(r.Tooltip,{title:x(g?"hideParameter":"showParameter"),disableInteractive:!0,placement:"top",children:t.jsx(r.Button,{onClick:()=>b(!g),children:g?t.jsx(z.VisibilityOffRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}}):t.jsx(z.VisibilityRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}})})}),u&&t.jsx(r.Tooltip,{title:x("delete"),disableInteractive:!0,placement:"top",children:t.jsx(r.Button,{onClick:u,children:t.jsx(z.DeleteOutlineRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}})})}),t.jsx(r.Tooltip,{title:x("dragSort"),disableInteractive:!0,placement:"top",children:t.jsx(r.Button,{ref:o,children:t.jsx(z.DragIndicatorRounded,{sx:{color:"grey.500"}})})})]})})]})})}function Kt({label:e,value:s,onChange:o}){const[l,d]=P.useState(!1);return t.jsxs(r.Stack,{gap:1,children:[t.jsx(r.TextField,{label:e,size:"small",value:s,onChange:m=>o==null?void 0:o(m.target.value),InputProps:{endAdornment:t.jsx(A.UploaderButton,{onChange:({response:m})=>{var b;const u=(b=m==null?void 0:m.data)==null?void 0:b.filename;u&&(o==null||o(u))}})}}),s&&t.jsx(r.Box,{component:"img",sx:{objectFit:"contain",borderRadius:1,cursor:"pointer"},src:B.getImageAbsoluteUrl(s),alt:e,maxWidth:100,maxHeight:100,width:"100%",onClick:()=>d(!0)}),t.jsx(r.Dialog,{open:l,onClose:()=>d(!1),children:t.jsx(r.Box,{component:"img",sx:{objectFit:"contain"},src:B.getImageAbsoluteUrl(s),alt:e})})]})}function le(e,s=""){return Ct.default(e,(o,l,d)=>{const m=s?`${s}.${d}`:d;return St.default(l)?vt.default(o,le(l,m)):o[m]=l,o},{})}const Lt=[{value:"string",label:"Text"},{value:"multiline",label:"Text (Multiline)"},{value:"number",label:"Number"},{value:"decimal",label:"Decimal"},{value:"boolean",label:"Boolean"},{value:"color",label:"Color"},{value:"url",label:"URL (Upload)"},{value:"json",label:"JSON"},{value:"yaml",label:"YAML"},{value:"array",label:"Array"},{value:"component",label:"Component"},{value:"custom",label:"Custom (Render by a Component)"}];function X(e,s,o){return!e||!o?!1:Object.values(e).some(({data:l})=>l.id!==s&&l.key===o)}function ie(e,s){var o;return!e||!s?!1:((o=e[s])==null?void 0:o.data.visible)??!0}function $t({componentId:e}){const{state:{components:s}}=B.useStore(),o=s[e],l=o==null?void 0:o.data;return l?t.jsx(r.Stack,{maxHeight:"100%",overflow:"auto",children:t.jsx(r.Box,{p:2,children:t.jsx(xt.ErrorBoundary,{FallbackComponent:B.ErrorView,resetKeys:[e],children:t.jsx(Jt,{value:l})})})}):null}function Jt({value:e}){var g,f,k;const{t:s}=_.useLocaleContext(),{localState:{currentLocale:o,componentDebugProps:l},state:{config:{defaultLocale:d}},localActions:{setComponentDebugProps:m}}=B.useStore(),u=Y.getYjsValue(e).doc,b=B.useAllComponents();return t.jsx(r.Stack,{height:"100%",children:t.jsxs(r.Stack,{gap:2,children:[t.jsx(Oe,{config:e}),t.jsx(_e,{config:e,currentLocale:o,defaultLocale:d,allComponents:b,onUpdateConfig:x=>{u.transact(()=>{x(e)})}}),t.jsxs(r.Stack,{gap:2,direction:"row",justifyContent:"space-between",alignItems:"center",children:[t.jsx(r.Typography,{variant:"subtitle1",children:s("renderer")}),t.jsxs(r.TextField,{hiddenLabel:!0,size:"small",select:!0,SelectProps:{autoWidth:!0},value:((g=e.renderer)==null?void 0:g.type)||"react-component",onChange:x=>{u.transact(()=>{const i=x.target.value;e.renderer??(e.renderer={type:i}),e.renderer.type=i})},children:[t.jsx(r.MenuItem,{value:"react-component",children:"React Component"}),t.jsx(r.MenuItem,{value:"component",children:"Custom Component"})]})]}),((f=e.renderer)==null?void 0:f.type)==="component"&&t.jsx(er,{value:e}),((k=e.renderer)==null?void 0:k.type)==="react-component"&&t.jsx(Zt,{value:e}),t.jsx(ae,{config:e,currentLocale:o,defaultLocale:d,allComponents:b,onChange:({key:x,value:i})=>{m({[x]:i.value})},props:{...l}})]})})}function Oe({config:e}){const{t:s}=_.useLocaleContext();return t.jsx(A.UploaderProvider,{children:t.jsxs(r.Stack,{gap:2,children:[t.jsx(r.Typography,{variant:"subtitle1",children:s("basicInfo")}),t.jsx(r.TextField,{label:s("name"),size:"small",value:e.name||"",onChange:o=>e.name=o.target.value}),t.jsx(r.TextField,{label:s("description"),size:"small",multiline:!0,minRows:2,maxRows:10,inputProps:{maxLength:200},value:e.description||"",onChange:o=>e.description=o.target.value}),t.jsx(r.Autocomplete,{size:"small",options:[],multiple:!0,freeSolo:!0,value:e.tags??[],onChange:(o,l)=>e.tags=l,renderInput:o=>t.jsx(r.TextField,{label:s("tags"),...o})}),t.jsx(Kt,{label:s("previewImage"),value:e.previewImage||"",onChange:o=>e.previewImage=o})]})})}function Re({data:e,params:s,visible:o,config:l,currentLocale:d,defaultLocale:m,allComponents:u,onUpdateConfig:b}){var k,x,i,c,n,p;const{t:g}=_.useLocaleContext(),f=P.useMemo(()=>e.type==="json"||e.type==="yaml"||e.type==="array"?Qt:W,[e.type]);return t.jsx(Mt,{preview:s.preview,drop:s.drop,drag:s.drag,isDragging:s.isDragging,onDelete:()=>{b(j=>{if(j.properties){const a=Object.entries(j.properties).sort(([,y],[,S])=>y.index-S.index);delete j.properties[e.id],a.filter(([y])=>y!==e.id).forEach(([,y],S)=>{y.index=S})}})},visible:o,onVisibilityChange:j=>{b(w=>{const a=w.properties[e.id].data;a.visible=j})},alwaysShowActions:!0,children:t.jsxs(r.Stack,{direction:"column",gap:2,children:[t.jsx(r.TextField,{label:g("key"),size:"small",required:!0,sx:{width:"calc(100% - 80px - 8px)",flex:1,"& .MuiOutlinedInput-root":{borderColor:e.key?X(l.properties,e.id,e.key)?"warning.main":void 0:"error.main"},"& .MuiFormLabel-root":{color:e.key?X(l.properties,e.id,e.key)?"warning.main":"text.secondary":"error.main"},"& .MuiFormLabel-root.Mui-focused":{color:e.key?X(l.properties,e.id,e.key)?"warning.main":"primary.main":"error.main"}},value:e.key||"",onChange:j=>{b(w=>{const a=w.properties[e.id].data;a.key=j.target.value.trim()})},InputProps:{endAdornment:!e.key||e.key&&X(l.properties,e.id,e.key)?t.jsx(r.InputAdornment,{position:"end",sx:{width:16,ml:0},children:t.jsx(r.Tooltip,{title:e.key?g("duplicateKey"):g("requiredKey"),children:t.jsx(z.InfoRounded,{sx:{color:e.key?"warning.main":"error.main",fontSize:16}})})}):null}}),t.jsxs(r.Stack,{direction:"row",gap:1,children:[t.jsx(r.TextField,{label:g("label"),size:"small",sx:{flex:1},value:(((x=(k=e.locales)==null?void 0:k[d])==null?void 0:x.name)??((c=(i=e.locales)==null?void 0:i[m])==null?void 0:c.name))||"",onChange:j=>{b(w=>{var v;const a=w.properties[e.id].data;a.locales??(a.locales={}),(v=a.locales)[d]??(v[d]={}),a.locales[d].name=j.target.value})}}),t.jsx(r.TextField,{label:g("type"),size:"small",select:!0,sx:{flex:1},value:e.type==="string"&&e.multiline?"multiline":e.type||"string",onChange:j=>{b(w=>{const a=w.properties[e.id].data;if(a.locales)for(const y of Object.keys(a.locales))a.locales[y].defaultValue=void 0;const v=j.target.value;v==="multiline"?(a.type="string",a.multiline=!0):(typeof a.multiline<"u"&&delete a.multiline,a.type=v)})},children:Lt.map(j=>t.jsx(r.MenuItem,{value:j.value,children:j.label},j.value))})]}),t.jsxs(r.Stack,{direction:"row",gap:1,children:[t.jsx(f,{allComponents:u,defaultLocale:m,component:l,property:e,label:g("defaultValue"),size:"small",fullWidth:!0,value:(p=(n=e.locales)==null?void 0:n[d])==null?void 0:p.defaultValue,onChange:(j,w)=>{b(a=>{var y;const v=a.properties[e.id].data;if(w!=null&&w.forceUpdateProperty){const S=le(v),C=le(j);Object.keys(C).forEach(h=>{S[h]||Te.default(v,h,C[h])})}else v.locales??(v.locales={}),(y=v.locales)[d]??(y[d]={}),v.locales[d].defaultValue=j})}}),e.type==="custom"?t.jsx(r.Box,{children:t.jsx(Yt,{property:e,allComponents:u})}):null]})]})})}function Ht(e,s){const[o,l]=P.useState(0);return P.useEffect(()=>{const m=setTimeout(()=>{if(e.current){let u=e.current.parentElement,b=0;for(;u;)u.classList.contains("property-container")&&b++,u=u.parentElement;l(b)}},100);return()=>clearTimeout(m)},[e,s]),o}function _e({config:e,currentLocale:s,defaultLocale:o,allComponents:l,onUpdateConfig:d,useI18nEditor:m=!0}){const{t:u}=_.useLocaleContext(),b=F.usePopupState({variant:"dialog"}),g=e.properties&&N.default(Object.values(e.properties),"index");return t.jsx(A.UploaderProvider,{children:t.jsxs(r.Stack,{gap:2,children:[t.jsxs(r.Stack,{direction:"row",gap:1,alignItems:"center",justifyContent:"space-between",children:[t.jsx(r.Typography,{variant:"subtitle1",children:u("properties")}),t.jsx(r.Box,{flex:1}),m&&t.jsx(r.Button,{sx:{minWidth:32,minHeight:32,p:0},...F.bindTrigger(b),children:t.jsx(z.TranslateRounded,{fontSize:"small"})})]}),e.properties&&Object.keys(e.properties).length>0?t.jsx(Be,{component:r.Stack,gap:2,list:e.properties,renderItem:(f,k,x)=>{const i=ie(e.properties,f.id);return t.jsx(r.Paper,{elevation:0,className:"property-container",sx:{p:1.25,borderRadius:1,border:i?"1px solid":"1px dashed",borderColor:"divider"},children:t.jsx(r.Stack,{gap:2,children:t.jsx(Re,{data:f,params:x,visible:i,config:e,currentLocale:s,defaultLocale:o,allComponents:l,onUpdateConfig:d})})},f.id)}}):t.jsx(G.default,{style:{fontSize:12},children:u("maker.properties.noProperties")}),t.jsx(r.Button,{fullWidth:!0,variant:"outlined",className:"ignore-style-override",onClick:()=>{d(f=>{var x;const k=B.nextId();f.properties??(f.properties={}),(x=f.properties)[k]??(x[k]={index:(g==null?void 0:g.length)||0,data:{id:k}})})},startIcon:t.jsx(z.AddRounded,{}),children:u("addObject",{object:u("property")})}),m&&t.jsx(De,{...F.bindDialog(b),component:e})]})})}function Yt({property:e,allComponents:s}){const o=F.usePopupState({variant:"popper"});return t.jsxs(t.Fragment,{children:[t.jsx(r.Button,{sx:{minWidth:0},...F.bindTrigger(o),children:t.jsx(z.SettingsRounded,{fontSize:"small"})}),t.jsx(r.Popper,{...F.bindPopper(o),children:t.jsx(Pe.ClickAwayListener,{onClickAway:o.close,children:t.jsx(r.Paper,{children:t.jsx(r.Box,{width:500,p:2,children:t.jsx(te,{value:e.componentId,onChange:(l,d)=>e.componentId=d,allComponents:s})})})})})]})}function Gt({value:e,valueImmutable:s,onChange:o,defaultLocale:l,allComponents:d}){var k;const[m,u]=P.useState(!1),{t:b,locale:g}=_.useLocaleContext(),f=typeof(e==null?void 0:e.componentId)=="string"?(k=d[e.componentId])==null?void 0:k.data:void 0;return f?t.jsxs(r.Box,{sx:{width:"100%",position:"relative"},children:[t.jsx(r.IconButton,{sx:{minWidth:0},disabled:!f,size:"small",onClick:()=>u(!m),color:m?"primary":"default",children:t.jsx(z.SettingsRounded,{fontSize:"small"})}),t.jsx(r.Collapse,{in:m,timeout:"auto",unmountOnExit:!0,sx:{width:"100%",zIndex:10},children:t.jsxs(r.Paper,{elevation:1,sx:{mt:1,p:2,borderRadius:1,border:"1px solid",borderColor:"divider",width:"100%"},children:[t.jsx(r.Box,{width:"100%",mb:2,children:t.jsx(ae,{config:f,currentLocale:g,defaultLocale:l,allComponents:d,propertiesValue:e==null?void 0:e.properties,onChange:({id:x,value:i})=>{const c=gt.default(i.value),n=JSON.parse(JSON.stringify(e));s?o==null||o({...n,properties:{...n.properties,[x]:{value:c}}}):(n.properties=n.properties??{},n.properties[x]={value:c},o==null||o(n))}})}),t.jsx(r.Button,{size:"small",onClick:()=>u(!1),sx:{mt:1},children:b("close")})]})})]}):null}function De({type:e="properties",component:s,...o}){var x,i,c;const{t:l}=_.useLocaleContext(),{state:{components:d,supportedLocales:m,config:{defaultLocale:u}}}=B.useStore(),b=B.useAllComponents(),g=Y.getYjsValue(s).doc,f=e==="properties"?s.properties:e==="parameters"&&((x=s.renderer)==null?void 0:x.type)==="component"?(i=d[s.renderer.componentId])==null?void 0:i.data.properties:void 0,k=((c=s.renderer)==null?void 0:c.type)==="component"?s:void 0;return t.jsxs(r.Dialog,{...o,fullWidth:!0,maxWidth:"lg",children:[t.jsx(r.DialogTitle,{children:l("i18nEditorTitle")}),t.jsx(r.DialogContent,{children:f&&t.jsx(r.Stack,{children:t.jsxs(r.Table,{stickyHeader:!0,sx:{td:{verticalAlign:"top"}},children:[t.jsx(r.TableHead,{children:t.jsx(r.TableRow,{children:m.map(({locale:n,name:p})=>t.jsxs(r.TableCell,{children:[p,u===n&&t.jsx(z.StarRounded,{sx:{fontSize:12,color:"text.secondary"}})]},n))})}),t.jsx(r.TableBody,{children:N.default(Object.values(f),"index").map(({data:n})=>t.jsx(r.TableRow,{children:m.map(({locale:p})=>{var j,w,a,v,y,S,C,h,I,T,R,E,V,q,Q,K,L,$,J,H,ue,de,pe,xe,me,fe;return t.jsx(r.TableCell,{children:t.jsx(r.Stack,{gap:1,children:e==="properties"?t.jsxs(t.Fragment,{children:[t.jsx(r.TextField,{size:"small",label:"Key",value:n.key||"",onChange:M=>{g.transact(()=>{n.key=M.target.value.trim()})}}),t.jsx(r.TextField,{size:"small",label:l("label"),value:(((w=(j=n.locales)==null?void 0:j[p])==null?void 0:w.name)??((v=(a=n.locales)==null?void 0:a[u])==null?void 0:v.name))||"",onChange:M=>{g.transact(()=>{var U;n.locales??(n.locales={}),(U=n.locales)[p]??(U[p]={}),n.locales[p].name=M.target.value})}}),t.jsx(r.Box,{children:t.jsx(W,{allComponents:b,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,label:"Default Value",valueImmutable:ee.default((S=(y=n.locales)==null?void 0:y[p])==null?void 0:S.defaultValue),value:((h=(C=n.locales)==null?void 0:C[p])==null?void 0:h.defaultValue)??((T=(I=n.locales)==null?void 0:I[u])==null?void 0:T.defaultValue),onChange:M=>{g.transact(()=>{var U;n.locales??(n.locales={}),(U=n.locales)[p]??(U[p]={}),n.locales[p].defaultValue=M})}})})]}):e==="parameters"&&k?t.jsx(r.Box,{children:t.jsx(W,{allComponents:b,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,valueImmutable:ee.default((q=(V=(E=(R=k.renderer.properties)==null?void 0:R[n.id])==null?void 0:E.locales)==null?void 0:V[p])==null?void 0:q.value),value:(($=(L=(K=(Q=k.renderer.properties)==null?void 0:Q[n.id])==null?void 0:K.locales)==null?void 0:L[p])==null?void 0:$.value)??((de=(ue=(H=(J=k.renderer.properties)==null?void 0:J[n.id])==null?void 0:H.locales)==null?void 0:ue[u])==null?void 0:de.value)??((xe=(pe=n.locales)==null?void 0:pe[p])==null?void 0:xe.defaultValue)??((fe=(me=n.locales)==null?void 0:me[u])==null?void 0:fe.defaultValue),onChange:M=>{g.transact(()=>{var U,he,be,je,ye;(U=k.renderer).properties??(U.properties={}),(he=k.renderer.properties)[be=n.id]??(he[be]={}),(je=k.renderer.properties[n.id]).locales??(je.locales={}),(ye=k.renderer.properties[n.id].locales)[p]??(ye[p]={}),k.renderer.properties[n.id].locales[p].value=M})}})}):null},n.id)},p)})},n.id))})]})})}),t.jsx(r.DialogActions,{children:t.jsx(r.Button,{onClick:n=>{var p;return(p=o.onClose)==null?void 0:p.call(o,n,"escapeKeyDown")},children:l("close")})})]})}const Ie=(e,s)=>o=>{const l=[o.palette.info.main,o.palette.primary.main,o.palette.secondary.main,o.palette.success.main,o.palette.warning.main],d=Math.min(l.length-1,e),m=l[d],u=ve.alpha(m,.5),b=ve.alpha(m,1);return{borderColor:`${u} !important`,borderLeft:"3px solid !important",borderLeftColor:u,color:b,...s}};function Qt({property:e,onChange:s,defaultLocale:o,allComponents:l}){const{t:d,locale:m}=_.useLocaleContext(),u=P.useRef(null),b=Ht(u,e),g=P.useCallback(()=>{if(!(e.type!=="json"&&e.type!=="yaml"&&e.type!=="array")&&e.subProperties)try{const f={};N.default(Object.values(e.subProperties),"index").filter(i=>i.data.visible!==!1&&i.data.key).forEach(({data:i})=>{var n,p,j,w;if(!i.key)return;let c=((p=(n=i.locales)==null?void 0:n[m])==null?void 0:p.defaultValue)??((w=(j=i.locales)==null?void 0:j[o])==null?void 0:w.defaultValue);if(i.type==="number")c=Number(c);else if(i.type==="boolean")c=c===!0||c==="true";else if((i.type==="json"||i.type==="yaml")&&typeof c=="string")try{i.type==="json"?c=JSON.parse(c):c=oe.parse(c)}catch(a){console.error("Error parsing nested value",c,a),c={}}f[i.key]=c});const x=B.transformValue(f,e.type);s==null||s(x)}catch(f){console.error("Error converting structure to text:",f)}},[e,m,o,s]);return e.type!=="json"&&e.type!=="yaml"&&e.type!=="array"?null:t.jsxs(r.Stack,{direction:"column",gap:1.5,sx:{width:"100%"},ref:u,children:[t.jsx(r.Divider,{sx:{mt:-1},children:t.jsx(r.Typography,{variant:"caption",color:"text.secondary",children:d("maker.properties.subProperties")})}),e.subProperties&&Object.keys(e.subProperties).length>0?t.jsx(Be,{component:r.Stack,gap:2,list:e.subProperties,renderItem:(f,k,x)=>{const i=f.visible!==!1;return t.jsx(r.Paper,{elevation:0,className:"property-container",sx:{p:1.25,borderRadius:1,border:i?"1px solid":"1px dashed","&":Ie(b)},children:t.jsx(r.Stack,{gap:2,children:t.jsx(Re,{data:f,params:x,visible:i,config:{properties:e.subProperties},currentLocale:m,defaultLocale:o,allComponents:l,onUpdateConfig:c=>{try{const n={properties:e.subProperties||{}};c(n);const p={...e,subProperties:n.properties};s==null||s(p,{forceUpdateProperty:!0}),g()}catch(n){console.error("Error updating property:",n)}}})})},f.id)}}):t.jsx(G.default,{style:{fontSize:12,height:100},children:d("maker.properties.noSubProperties")}),t.jsx(r.Button,{fullWidth:!0,variant:"outlined",className:"ignore-style-override",size:"small",startIcon:t.jsx(z.AddRounded,{}),onClick:()=>{try{const f=e.subProperties||{},k=B.nextId(),i={index:Object.values(f).length,data:{id:k,key:"",type:"string",visible:!0,locales:{[m]:{name:"",defaultValue:""}},subProperties:{}}},c={...e,subProperties:{...f,[k]:i}};s==null||s(c,{forceUpdateProperty:!0}),g()}catch(f){console.error("Error adding property:",f)}},sx:{"&":Ie(b,{})},children:d("maker.properties.addSubProperty")})]})}function W({component:e,property:s,value:o,onChange:l,valueImmutable:d,defaultLocale:m,allComponents:u,...b}){var c,n,p,j,w;const{locale:g}=_.useLocaleContext(),f=A.useUploader(),k=P.useRef(null),x=()=>{var v;const a=(v=f==null?void 0:f.current)==null?void 0:v.getUploader();a==null||a.open(),k.current&&a.onceUploadSuccess(({response:y})=>{var C,h;let S=((C=y==null?void 0:y.data)==null?void 0:C.filename)||"";S&&(S=`mediakit://${S}`,o&&!o.includes("mediakit://")&&(S+=" # please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address")),(h=k.current)==null||h.call(k,S)})},i=b.label??(((n=(c=s.locales)==null?void 0:c[g])==null?void 0:n.name)||((j=(p=s.locales)==null?void 0:p[m])==null?void 0:j.name)||s.key||s.id);if(s.type==="number")return t.jsx(Xt,{...b,label:i,NumberProps:{value:["number","string"].includes(typeof o)?o:null,onChange:(a,v)=>l==null?void 0:l(v)}});if(s.type==="decimal")return t.jsx(r.TextField,{...b,label:i,type:"text",value:o??"",onChange:a=>{const v=a.target.value;if(v===""||v==="-"){l==null||l(v);return}if(/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(v)){let S=v;/^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(S)&&(S=Number(S)),l==null||l(S)}}});if(s.type==="boolean")return t.jsx(r.FormControlLabel,{label:i,labelPlacement:"start",control:t.jsx(r.Switch,{checked:o===!0,onChange:(a,v)=>l==null?void 0:l(v)})});if(s.type==="color")return t.jsx(Vt,{label:i,value:o,onChange:a=>{l==null||l(a)}});if(s.type==="json"||s.type==="yaml")return t.jsx(qt,{label:i,value:o,onChange:a=>{l==null||l(a)},property:s,component:e,defaultLocale:m,allComponents:u,PropertyValueField:W,onUpload:a=>{k.current=a,x()}});if(s.type==="custom"){const a=(w=u[s.componentId])==null?void 0:w.data;return a?t.jsx(r.Box,{width:"100%",children:t.jsx(Z.CustomComponentRenderer,{componentId:a.id,props:{label:i,value:o,onChange:l},locale:g,dev:{mode:"draft",components:u,defaultLocale:m}})}):t.jsx(r.TextField,{...b,label:i,disabled:!0,placeholder:"Click right button select a component"})}if(s.type==="component")return t.jsxs(r.Stack,{width:"100%",direction:"column",gap:1,children:[t.jsx(te,{allComponents:u,label:i,value:o==null?void 0:o.componentId,onChange:(a,v)=>{d||!o?l==null||l({...o&&JSON.parse(JSON.stringify(o)),componentId:v}):typeof o=="object"&&(o.componentId=v,l==null||l({...o&&JSON.parse(JSON.stringify(o)),componentId:v}))}}),(o==null?void 0:o.componentId)&&t.jsx(Gt,{value:o,valueImmutable:d,onChange:l,defaultLocale:m,allComponents:u})]});if(!s.type||["string","url","multiline"].includes(s.type)){let a=s.type==="string"?s.multiline:void 0;s.type==="multiline"&&(a=!0);const v=s.type==="url"?o==null?void 0:o.url:o;return t.jsx(r.TextField,{...b,label:i,value:typeof v=="string"?v:"",multiline:a,minRows:a?2:void 0,maxRows:a?10:void 0,onChange:y=>l==null?void 0:l(s.type==="url"?{...o,url:y.target.value,mediaKitUrl:y.target.value}:y.target.value),InputProps:s.type==="url"?{sx:{},endAdornment:t.jsxs(r.InputAdornment,{position:"end",children:[t.jsx(A.UploaderButton,{onChange:async({response:y})=>{var I,T,R;const S=((I=y==null?void 0:y.data)==null?void 0:I.url)||((T=y==null?void 0:y.data)==null?void 0:T.fileUrl);let C;S&&(C=await A.getImageSize(S).catch(()=>A.getVideoSize(S)).catch(()=>{}));let h=((R=y==null?void 0:y.data)==null?void 0:R.filename)||"";h&&(h=`mediakit://${h}`),l==null||l({url:S,mediaKitUrl:h,width:C==null?void 0:C.naturalWidth,height:C==null?void 0:C.naturalHeight})}}),t.jsx(r.Tooltip,{title:"If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.",children:t.jsx(z.InfoRounded,{sx:{cursor:"default"},fontSize:"small"})})]})}:void 0})}return s.type==="array"?t.jsx(Rt,{label:i,value:Array.isArray(o)?o:[],onChange:a=>l==null?void 0:l(a),property:s,renderItem:({item:a,index:v,onChange:y})=>s.subProperties&&Object.keys(s.subProperties).length>0?t.jsx(r.Stack,{gap:1,width:"100%",children:N.default(Object.values(s.subProperties),"index").filter(S=>S.data.visible!==!1).map(({data:S})=>S.key?t.jsx(W,{component:e,property:S,value:a[S.key],onChange:C=>{const h={...a,[S.key]:C};y(h)},size:"small",fullWidth:!0,defaultLocale:m,allComponents:u},S.id):null)},v):t.jsx(r.TextField,{size:b.size,fullWidth:!0,value:a,onChange:S=>y(S.target.value)})}):(console.error("Unsupported property type",s.type),null)}function Xt({NumberProps:e,...s}){const{getInputProps:o}=Pe.unstable_useNumberInput(e),l=o();return t.jsx(r.TextField,{...s,inputProps:l})}const Ae=`import React from '@blocklet/pages-kit/builtin/react'
+`;function Vt({value:e,onChange:s,...o}){const l=P.useRef(null);return t.jsxs(t.Fragment,{children:[t.jsx(_t,{...o,value:e,onChange:s,InputProps:{endAdornment:t.jsx(r.InputAdornment,{position:"end",children:t.jsx(Et,{color:e??"",style:{width:"1.5rem",height:"1.5rem",padding:0},onClick:()=>{var d;(d=l.current)==null||d.open({value:e??""})}})})}}),t.jsx(Ft,{ref:l,onSave:({value:d},m)=>{s(d),m()}})]})}function qt({label:e,value:s,onChange:o,property:l,component:d,defaultLocale:m,allComponents:u,PropertyValueField:b,onUpload:g}){const{locale:f}=_.useLocaleContext(),k=P.useRef(null);if(!Ce.default(l.subProperties)){const i=N.default(Object.values(l.subProperties||{}),"index").filter(c=>c.data.visible!==!1&&c.data.key);return t.jsxs(r.Stack,{width:"100%",children:[t.jsx(r.FormLabel,{sx:{px:.25,py:.5},children:e}),t.jsx(r.Box,{children:t.jsx(r.Box,{sx:{position:"relative"},children:i.map((c,n)=>{const{data:p}=c,j=p.key??p.id,w=n===i.length-1;let a=null;try{s&&typeof s=="object"?a=s[j]:typeof s=="string"&&(a=(l.type==="yaml"?oe.parse(s||""):JSON.parse(s||"{}"))[j])}catch{}a==null&&(p.locales&&f&&p.locales[f]?a=p.locales[f].defaultValue:p.locales&&m&&p.locales[m]&&(a=p.locales[m].defaultValue));const v=S=>{try{let C={};if(typeof s=="string")try{C=l.type==="yaml"?oe.parse(s||""):JSON.parse(s||"{}")}catch{}else typeof s=="object"&&s!==null&&(C={...s});Te.default(C,j,S);const h=B.transformValue(C,l.type);o==null||o(h)}catch(C){console.error("Error updating property:",C)}},y=8;return t.jsxs(r.Box,{sx:{mb:w?0:1,display:"flex",flexDirection:"row"},children:[t.jsxs(r.Box,{sx:{position:"relative",width:24,flexShrink:0},children:[t.jsx(r.Box,{sx:{position:"absolute",left:y,top:0,height:16,width:0,borderLeft:"1px dashed",borderColor:"divider"}}),t.jsx(r.Box,{sx:{position:"absolute",left:y,top:16,width:12,height:0,borderTop:"1px dashed",borderColor:"divider"}}),!w&&t.jsx(r.Box,{sx:{position:"absolute",left:y,top:16,bottom:-8,width:0,borderLeft:"1px dashed",borderColor:"divider"}})]}),t.jsx(r.Box,{sx:{flexGrow:1},children:t.jsx(b,{component:d,property:p,value:a,onChange:v,size:"small",fullWidth:!0,defaultLocale:m,allComponents:u})})]},p.id)})})})]})}return t.jsx(r.Stack,{width:"100%",gap:2,children:t.jsxs(r.Stack,{sx:{width:"100%",position:"relative",pt:1,pb:"6px",px:"1px",minHeight:50,".monaco-editor,.overflow-guard":{borderRadius:1}},children:[t.jsx(r.FormLabel,{sx:{position:"absolute",left:0,top:0,transform:"translate(0px, -7px) scale(0.75)"},children:e}),t.jsx(ne.CodeEditor,{keyId:l.id,locale:f,language:l.type==="yaml"?"yaml":"json",value:typeof s=="string"?s:"",onChange:i=>{o==null||o(i)},onUpload:i=>{k.current=i,g&&g(i)}},l.id),t.jsx(r.Box,{component:"fieldset",sx:{pointerEvents:"none",position:"absolute",left:0,top:-5,width:"100%",height:"100%",border:1,borderColor:"rgba(0, 0, 0, 0.23)",borderRadius:1,px:1,py:0},children:t.jsx(r.Box,{component:"legend",sx:{fontSize:"0.75em"},children:t.jsx(r.Box,{component:"span",sx:{opacity:0},children:e})})})]})})}const Ut=["string","multiline","json","yaml","url","component","custom"];function we(e){return e.type?!Ut.includes(e.type):!1}function Be({disabled:e,list:s,renderItem:o,...l}){const d=P.useRef(null),m=P.useId(),u=re.useUpdate(),b=N.default(Object.entries(s),c=>c[1].index).map(c=>c[0]),g=P.useRef(b),f=P.useCallback(c=>{g.current=c,u()},[u]),k=P.useCallback(({index:c},{index:n})=>{const p=[...g.current];p.splice(n,0,...p.splice(c,1)),f(p)},[f]);P.useEffect(()=>{f(b)},[b.join("-")]);const[{isOver:x},i]=se.useDrop({accept:m,collect:c=>({isOver:c.isOver()}),canDrop:()=>!e,drop:()=>{var p;const c=()=>{g.current.forEach((j,w)=>{const a=s[j];a&&(a.index=w)})},n=(p=Y.getYjsValue(s))==null?void 0:p.doc;n?n.transact(()=>{c()}):c()}});return P.useEffect(()=>{x||f(b)},[x]),i(d),t.jsx(r.Box,{...l,ref:d,className:Ge.cx(x&&"isDragging"),children:g.current.map((c,n)=>t.jsx(Wt,{type:m,disabled:e,id:c,index:n,itemIndex:p=>g.current.indexOf(p),move:k,children:p=>{const j=s[c];return j?o(j.data,n,p):null}},c))})}function Wt({disabled:e,id:s,index:o,type:l,children:d,itemIndex:m,move:u}){const b=P.useRef(),[{isDragging:g},f,k]=se.useDrag({type:l,item:()=>({id:s}),canDrag:()=>!e,collect:i=>({isDragging:i.isDragging()})}),[,x]=se.useDrop({accept:l,canDrop:()=>!e,hover(i,c){var y;if(!b.current)return;const n=m(i.id),p=o;if(n===p)return;const j=(y=b.current)==null?void 0:y.getBoundingClientRect(),w=(j.bottom-j.top)/2,v=c.getClientOffset().y-j.top;n<p&&v<w||n>p&&v>w||u({id:i.id,index:n},{id:s,index:o})}});return typeof d=="function"?d({isDragging:g,drag:f,drop:i=>(b.current=i,x(i)),preview:k}):(f(x(k(b))),t.jsx(r.Box,{ref:b,children:d}))}function Mt({drop:e,preview:s,drag:o,disabled:l,isDragging:d,children:m,onDelete:u,onVisibilityChange:b,visible:g=!0,actions:f,alwaysShowActions:k=!1}){const{t:x}=_.useLocaleContext();return t.jsx(r.Box,{ref:e,sx:{":hover .hover-visible":{maxWidth:"100%"},opacity:g?1:.5},children:t.jsxs(r.Box,{sx:{position:"relative"},children:[t.jsx(r.Box,{ref:s,sx:{flex:1,borderRadius:.5,bgcolor:d?"action.hover":"background.paper",opacity:.9999},children:m}),!l&&t.jsx(r.Box,{className:k?"":"hover-visible",sx:{maxWidth:k?"100%":0,overflow:"hidden",position:"absolute",right:2,top:2,transition:"max-width 0.3s ease-in-out"},children:t.jsxs(r.Stack,{direction:"row",sx:{bgcolor:i=>r.alpha(i.palette.grey[200],.9),borderRadius:1,p:.5,[`.${r.buttonClasses.root}`]:{minWidth:24,width:24,height:24,p:0}},children:[f,b&&t.jsx(r.Tooltip,{title:x(g?"hideParameter":"showParameter"),disableInteractive:!0,placement:"top",children:t.jsx(r.Button,{onClick:()=>b(!g),children:g?t.jsx(z.VisibilityOffRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}}):t.jsx(z.VisibilityRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}})})}),u&&t.jsx(r.Tooltip,{title:x("delete"),disableInteractive:!0,placement:"top",children:t.jsx(r.Button,{onClick:u,children:t.jsx(z.DeleteOutlineRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}})})}),t.jsx(r.Tooltip,{title:x("dragSort"),disableInteractive:!0,placement:"top",children:t.jsx(r.Button,{ref:o,children:t.jsx(z.DragIndicatorRounded,{sx:{color:"grey.500"}})})})]})})]})})}function Kt({label:e,value:s,onChange:o}){const[l,d]=P.useState(!1);return t.jsxs(r.Stack,{gap:1,children:[t.jsx(r.TextField,{label:e,size:"small",value:s,onChange:m=>o==null?void 0:o(m.target.value),InputProps:{endAdornment:t.jsx(A.UploaderButton,{onChange:({response:m})=>{var b;const u=(b=m==null?void 0:m.data)==null?void 0:b.filename;u&&(o==null||o(u))}})}}),s&&t.jsx(r.Box,{component:"img",sx:{objectFit:"contain",borderRadius:1,cursor:"pointer"},src:B.getImageAbsoluteUrl(s),alt:e,maxWidth:100,maxHeight:100,width:"100%",onClick:()=>d(!0)}),t.jsx(r.Dialog,{open:l,onClose:()=>d(!1),children:t.jsx(r.Box,{component:"img",sx:{objectFit:"contain"},src:B.getImageAbsoluteUrl(s),alt:e})})]})}function le(e,s=""){return Ct.default(e,(o,l,d)=>{const m=s?`${s}.${d}`:d;return St.default(l)?vt.default(o,le(l,m)):o[m]=l,o},{})}const Lt=[{value:"string",label:"Text"},{value:"multiline",label:"Text (Multiline)"},{value:"number",label:"Number"},{value:"decimal",label:"Decimal"},{value:"boolean",label:"Boolean"},{value:"color",label:"Color"},{value:"url",label:"URL (Upload)"},{value:"json",label:"JSON"},{value:"yaml",label:"YAML"},{value:"array",label:"Array"},{value:"component",label:"Component"},{value:"custom",label:"Custom (Render by a Component)"}];function X(e,s,o){return!e||!o?!1:Object.values(e).some(({data:l})=>l.id!==s&&l.key===o)}function ie(e,s){var o;return!e||!s?!1:((o=e[s])==null?void 0:o.data.visible)??!0}function $t({componentId:e}){const{state:{components:s}}=B.useStore(),o=s[e],l=o==null?void 0:o.data;return l?t.jsx(r.Stack,{maxHeight:"100%",overflow:"auto",children:t.jsx(r.Box,{p:2,children:t.jsx(xt.ErrorBoundary,{FallbackComponent:B.ErrorView,resetKeys:[e],children:t.jsx(Jt,{value:l})})})}):null}function Jt({value:e}){var g,f,k;const{t:s}=_.useLocaleContext(),{localState:{currentLocale:o,componentDebugProps:l},state:{config:{defaultLocale:d}},localActions:{setComponentDebugProps:m}}=B.useStore(),u=Y.getYjsValue(e).doc,b=B.useAllComponents();return t.jsx(r.Stack,{height:"100%",children:t.jsxs(r.Stack,{gap:2,children:[t.jsx(Oe,{config:e}),t.jsx(_e,{config:e,currentLocale:o,defaultLocale:d,allComponents:b,onUpdateConfig:x=>{u.transact(()=>{x(e)})}}),t.jsxs(r.Stack,{gap:2,direction:"row",justifyContent:"space-between",alignItems:"center",children:[t.jsx(r.Typography,{variant:"subtitle1",children:s("renderer")}),t.jsxs(r.TextField,{hiddenLabel:!0,size:"small",select:!0,SelectProps:{autoWidth:!0},value:((g=e.renderer)==null?void 0:g.type)||"react-component",onChange:x=>{u.transact(()=>{const i=x.target.value;e.renderer??(e.renderer={type:i}),e.renderer.type=i})},children:[t.jsx(r.MenuItem,{value:"react-component",children:"React Component"}),t.jsx(r.MenuItem,{value:"component",children:"Custom Component"})]})]}),((f=e.renderer)==null?void 0:f.type)==="component"&&t.jsx(er,{value:e}),((k=e.renderer)==null?void 0:k.type)==="react-component"&&t.jsx(Zt,{value:e}),t.jsx(ae,{config:e,currentLocale:o,defaultLocale:d,allComponents:b,onChange:({key:x,value:i})=>{m({[x]:i.value})},props:{...l}})]})})}function Oe({config:e}){const{t:s}=_.useLocaleContext();return t.jsx(A.UploaderProvider,{children:t.jsxs(r.Stack,{gap:2,children:[t.jsx(r.Typography,{variant:"subtitle1",children:s("basicInfo")}),t.jsx(r.TextField,{label:s("name"),size:"small",value:e.name||"",onChange:o=>e.name=o.target.value}),t.jsx(r.TextField,{label:s("description"),size:"small",multiline:!0,minRows:2,maxRows:10,inputProps:{maxLength:200},value:e.description||"",onChange:o=>e.description=o.target.value}),t.jsx(r.Autocomplete,{size:"small",options:[],multiple:!0,freeSolo:!0,value:e.tags??[],onChange:(o,l)=>e.tags=l,renderInput:o=>t.jsx(r.TextField,{label:s("tags"),...o})}),t.jsx(Kt,{label:s("previewImage"),value:e.previewImage||"",onChange:o=>e.previewImage=o})]})})}function Re({data:e,params:s,visible:o,config:l,currentLocale:d,defaultLocale:m,allComponents:u,onUpdateConfig:b}){var k,x,i,c,n,p;const{t:g}=_.useLocaleContext(),f=P.useMemo(()=>e.type==="json"||e.type==="yaml"||e.type==="array"?Qt:W,[e.type]);return t.jsx(Mt,{preview:s.preview,drop:s.drop,drag:s.drag,isDragging:s.isDragging,onDelete:()=>{b(j=>{if(j.properties){const a=Object.entries(j.properties).sort(([,y],[,S])=>y.index-S.index);delete j.properties[e.id],a.filter(([y])=>y!==e.id).forEach(([,y],S)=>{y.index=S})}})},visible:o,onVisibilityChange:j=>{b(w=>{const a=w.properties[e.id].data;a.visible=j})},alwaysShowActions:!0,children:t.jsxs(r.Stack,{direction:"column",gap:2,children:[t.jsx(r.TextField,{label:g("key"),size:"small",required:!0,sx:{width:"calc(100% - 80px - 8px)",flex:1,"& .MuiOutlinedInput-root":{borderColor:e.key?X(l.properties,e.id,e.key)?"warning.main":void 0:"error.main"},"& .MuiFormLabel-root":{color:e.key?X(l.properties,e.id,e.key)?"warning.main":"text.secondary":"error.main"},"& .MuiFormLabel-root.Mui-focused":{color:e.key?X(l.properties,e.id,e.key)?"warning.main":"primary.main":"error.main"}},value:e.key||"",onChange:j=>{b(w=>{const a=w.properties[e.id].data;a.key=j.target.value.trim()})},InputProps:{endAdornment:!e.key||e.key&&X(l.properties,e.id,e.key)?t.jsx(r.InputAdornment,{position:"end",sx:{width:16,ml:0},children:t.jsx(r.Tooltip,{title:e.key?g("duplicateKey"):g("requiredKey"),children:t.jsx(z.InfoRounded,{sx:{color:e.key?"warning.main":"error.main",fontSize:16}})})}):null}}),t.jsxs(r.Stack,{direction:"row",gap:1,children:[t.jsx(r.TextField,{label:g("label"),size:"small",sx:{flex:1},value:(((x=(k=e.locales)==null?void 0:k[d])==null?void 0:x.name)??((c=(i=e.locales)==null?void 0:i[m])==null?void 0:c.name))||"",onChange:j=>{b(w=>{var v;const a=w.properties[e.id].data;a.locales??(a.locales={}),(v=a.locales)[d]??(v[d]={}),a.locales[d].name=j.target.value})}}),t.jsx(r.TextField,{label:g("type"),size:"small",select:!0,sx:{flex:1},value:e.type==="string"&&e.multiline?"multiline":e.type||"string",onChange:j=>{b(w=>{const a=w.properties[e.id].data;if(a.locales)for(const y of Object.keys(a.locales))a.locales[y].defaultValue=void 0;const v=j.target.value;v==="multiline"?(a.type="string",a.multiline=!0):(typeof a.multiline<"u"&&delete a.multiline,a.type=v)})},children:Lt.map(j=>t.jsx(r.MenuItem,{value:j.value,children:j.label},j.value))})]}),t.jsxs(r.Stack,{direction:"row",gap:1,children:[t.jsx(f,{allComponents:u,defaultLocale:m,component:l,property:e,label:g("defaultValue"),size:"small",fullWidth:!0,value:(p=(n=e.locales)==null?void 0:n[d])==null?void 0:p.defaultValue,onChange:(j,w)=>{b(a=>{var y;const v=a.properties[e.id].data;if(w!=null&&w.forceUpdateProperty){const S=le(v),C=le(j);Object.keys(C).forEach(h=>{S[h]||Te.default(v,h,C[h])})}else v.locales??(v.locales={}),(y=v.locales)[d]??(y[d]={}),v.locales[d].defaultValue=j})}}),e.type==="custom"?t.jsx(r.Box,{children:t.jsx(Yt,{property:e,allComponents:u})}):null]})]})})}function Ht(e,s){const[o,l]=P.useState(0);return P.useEffect(()=>{const m=setTimeout(()=>{if(e.current){let u=e.current.parentElement,b=0;for(;u;)u.classList.contains("property-container")&&b++,u=u.parentElement;l(b)}},100);return()=>clearTimeout(m)},[e,s]),o}function _e({config:e,currentLocale:s,defaultLocale:o,allComponents:l,onUpdateConfig:d,useI18nEditor:m=!0}){const{t:u}=_.useLocaleContext(),b=F.usePopupState({variant:"dialog"}),g=e.properties&&N.default(Object.values(e.properties),"index");return t.jsx(A.UploaderProvider,{children:t.jsxs(r.Stack,{gap:2,children:[t.jsxs(r.Stack,{direction:"row",gap:1,alignItems:"center",justifyContent:"space-between",children:[t.jsx(r.Typography,{variant:"subtitle1",children:u("properties")}),t.jsx(r.Box,{flex:1}),m&&t.jsx(r.Button,{sx:{minWidth:32,minHeight:32,p:0},...F.bindTrigger(b),children:t.jsx(z.TranslateRounded,{fontSize:"small"})})]}),e.properties&&Object.keys(e.properties).length>0?t.jsx(Be,{component:r.Stack,gap:2,list:e.properties,renderItem:(f,k,x)=>{const i=ie(e.properties,f.id);return t.jsx(r.Paper,{elevation:0,className:"property-container",sx:{p:1.25,borderRadius:1,border:i?"1px solid":"1px dashed",borderColor:"divider"},children:t.jsx(r.Stack,{gap:2,children:t.jsx(Re,{data:f,params:x,visible:i,config:e,currentLocale:s,defaultLocale:o,allComponents:l,onUpdateConfig:d})})},f.id)}}):t.jsx(G.default,{style:{fontSize:12},children:u("maker.properties.noProperties")}),t.jsx(r.Button,{fullWidth:!0,variant:"outlined",className:"ignore-style-override",onClick:()=>{d(f=>{var x;const k=B.nextId();f.properties??(f.properties={}),(x=f.properties)[k]??(x[k]={index:(g==null?void 0:g.length)||0,data:{id:k}})})},startIcon:t.jsx(z.AddRounded,{}),children:u("addObject",{object:u("property")})}),m&&t.jsx(De,{...F.bindDialog(b),component:e})]})})}function Yt({property:e,allComponents:s}){const o=F.usePopupState({variant:"popper"});return t.jsxs(t.Fragment,{children:[t.jsx(r.Button,{sx:{minWidth:0},...F.bindTrigger(o),children:t.jsx(z.SettingsRounded,{fontSize:"small"})}),t.jsx(r.Popper,{...F.bindPopper(o),children:t.jsx(Pe.ClickAwayListener,{onClickAway:o.close,children:t.jsx(r.Paper,{children:t.jsx(r.Box,{width:500,p:2,children:t.jsx(te,{value:e.componentId,onChange:(l,d)=>e.componentId=d,allComponents:s})})})})})]})}function Gt({value:e,valueImmutable:s,onChange:o,defaultLocale:l,allComponents:d}){var k;const[m,u]=P.useState(!1),{t:b,locale:g}=_.useLocaleContext(),f=typeof(e==null?void 0:e.componentId)=="string"?(k=d[e.componentId])==null?void 0:k.data:void 0;return f?t.jsxs(r.Box,{sx:{width:"100%",position:"relative"},children:[t.jsx(r.IconButton,{sx:{minWidth:0},disabled:!f,size:"small",onClick:()=>u(!m),color:m?"primary":"default",children:t.jsx(z.SettingsRounded,{fontSize:"small"})}),t.jsx(r.Collapse,{in:m,timeout:"auto",unmountOnExit:!0,sx:{width:"100%",zIndex:10},children:t.jsxs(r.Paper,{elevation:1,sx:{mt:1,p:2,borderRadius:1,border:"1px solid",borderColor:"divider",width:"100%"},children:[t.jsx(r.Box,{width:"100%",mb:2,children:t.jsx(ae,{config:f,currentLocale:g,defaultLocale:l,allComponents:d,propertiesValue:e==null?void 0:e.properties,onChange:({id:x,value:i})=>{const c=gt.default(i.value),n=JSON.parse(JSON.stringify(e));s?o==null||o({...n,properties:{...n.properties,[x]:{value:c}}}):(n.properties=n.properties??{},n.properties[x]={value:c},o==null||o(n))}})}),t.jsx(r.Button,{size:"small",onClick:()=>u(!1),sx:{mt:1},children:b("close")})]})})]}):null}function De({type:e="properties",component:s,...o}){var x,i,c;const{t:l}=_.useLocaleContext(),{state:{components:d,supportedLocales:m,config:{defaultLocale:u}}}=B.useStore(),b=B.useAllComponents(),g=Y.getYjsValue(s).doc,f=e==="properties"?s.properties:e==="parameters"&&((x=s.renderer)==null?void 0:x.type)==="component"?(i=d[s.renderer.componentId])==null?void 0:i.data.properties:void 0,k=((c=s.renderer)==null?void 0:c.type)==="component"?s:void 0;return t.jsxs(r.Dialog,{...o,fullWidth:!0,maxWidth:"lg",children:[t.jsx(r.DialogTitle,{children:l("i18nEditorTitle")}),t.jsx(r.DialogContent,{children:f&&t.jsx(r.Stack,{children:t.jsxs(r.Table,{stickyHeader:!0,sx:{td:{verticalAlign:"top"}},children:[t.jsx(r.TableHead,{children:t.jsx(r.TableRow,{children:m.map(({locale:n,name:p})=>t.jsxs(r.TableCell,{children:[p,u===n&&t.jsx(z.StarRounded,{sx:{fontSize:12,color:"text.secondary"}})]},n))})}),t.jsx(r.TableBody,{children:N.default(Object.values(f),"index").map(({data:n})=>t.jsx(r.TableRow,{children:m.map(({locale:p})=>{var j,w,a,v,y,S,C,h,I,T,R,E,V,q,Q,K,L,$,J,H,ue,de,pe,xe,me,fe;return t.jsx(r.TableCell,{children:t.jsx(r.Stack,{gap:1,children:e==="properties"?t.jsxs(t.Fragment,{children:[t.jsx(r.TextField,{size:"small",label:"Key",value:n.key||"",onChange:M=>{g.transact(()=>{n.key=M.target.value.trim()})}}),t.jsx(r.TextField,{size:"small",label:l("label"),value:(((w=(j=n.locales)==null?void 0:j[p])==null?void 0:w.name)??((v=(a=n.locales)==null?void 0:a[u])==null?void 0:v.name))||"",onChange:M=>{g.transact(()=>{var U;n.locales??(n.locales={}),(U=n.locales)[p]??(U[p]={}),n.locales[p].name=M.target.value})}}),t.jsx(r.Box,{children:t.jsx(W,{allComponents:b,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,label:"Default Value",valueImmutable:ee.default((S=(y=n.locales)==null?void 0:y[p])==null?void 0:S.defaultValue),value:((h=(C=n.locales)==null?void 0:C[p])==null?void 0:h.defaultValue)??((T=(I=n.locales)==null?void 0:I[u])==null?void 0:T.defaultValue),onChange:M=>{g.transact(()=>{var U;n.locales??(n.locales={}),(U=n.locales)[p]??(U[p]={}),n.locales[p].defaultValue=M})}})})]}):e==="parameters"&&k?t.jsx(r.Box,{children:t.jsx(W,{allComponents:b,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,valueImmutable:ee.default((q=(V=(E=(R=k.renderer.properties)==null?void 0:R[n.id])==null?void 0:E.locales)==null?void 0:V[p])==null?void 0:q.value),value:(($=(L=(K=(Q=k.renderer.properties)==null?void 0:Q[n.id])==null?void 0:K.locales)==null?void 0:L[p])==null?void 0:$.value)??((de=(ue=(H=(J=k.renderer.properties)==null?void 0:J[n.id])==null?void 0:H.locales)==null?void 0:ue[u])==null?void 0:de.value)??((xe=(pe=n.locales)==null?void 0:pe[p])==null?void 0:xe.defaultValue)??((fe=(me=n.locales)==null?void 0:me[u])==null?void 0:fe.defaultValue),onChange:M=>{g.transact(()=>{var U,he,be,je,ye;(U=k.renderer).properties??(U.properties={}),(he=k.renderer.properties)[be=n.id]??(he[be]={}),(je=k.renderer.properties[n.id]).locales??(je.locales={}),(ye=k.renderer.properties[n.id].locales)[p]??(ye[p]={}),k.renderer.properties[n.id].locales[p].value=M})}})}):null},n.id)},p)})},n.id))})]})})}),t.jsx(r.DialogActions,{children:t.jsx(r.Button,{onClick:n=>{var p;return(p=o.onClose)==null?void 0:p.call(o,n,"escapeKeyDown")},children:l("close")})})]})}const Ie=(e,s)=>o=>{const l=[o.palette.info.main,o.palette.primary.main,o.palette.secondary.main,o.palette.success.main,o.palette.warning.main],d=Math.min(l.length-1,e),m=l[d],u=ve.alpha(m,.5),b=ve.alpha(m,1);return{borderColor:`${u} !important`,borderLeft:"3px solid !important",borderLeftColor:u,color:b,...s}};function Qt({property:e,onChange:s,defaultLocale:o,allComponents:l}){const{t:d,locale:m}=_.useLocaleContext(),u=P.useRef(null),b=Ht(u,e),g=P.useCallback(()=>{if(!(e.type!=="json"&&e.type!=="yaml"&&e.type!=="array")&&e.subProperties)try{const f={};N.default(Object.values(e.subProperties),"index").filter(i=>i.data.visible!==!1&&i.data.key).forEach(({data:i})=>{var n,p,j,w;if(!i.key)return;let c=((p=(n=i.locales)==null?void 0:n[m])==null?void 0:p.defaultValue)??((w=(j=i.locales)==null?void 0:j[o])==null?void 0:w.defaultValue);if(i.type==="number")c=Number(c);else if(i.type==="boolean")c=c===!0||c==="true";else if((i.type==="json"||i.type==="yaml")&&typeof c=="string")try{i.type==="json"?c=JSON.parse(c):c=oe.parse(c)}catch(a){console.error("Error parsing nested value",c,a),c={}}f[i.key]=c});const x=B.transformValue(f,e.type);s==null||s(x)}catch(f){console.error("Error converting structure to text:",f)}},[e,m,o,s]);return e.type!=="json"&&e.type!=="yaml"&&e.type!=="array"?null:t.jsxs(r.Stack,{direction:"column",gap:1.5,sx:{width:"100%"},ref:u,children:[t.jsx(r.Divider,{sx:{mt:-1},children:t.jsx(r.Typography,{variant:"caption",color:"text.secondary",children:d("maker.properties.subProperties")})}),e.subProperties&&Object.keys(e.subProperties).length>0?t.jsx(Be,{component:r.Stack,gap:2,list:e.subProperties,renderItem:(f,k,x)=>{const i=f.visible!==!1;return t.jsx(r.Paper,{elevation:0,className:"property-container",sx:{p:1.25,borderRadius:1,border:i?"1px solid":"1px dashed","&":Ie(b)},children:t.jsx(r.Stack,{gap:2,children:t.jsx(Re,{data:f,params:x,visible:i,config:{properties:e.subProperties},currentLocale:m,defaultLocale:o,allComponents:l,onUpdateConfig:c=>{try{const n={properties:e.subProperties||{}};c(n);const p={...e,subProperties:n.properties};s==null||s(p,{forceUpdateProperty:!0}),g()}catch(n){console.error("Error updating property:",n)}}})})},f.id)}}):t.jsx(G.default,{style:{fontSize:12,height:100},children:d("maker.properties.noSubProperties")}),t.jsx(r.Button,{fullWidth:!0,variant:"outlined",className:"ignore-style-override",size:"small",startIcon:t.jsx(z.AddRounded,{}),onClick:()=>{try{const f=e.subProperties||{},k=B.nextId(),i={index:Object.values(f).length,data:{id:k,key:"",type:"string",visible:!0,locales:{[m]:{name:"",defaultValue:""}},subProperties:{}}},c={...e,subProperties:{...f,[k]:i}};s==null||s(c,{forceUpdateProperty:!0}),g()}catch(f){console.error("Error adding property:",f)}},sx:{"&":Ie(b,{})},children:d("maker.properties.addSubProperty")})]})}function W({component:e,property:s,value:o,onChange:l,valueImmutable:d,defaultLocale:m,allComponents:u,...b}){var c,n,p,j,w;const{locale:g}=_.useLocaleContext(),f=A.useUploader(),k=P.useRef(null),x=()=>{var v;const a=(v=f==null?void 0:f.current)==null?void 0:v.getUploader();a==null||a.open(),k.current&&a.onceUploadSuccess(({response:y})=>{var C,h;let S=((C=y==null?void 0:y.data)==null?void 0:C.filename)||"";S&&(S=`mediakit://${S}`,o&&!o.includes("mediakit://")&&(S+=" # please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address")),(h=k.current)==null||h.call(k,S)})},i=b.label??(((n=(c=s.locales)==null?void 0:c[g])==null?void 0:n.name)||((j=(p=s.locales)==null?void 0:p[m])==null?void 0:j.name)||s.key||s.id);if(s.type==="number")return t.jsx(Xt,{...b,label:i,NumberProps:{value:["number","string"].includes(typeof o)?o:null,onChange:(a,v)=>l==null?void 0:l(v)}});if(s.type==="decimal")return t.jsx(r.TextField,{...b,label:i,type:"text",value:o??"",onChange:a=>{const v=a.target.value;if(v===""||v==="-"){l==null||l(v);return}if(/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(v)){let S=v;/^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(S)&&(S=Number(S)),l==null||l(S)}}});if(s.type==="boolean")return t.jsx(r.FormControlLabel,{label:i,labelPlacement:"start",control:t.jsx(r.Switch,{checked:o===!0,onChange:(a,v)=>l==null?void 0:l(v)})});if(s.type==="color")return t.jsx(Vt,{label:i,value:o,onChange:a=>{l==null||l(a)}});if(s.type==="json"||s.type==="yaml")return t.jsx(qt,{label:i,value:o,onChange:a=>{l==null||l(a)},property:s,component:e,defaultLocale:m,allComponents:u,PropertyValueField:W,onUpload:a=>{k.current=a,x()}});if(s.type==="custom"){const a=(w=u[s.componentId])==null?void 0:w.data;return a?t.jsx(r.Box,{width:"100%",children:t.jsx(Z.CustomComponentRenderer,{componentId:a.id,props:{label:i,value:o,onChange:l},locale:g,dev:{mode:"draft",components:u,defaultLocale:m}})}):t.jsx(r.TextField,{...b,label:i,disabled:!0,placeholder:"Click right button select a component"})}if(s.type==="component")return t.jsxs(r.Stack,{width:"100%",direction:"column",gap:1,children:[t.jsx(te,{allComponents:u,label:i,value:o==null?void 0:o.componentId,onChange:(a,v)=>{d||!o?l==null||l({...o&&JSON.parse(JSON.stringify(o)),componentId:v}):typeof o=="object"&&(o.componentId=v,l==null||l({...o&&JSON.parse(JSON.stringify(o)),componentId:v}))}}),(o==null?void 0:o.componentId)&&t.jsx(Gt,{value:o,valueImmutable:d,onChange:l,defaultLocale:m,allComponents:u})]});if(!s.type||["string","url","multiline"].includes(s.type)){let a=s.type==="string"?s.multiline:void 0;s.type==="multiline"&&(a=!0);const v=s.type==="url"?o==null?void 0:o.url:o;return t.jsx(r.TextField,{...b,label:i,value:typeof v=="string"?v:"",multiline:a,minRows:a?2:void 0,maxRows:a?10:void 0,onChange:y=>l==null?void 0:l(s.type==="url"?{...o,url:y.target.value,mediaKitUrl:y.target.value}:y.target.value),InputProps:s.type==="url"?{sx:{pr:0},endAdornment:t.jsxs(r.InputAdornment,{position:"end",children:[t.jsx(A.UploaderButton,{onChange:async({response:y})=>{var I,T,R;const S=((I=y==null?void 0:y.data)==null?void 0:I.url)||((T=y==null?void 0:y.data)==null?void 0:T.fileUrl);let C;S&&(C=await A.getImageSize(S).catch(()=>A.getVideoSize(S)).catch(()=>{}));let h=((R=y==null?void 0:y.data)==null?void 0:R.filename)||"";h&&(h=`mediakit://${h}`),l==null||l({url:S,mediaKitUrl:h,width:C==null?void 0:C.naturalWidth,height:C==null?void 0:C.naturalHeight})}}),t.jsx(r.Tooltip,{title:"If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.",children:t.jsx(z.InfoRounded,{sx:{cursor:"default",mr:1},fontSize:"small"})})]})}:void 0})}return s.type==="array"?t.jsx(Rt,{label:i,value:Array.isArray(o)?o:[],onChange:a=>l==null?void 0:l(a),property:s,renderItem:({item:a,index:v,onChange:y})=>s.subProperties&&Object.keys(s.subProperties).length>0?t.jsx(r.Stack,{gap:1,width:"100%",children:N.default(Object.values(s.subProperties),"index").filter(S=>S.data.visible!==!1).map(({data:S})=>S.key?t.jsx(W,{component:e,property:S,value:a[S.key],onChange:C=>{const h={...a,[S.key]:C};y(h)},size:"small",fullWidth:!0,defaultLocale:m,allComponents:u},S.id):null)},v):t.jsx(r.TextField,{size:b.size,fullWidth:!0,value:a,onChange:S=>y(S.target.value)})}):(console.error("Unsupported property type",s.type),null)}function Xt({NumberProps:e,...s}){const{getInputProps:o}=Pe.unstable_useNumberInput(e),l=o();return t.jsx(r.TextField,{...s,inputProps:l})}const Ae=`import React from '@blocklet/pages-kit/builtin/react'
 import { Box } from '@blocklet/pages-kit/builtin/mui/material'
 
 export default function () {

package/lib/es/setting.js

@@ -1848,7 +1848,9 @@ function _({
           r.type === "url" ? { ...o, url: v.target.value, mediaKitUrl: v.target.value } : v.target.value
         ),
         InputProps: r.type === "url" ? {
-          sx: {},
+          sx: {
+            pr: 0
+          },
           endAdornment: /* @__PURE__ */ S(pe, { position: "end", children: [
             /* @__PURE__ */ t(
               Pe,
@@ -1869,7 +1871,7 @@ function _({
                 }
               }
             ),
-            /* @__PURE__ */ t(X, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ t(at, { sx: { cursor: "default" }, fontSize: "small" }) })
+            /* @__PURE__ */ t(X, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ t(at, { sx: { cursor: "default", mr: 1 }, fontSize: "small" }) })
           ] })
         } : void 0
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit-inner-components",
-  "version": "0.4.96",
+  "version": "0.4.97",
   "description": "Pages Kit inner components library",
   "publishConfig": {
     "access": "public"
@@ -202,8 +202,8 @@
     "yaml": "^2.5.0",
     "yjs": "^13.6.18",
     "zustand": "^4.5.5",
-    "@blocklet/pages-kit": "^0.4.96",
-    "@blocklet/pages-kit-block-studio": "^0.4.96"
+    "@blocklet/pages-kit-block-studio": "^0.4.97",
+    "@blocklet/pages-kit": "^0.4.97"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",