@blocklet/pages-kit-inner-components 0.4.33 → 0.4.34

package/lib/cjs/setting.js

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

@@ -527,7 +527,7 @@ function jr({
   ] });
 }
 function ft(e, r) {
-  return r === "yaml" ? ae.parse(e) : r === "json" ? JSON.parse(JSON.stringify(e)) : e;
+  return r === "yaml" ? ae.stringify(e, { indent: 2 }) : r === "json" ? JSON.parse(JSON.stringify(e)) : e;
 }
 function zr({
   label: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit-inner-components",
-  "version": "0.4.33",
+  "version": "0.4.34",
   "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.33",
-    "@blocklet/pages-kit-block-studio": "^0.4.33"
+    "@blocklet/pages-kit": "^0.4.34",
+    "@blocklet/pages-kit-block-studio": "^0.4.34"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",