@mp-lb/mdkit 0.0.1-main.4.1 → 0.1.0-main.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/document/MdKitConflictPanel.js +4 -4
- package/dist/document/MdKitDocumentToolbar.js +3 -3
- package/dist/markdown/MarkdownBubbleMenu.d.ts +1 -1
- package/dist/markdown/MarkdownBubbleMenu.js +58 -8
- package/dist/markdown/MdKitEditor.js +1 -1
- package/dist/markdown/TiptapMarkdownSurface.js +5 -5
- package/dist/theme/MdKitThemeEditor.js +1 -1
- package/dist/theme/editorTheme.d.ts +1 -1
- package/dist/theme/editorTheme.js +15 -15
- package/dist/versioning/VersionHistoryPanel.js +2 -2
- package/docs/api.md +1 -1
- package/docs/shadcn.md +1 -1
- package/docs/styling.md +190 -71
- package/package.json +6 -2
- package/src/styles.css +271 -258
- package/dist/core/documentEngine.test.d.ts +0 -1
- package/dist/core/documentEngine.test.js +0 -119
- package/dist/document/useMdKitDocument.test.d.ts +0 -1
- package/dist/document/useMdKitDocument.test.js +0 -151
- package/dist/markdown/MdKitEditor.test.d.ts +0 -1
- package/dist/markdown/MdKitEditor.test.js +0 -126
- package/dist/markdown/normalizeMarkdownSerialization.test.d.ts +0 -1
- package/dist/markdown/normalizeMarkdownSerialization.test.js +0 -16
- package/dist/markdown/prepareMarkdownForEditorHydration.test.d.ts +0 -1
- package/dist/markdown/prepareMarkdownForEditorHydration.test.js +0 -13
- package/dist/markdown/preserveMarkdownWhitespace.test.d.ts +0 -1
- package/dist/markdown/preserveMarkdownWhitespace.test.js +0 -25
- package/dist/test/setup.d.ts +0 -1
- package/dist/test/setup.js +0 -13
- package/dist/versioning/useMdKitDocumentVersions.test.d.ts +0 -1
- package/dist/versioning/useMdKitDocumentVersions.test.js +0 -41
- package/docs/.vitepress/dist/404.html +0 -22
- package/docs/.vitepress/dist/api.html +0 -120
- package/docs/.vitepress/dist/architecture.html +0 -25
- package/docs/.vitepress/dist/assets/api.md.asncK3PQ.js +0 -96
- package/docs/.vitepress/dist/assets/api.md.asncK3PQ.lean.js +0 -1
- package/docs/.vitepress/dist/assets/app.BQvrHyG0.js +0 -1
- package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.js +0 -1
- package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.lean.js +0 -1
- package/docs/.vitepress/dist/assets/chunks/framework.RRduUuAx.js +0 -19
- package/docs/.vitepress/dist/assets/chunks/theme.CkCo6Nk1.js +0 -1
- package/docs/.vitepress/dist/assets/index.md.CITl-897.js +0 -137
- package/docs/.vitepress/dist/assets/index.md.CITl-897.lean.js +0 -1
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
- package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.js +0 -57
- package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.lean.js +0 -1
- package/docs/.vitepress/dist/assets/style.BtrGaL3i.css +0 -1
- package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.js +0 -91
- package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.lean.js +0 -1
- package/docs/.vitepress/dist/hashmap.json +0 -1
- package/docs/.vitepress/dist/index.html +0 -161
- package/docs/.vitepress/dist/shadcn.html +0 -81
- package/docs/.vitepress/dist/styling.html +0 -115
- package/docs/.vitepress/dist/vp-icons.css +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{d as p,c as u,r as c,n as T,o as s,a as j,t as N,b as _,w as h,T as ce,e as m,_ as b,u as He,i as Ae,f as Be,g as ue,h as g,j as v,k as i,l as z,m as se,p as S,q as F,s as Y,v as U,x as de,y as ve,z as Ce,A as Ee,F as x,B as H,C as W,D as Q,E as k,G as ge,H as C,I as $e,J as X,K as G,L as Z,M as Fe,N as ye,O as De,P as Pe,Q as Le,R as ee,S as Oe,U as Ve,V as Se,W as Ge,X as Ue,Y as je,Z as ze,$ as We}from"./framework.RRduUuAx.js";const qe=p({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(e){return(t,n)=>(s(),u("span",{class:T(["VPBadge",e.type])},[c(t.$slots,"default",{},()=>[j(N(e.text),1)])],2))}}),Ke={key:0,class:"VPBackdrop"},Re=p({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,n)=>(s(),_(ce,{name:"fade"},{default:h(()=>[e.show?(s(),u("div",Ke)):m("",!0)]),_:1}))}}),Je=b(Re,[["__scopeId","data-v-15092f9b"]]),P=He;function Ye(e,t){let n,a=!1;return()=>{n&&clearTimeout(n),a?n=setTimeout(e,t):(e(),(a=!0)&&setTimeout(()=>a=!1,t))}}function ie(e){return e.startsWith("/")?e:`/${e}`}function fe(e){const{pathname:t,search:n,hash:a,protocol:o}=new URL(e,"http://a.com");if(Ae(e)||e.startsWith("#")||!o.startsWith("http")||!Be(t))return e;const{site:r}=P(),l=t.endsWith("/")||t.endsWith(".html")?e:e.replace(/(?:(^\.+)\/)?.*$/,`$1${t.replace(/(\.md)?$/,r.value.cleanUrls?"":".html")}${n}${a}`);return ue(l)}function K({correspondingLink:e=!1}={}){const{site:t,localeIndex:n,page:a,theme:o,hash:r}=P(),l=g(()=>{var d,y;return{label:(d=t.value.locales[n.value])==null?void 0:d.label,link:((y=t.value.locales[n.value])==null?void 0:y.link)||(n.value==="root"?"/":`/${n.value}/`)}});return{localeLinks:g(()=>Object.entries(t.value.locales).flatMap(([d,y])=>l.value.label===y.label?[]:{text:y.label,link:Qe(y.link||(d==="root"?"/":`/${d}/`),o.value.i18nRouting!==!1&&e,a.value.relativePath.slice(l.value.link.length-1),!t.value.cleanUrls)+r.value})),currentLang:l}}function Qe(e,t,n,a){return t?e.replace(/\/$/,"")+ie(n.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,a?".html":"")):e}const Xe={class:"NotFound"},Ze={class:"code"},et={class:"title"},tt={class:"quote"},nt={class:"action"},at=["href","aria-label"],ot=p({__name:"NotFound",setup(e){const{theme:t}=P(),{currentLang:n}=K();return(a,o)=>{var r,l,f,d,y;return s(),u("div",Xe,[v("p",Ze,N(((r=i(t).notFound)==null?void 0:r.code)??"404"),1),v("h1",et,N(((l=i(t).notFound)==null?void 0:l.title)??"PAGE NOT FOUND"),1),o[0]||(o[0]=v("div",{class:"divider"},null,-1)),v("blockquote",tt,N(((f=i(t).notFound)==null?void 0:f.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),v("div",nt,[v("a",{class:"link",href:i(ue)(i(n).link),"aria-label":((d=i(t).notFound)==null?void 0:d.linkLabel)??"go to home"},N(((y=i(t).notFound)==null?void 0:y.linkText)??"Take me home"),9,at)])])}}}),st=b(ot,[["__scopeId","data-v-820147c2"]]);function Te(e,t){if(Array.isArray(e))return R(e);if(e==null)return[];t=ie(t);const n=Object.keys(e).sort((o,r)=>r.split("/").length-o.split("/").length).find(o=>t.startsWith(ie(o))),a=n?e[n]:[];return Array.isArray(a)?R(a):R(a.items,a.base)}function it(e){const t=[];let n=0;for(const a in e){const o=e[a];if(o.items){n=t.push(o);continue}t[n]||t.push({items:[]}),t[n].items.push(o)}return t}function rt(e){const t=[];function n(a){for(const o of a)o.text&&o.link&&t.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&n(o.items)}return n(e),t}function re(e,t){return Array.isArray(t)?t.some(n=>re(e,n)):z(e,t.link)?!0:t.items?re(e,t.items):!1}function R(e,t){return[...e].map(n=>{const a={...n},o=a.base||t;return o&&a.link&&(a.link=o+a.link),a.items&&(a.items=R(a.items,o)),a})}function D(){const{frontmatter:e,page:t,theme:n}=P(),a=se("(min-width: 960px)"),o=S(!1),r=g(()=>{const w=n.value.sidebar,A=t.value.relativePath;return w?Te(w,A):[]}),l=S(r.value);F(r,(w,A)=>{JSON.stringify(w)!==JSON.stringify(A)&&(l.value=r.value)});const f=g(()=>e.value.sidebar!==!1&&l.value.length>0&&e.value.layout!=="home"),d=g(()=>y?e.value.aside==null?n.value.aside==="left":e.value.aside==="left":!1),y=g(()=>e.value.layout==="home"?!1:e.value.aside!=null?!!e.value.aside:n.value.aside!==!1),L=g(()=>f.value&&a.value),$=g(()=>f.value?it(l.value):[]);function V(){o.value=!0}function M(){o.value=!1}function I(){o.value?M():V()}return{isOpen:o,sidebar:l,sidebarGroups:$,hasSidebar:f,hasAside:y,leftAside:d,isSidebarEnabled:L,open:V,close:M,toggle:I}}function lt(e,t){let n;Y(()=>{n=e.value?document.activeElement:void 0}),U(()=>{window.addEventListener("keyup",a)}),de(()=>{window.removeEventListener("keyup",a)});function a(o){o.key==="Escape"&&e.value&&(t(),n==null||n.focus())}}function ct(e){const{page:t,hash:n}=P(),a=S(!1),o=g(()=>e.value.collapsed!=null),r=g(()=>!!e.value.link),l=S(!1),f=()=>{l.value=z(t.value.relativePath,e.value.link)};F([t,e,n],f),U(f);const d=g(()=>l.value?!0:e.value.items?re(t.value.relativePath,e.value.items):!1),y=g(()=>!!(e.value.items&&e.value.items.length));Y(()=>{a.value=!!(o.value&&e.value.collapsed)}),ve(()=>{(l.value||d.value)&&(a.value=!1)});function L(){o.value&&(a.value=!a.value)}return{collapsed:a,collapsible:o,isLink:r,isActiveLink:l,hasActiveLink:d,hasChildren:y,toggle:L}}function ut(){const{hasSidebar:e}=D(),t=se("(min-width: 960px)"),n=se("(min-width: 1280px)");return{isAsideEnabled:g(()=>!n.value&&!t.value?!1:e.value?n.value:t.value)}}const dt=/\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/,le=[];function Ne(e){return typeof e.outline=="object"&&!Array.isArray(e.outline)&&e.outline.label||e.outlineTitle||"On this page"}function he(e){const t=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(n=>n.id&&n.hasChildNodes()).map(n=>{const a=Number(n.tagName[1]);return{element:n,title:vt(n),link:"#"+n.id,level:a}});return ft(t,e)}function vt(e){let t="";for(const n of e.childNodes)if(n.nodeType===1){if(dt.test(n.className))continue;t+=n.textContent}else n.nodeType===3&&(t+=n.textContent);return t.trim()}function ft(e,t){if(t===!1)return[];const n=(typeof t=="object"&&!Array.isArray(t)?t.level:t)||2,[a,o]=typeof n=="number"?[n,n]:n==="deep"?[2,6]:n;return pt(e,a,o)}function ht(e,t){const{isAsideEnabled:n}=ut(),a=Ye(r,100);let o=null;U(()=>{requestAnimationFrame(r),window.addEventListener("scroll",a)}),Ce(()=>{l(location.hash)}),de(()=>{window.removeEventListener("scroll",a)});function r(){if(!n.value)return;const f=window.scrollY,d=window.innerHeight,y=document.body.offsetHeight,L=Math.abs(f+d-y)<1,$=le.map(({element:M,link:I})=>({link:I,top:mt(M)})).filter(({top:M})=>!Number.isNaN(M)).sort((M,I)=>M.top-I.top);if(!$.length){l(null);return}if(f<1){l(null);return}if(L){l($[$.length-1].link);return}let V=null;for(const{link:M,top:I}of $){if(I>f+Ee()+4)break;V=M}l(V)}function l(f){o&&o.classList.remove("active"),f==null?o=null:o=e.value.querySelector(`a[href="${decodeURIComponent(f)}"]`);const d=o;d?(d.classList.add("active"),t.value.style.top=d.offsetTop+39+"px",t.value.style.opacity="1"):(t.value.style.top="33px",t.value.style.opacity="0")}}function mt(e){let t=0;for(;e!==document.body;){if(e===null)return NaN;t+=e.offsetTop,e=e.offsetParent}return t}function pt(e,t,n){le.length=0;const a=[],o=[];return e.forEach(r=>{const l={...r,children:[]};let f=o[o.length-1];for(;f&&f.level>=l.level;)o.pop(),f=o[o.length-1];if(l.element.classList.contains("ignore-header")||f&&"shouldIgnore"in f){o.push({level:l.level,shouldIgnore:!0});return}l.level>n||l.level<t||(le.push({element:l.element,link:l.link}),f?f.children.push(l):a.push(l),o.push(l))}),a}const kt=["href","title"],_t=p({__name:"VPDocOutlineItem",props:{headers:{},root:{type:Boolean}},setup(e){function t({target:n}){const a=n.href.split("#")[1],o=document.getElementById(decodeURIComponent(a));o==null||o.focus({preventScroll:!0})}return(n,a)=>{const o=W("VPDocOutlineItem",!0);return s(),u("ul",{class:T(["VPDocOutlineItem",e.root?"root":"nested"])},[(s(!0),u(x,null,H(e.headers,({children:r,link:l,title:f})=>(s(),u("li",null,[v("a",{class:"outline-link",href:l,onClick:t,title:f},N(f),9,kt),r!=null&&r.length?(s(),_(o,{key:0,headers:r},null,8,["headers"])):m("",!0)]))),256))],2)}}}),Me=b(_t,[["__scopeId","data-v-44b0cffc"]]),bt={class:"content"},gt={"aria-level":"2",class:"outline-title",id:"doc-outline-aria-label",role:"heading"},$t=p({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:n}=P(),a=ge([]);Q(()=>{a.value=he(t.value.outline??n.value.outline)});const o=S(),r=S();return ht(o,r),(l,f)=>(s(),u("nav",{"aria-labelledby":"doc-outline-aria-label",class:T(["VPDocAsideOutline",{"has-outline":a.value.length>0}]),ref_key:"container",ref:o},[v("div",bt,[v("div",{class:"outline-marker",ref_key:"marker",ref:r},null,512),v("div",gt,N(i(Ne)(i(n))),1),k(Me,{headers:a.value,root:!0},null,8,["headers"])])],2))}}),yt=b($t,[["__scopeId","data-v-8080a522"]]),Pt={class:"VPDocAsideCarbonAds"},Lt=p({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(e){const t=()=>null;return(n,a)=>(s(),u("div",Pt,[k(i(t),{"carbon-ads":e.carbonAds},null,8,["carbon-ads"])]))}}),Vt={class:"VPDocAside"},St=p({__name:"VPDocAside",setup(e){const{theme:t}=P();return(n,a)=>(s(),u("div",Vt,[c(n.$slots,"aside-top",{},void 0,!0),c(n.$slots,"aside-outline-before",{},void 0,!0),k(yt),c(n.$slots,"aside-outline-after",{},void 0,!0),a[0]||(a[0]=v("div",{class:"spacer"},null,-1)),c(n.$slots,"aside-ads-before",{},void 0,!0),i(t).carbonAds?(s(),_(Lt,{key:0,"carbon-ads":i(t).carbonAds},null,8,["carbon-ads"])):m("",!0),c(n.$slots,"aside-ads-after",{},void 0,!0),c(n.$slots,"aside-bottom",{},void 0,!0)]))}}),Tt=b(St,[["__scopeId","data-v-2fa565e8"]]);function Nt(){const{theme:e,page:t}=P();return g(()=>{const{text:n="Edit this page",pattern:a=""}=e.value.editLink||{};let o;return typeof a=="function"?o=a(t.value):o=a.replace(/:path/g,t.value.filePath),{url:o,text:n}})}function Mt(){const{page:e,theme:t,frontmatter:n}=P();return g(()=>{var y,L,$,V,M,I,w,A;const a=Te(t.value.sidebar,e.value.relativePath),o=rt(a),r=xt(o,B=>B.link.replace(/[?#].*$/,"")),l=r.findIndex(B=>z(e.value.relativePath,B.link)),f=((y=t.value.docFooter)==null?void 0:y.prev)===!1&&!n.value.prev||n.value.prev===!1,d=((L=t.value.docFooter)==null?void 0:L.next)===!1&&!n.value.next||n.value.next===!1;return{prev:f?void 0:{text:(typeof n.value.prev=="string"?n.value.prev:typeof n.value.prev=="object"?n.value.prev.text:void 0)??(($=r[l-1])==null?void 0:$.docFooterText)??((V=r[l-1])==null?void 0:V.text),link:(typeof n.value.prev=="object"?n.value.prev.link:void 0)??((M=r[l-1])==null?void 0:M.link)},next:d?void 0:{text:(typeof n.value.next=="string"?n.value.next:typeof n.value.next=="object"?n.value.next.text:void 0)??((I=r[l+1])==null?void 0:I.docFooterText)??((w=r[l+1])==null?void 0:w.text),link:(typeof n.value.next=="object"?n.value.next.link:void 0)??((A=r[l+1])==null?void 0:A.link)}}})}function xt(e,t){const n=new Set;return e.filter(a=>{const o=t(a);return n.has(o)?!1:n.add(o)})}const E=p({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(e){const t=e,n=g(()=>t.tag??(t.href?"a":"span")),a=g(()=>t.href&&$e.test(t.href)||t.target==="_blank");return(o,r)=>(s(),_(C(n.value),{class:T(["VPLink",{link:e.href,"vp-external-link-icon":a.value,"no-icon":e.noIcon}]),href:e.href?i(fe)(e.href):void 0,target:e.target??(a.value?"_blank":void 0),rel:e.rel??(a.value?"noreferrer":void 0)},{default:h(()=>[c(o.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),It={class:"VPLastUpdated"},wt=["datetime"],Ht=p({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:n,lang:a}=P(),o=g(()=>new Date(n.value.lastUpdated)),r=g(()=>o.value.toISOString()),l=S("");return U(()=>{Y(()=>{var f,d,y;l.value=new Intl.DateTimeFormat((d=(f=t.value.lastUpdated)==null?void 0:f.formatOptions)!=null&&d.forceLocale?a.value:void 0,((y=t.value.lastUpdated)==null?void 0:y.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(o.value)})}),(f,d)=>{var y;return s(),u("p",It,[j(N(((y=i(t).lastUpdated)==null?void 0:y.text)||i(t).lastUpdatedText||"Last updated")+": ",1),v("time",{datetime:r.value},N(l.value),9,wt)])}}}),At=b(Ht,[["__scopeId","data-v-18129a01"]]),Bt={key:0,class:"VPDocFooter"},Ct={key:0,class:"edit-info"},Et={key:0,class:"edit-link"},Ft={key:1,class:"last-updated"},Dt={key:1,class:"prev-next","aria-labelledby":"doc-footer-aria-label"},Ot={class:"pager"},Gt=["innerHTML"],Ut=["innerHTML"],jt={class:"pager"},zt=["innerHTML"],Wt=["innerHTML"],qt=p({__name:"VPDocFooter",setup(e){const{theme:t,page:n,frontmatter:a}=P(),o=Nt(),r=Mt(),l=g(()=>t.value.editLink&&a.value.editLink!==!1),f=g(()=>n.value.lastUpdated),d=g(()=>l.value||f.value||r.value.prev||r.value.next);return(y,L)=>{var $,V,M,I;return d.value?(s(),u("footer",Bt,[c(y.$slots,"doc-footer-before",{},void 0,!0),l.value||f.value?(s(),u("div",Ct,[l.value?(s(),u("div",Et,[k(E,{class:"edit-link-button",href:i(o).url,"no-icon":!0},{default:h(()=>[L[0]||(L[0]=v("span",{class:"vpi-square-pen edit-link-icon"},null,-1)),j(" "+N(i(o).text),1)]),_:1},8,["href"])])):m("",!0),f.value?(s(),u("div",Ft,[k(At)])):m("",!0)])):m("",!0),($=i(r).prev)!=null&&$.link||(V=i(r).next)!=null&&V.link?(s(),u("nav",Dt,[L[1]||(L[1]=v("span",{class:"visually-hidden",id:"doc-footer-aria-label"},"Pager",-1)),v("div",Ot,[(M=i(r).prev)!=null&&M.link?(s(),_(E,{key:0,class:"pager-link prev",href:i(r).prev.link},{default:h(()=>{var w;return[v("span",{class:"desc",innerHTML:((w=i(t).docFooter)==null?void 0:w.prev)||"Previous page"},null,8,Gt),v("span",{class:"title",innerHTML:i(r).prev.text},null,8,Ut)]}),_:1},8,["href"])):m("",!0)]),v("div",jt,[(I=i(r).next)!=null&&I.link?(s(),_(E,{key:0,class:"pager-link next",href:i(r).next.link},{default:h(()=>{var w;return[v("span",{class:"desc",innerHTML:((w=i(t).docFooter)==null?void 0:w.next)||"Next page"},null,8,zt),v("span",{class:"title",innerHTML:i(r).next.text},null,8,Wt)]}),_:1},8,["href"])):m("",!0)])])):m("",!0)])):m("",!0)}}}),Kt=b(qt,[["__scopeId","data-v-e2638793"]]),Rt={class:"container"},Jt={class:"aside-container"},Yt={class:"aside-content"},Qt={class:"content"},Xt={class:"content-container"},Zt={class:"main"},en=p({__name:"VPDoc",setup(e){const{theme:t}=P(),n=X(),{hasSidebar:a,hasAside:o,leftAside:r}=D(),l=g(()=>n.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(f,d)=>{const y=W("Content");return s(),u("div",{class:T(["VPDoc",{"has-sidebar":i(a),"has-aside":i(o)}])},[c(f.$slots,"doc-top",{},void 0,!0),v("div",Rt,[i(o)?(s(),u("div",{key:0,class:T(["aside",{"left-aside":i(r)}])},[d[0]||(d[0]=v("div",{class:"aside-curtain"},null,-1)),v("div",Jt,[v("div",Yt,[k(Tt,null,{"aside-top":h(()=>[c(f.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":h(()=>[c(f.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":h(()=>[c(f.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":h(()=>[c(f.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":h(()=>[c(f.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":h(()=>[c(f.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):m("",!0),v("div",Qt,[v("div",Xt,[c(f.$slots,"doc-before",{},void 0,!0),v("main",Zt,[k(y,{class:T(["vp-doc",[l.value,i(t).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),k(Kt,null,{"doc-footer-before":h(()=>[c(f.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),c(f.$slots,"doc-after",{},void 0,!0)])])]),c(f.$slots,"doc-bottom",{},void 0,!0)],2)}}}),tn=b(en,[["__scopeId","data-v-311cca79"]]),nn=p({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{},target:{},rel:{}},setup(e){const t=e,n=g(()=>t.href&&$e.test(t.href)),a=g(()=>t.tag||(t.href?"a":"button"));return(o,r)=>(s(),_(C(a.value),{class:T(["VPButton",[e.size,e.theme]]),href:e.href?i(fe)(e.href):void 0,target:t.target??(n.value?"_blank":void 0),rel:t.rel??(n.value?"noreferrer":void 0)},{default:h(()=>[j(N(e.text),1)]),_:1},8,["class","href","target","rel"]))}}),an=b(nn,[["__scopeId","data-v-3deef1a3"]]),on=["src","alt"],sn=p({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(e){return(t,n)=>{const a=W("VPImage",!0);return e.image?(s(),u(x,{key:0},[typeof e.image=="string"||"src"in e.image?(s(),u("img",G({key:0,class:"VPImage"},typeof e.image=="string"?t.$attrs:{...e.image,...t.$attrs},{src:i(ue)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,on)):(s(),u(x,{key:1},[k(a,G({class:"dark",image:e.image.dark,alt:e.image.alt},t.$attrs),null,16,["image","alt"]),k(a,G({class:"light",image:e.image.light,alt:e.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):m("",!0)}}}),J=b(sn,[["__scopeId","data-v-b3fc0c47"]]),rn={class:"container"},ln={class:"main"},cn={class:"heading"},un=["innerHTML"],dn=["innerHTML"],vn=["innerHTML"],fn={key:0,class:"actions"},hn={key:0,class:"image"},mn={class:"image-container"},pn=p({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(e){const t=Z("hero-image-slot-exists");return(n,a)=>(s(),u("div",{class:T(["VPHero",{"has-image":e.image||i(t)}])},[v("div",rn,[v("div",ln,[c(n.$slots,"home-hero-info-before",{},void 0,!0),c(n.$slots,"home-hero-info",{},()=>[v("h1",cn,[e.name?(s(),u("span",{key:0,innerHTML:e.name,class:"name clip"},null,8,un)):m("",!0),e.text?(s(),u("span",{key:1,innerHTML:e.text,class:"text"},null,8,dn)):m("",!0)]),e.tagline?(s(),u("p",{key:0,innerHTML:e.tagline,class:"tagline"},null,8,vn)):m("",!0)],!0),c(n.$slots,"home-hero-info-after",{},void 0,!0),e.actions?(s(),u("div",fn,[(s(!0),u(x,null,H(e.actions,o=>(s(),u("div",{key:o.link,class:"action"},[k(an,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link,target:o.target,rel:o.rel},null,8,["theme","text","href","target","rel"])]))),128))])):m("",!0),c(n.$slots,"home-hero-actions-after",{},void 0,!0)]),e.image||i(t)?(s(),u("div",hn,[v("div",mn,[a[0]||(a[0]=v("div",{class:"image-bg"},null,-1)),c(n.$slots,"home-hero-image",{},()=>[e.image?(s(),_(J,{key:0,class:"image-src",image:e.image},null,8,["image"])):m("",!0)],!0)])])):m("",!0)])],2))}}),kn=b(pn,[["__scopeId","data-v-f2cddd58"]]),_n=p({__name:"VPHomeHero",setup(e){const{frontmatter:t}=P();return(n,a)=>i(t).hero?(s(),_(kn,{key:0,class:"VPHomeHero",name:i(t).hero.name,text:i(t).hero.text,tagline:i(t).hero.tagline,image:i(t).hero.image,actions:i(t).hero.actions},{"home-hero-info-before":h(()=>[c(n.$slots,"home-hero-info-before")]),"home-hero-info":h(()=>[c(n.$slots,"home-hero-info")]),"home-hero-info-after":h(()=>[c(n.$slots,"home-hero-info-after")]),"home-hero-actions-after":h(()=>[c(n.$slots,"home-hero-actions-after")]),"home-hero-image":h(()=>[c(n.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):m("",!0)}}),bn={class:"box"},gn={key:0,class:"icon"},$n=["innerHTML"],yn=["innerHTML"],Pn=["innerHTML"],Ln={key:4,class:"link-text"},Vn={class:"link-text-value"},Sn=p({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(e){return(t,n)=>(s(),_(E,{class:"VPFeature",href:e.link,rel:e.rel,target:e.target,"no-icon":!0,tag:e.link?"a":"div"},{default:h(()=>[v("article",bn,[typeof e.icon=="object"&&e.icon.wrap?(s(),u("div",gn,[k(J,{image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])])):typeof e.icon=="object"?(s(),_(J,{key:1,image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])):e.icon?(s(),u("div",{key:2,class:"icon",innerHTML:e.icon},null,8,$n)):m("",!0),v("h2",{class:"title",innerHTML:e.title},null,8,yn),e.details?(s(),u("p",{key:3,class:"details",innerHTML:e.details},null,8,Pn)):m("",!0),e.linkText?(s(),u("div",Ln,[v("p",Vn,[j(N(e.linkText)+" ",1),n[0]||(n[0]=v("span",{class:"vpi-arrow-right link-text-icon"},null,-1))])])):m("",!0)])]),_:1},8,["href","rel","target","tag"]))}}),Tn=b(Sn,[["__scopeId","data-v-2ffedb34"]]),Nn={key:0,class:"VPFeatures"},Mn={class:"container"},xn={class:"items"},In=p({__name:"VPFeatures",props:{features:{}},setup(e){const t=e,n=g(()=>{const a=t.features.length;if(a){if(a===2)return"grid-2";if(a===3)return"grid-3";if(a%3===0)return"grid-6";if(a>3)return"grid-4"}else return});return(a,o)=>e.features?(s(),u("div",Nn,[v("div",Mn,[v("div",xn,[(s(!0),u(x,null,H(e.features,r=>(s(),u("div",{key:r.title,class:T(["item",[n.value]])},[k(Tn,{icon:r.icon,title:r.title,details:r.details,link:r.link,"link-text":r.linkText,rel:r.rel,target:r.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):m("",!0)}}),wn=b(In,[["__scopeId","data-v-21f25e81"]]),Hn=p({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=P();return(n,a)=>i(t).features?(s(),_(wn,{key:0,class:"VPHomeFeatures",features:i(t).features},null,8,["features"])):m("",!0)}}),An=p({__name:"VPHomeContent",setup(e){const{width:t}=Fe({initialWidth:0,includeScrollbar:!1});return(n,a)=>(s(),u("div",{class:"vp-doc container",style:ye(i(t)?{"--vp-offset":`calc(50% - ${i(t)/2}px)`}:{})},[c(n.$slots,"default",{},void 0,!0)],4))}}),Bn=b(An,[["__scopeId","data-v-7aec9e92"]]),Cn=p({__name:"VPHome",setup(e){const{frontmatter:t,theme:n}=P();return(a,o)=>{const r=W("Content");return s(),u("div",{class:T(["VPHome",{"external-link-icon-enabled":i(n).externalLinkIcon}])},[c(a.$slots,"home-hero-before",{},void 0,!0),k(_n,null,{"home-hero-info-before":h(()=>[c(a.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":h(()=>[c(a.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":h(()=>[c(a.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":h(()=>[c(a.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":h(()=>[c(a.$slots,"home-hero-image",{},void 0,!0)]),_:3}),c(a.$slots,"home-hero-after",{},void 0,!0),c(a.$slots,"home-features-before",{},void 0,!0),k(Hn),c(a.$slots,"home-features-after",{},void 0,!0),i(t).markdownStyles!==!1?(s(),_(Bn,{key:0},{default:h(()=>[k(r)]),_:1})):(s(),_(r,{key:1}))],2)}}}),En=b(Cn,[["__scopeId","data-v-7bb0be29"]]),Fn={},Dn={class:"VPPage"};function On(e,t){const n=W("Content");return s(),u("div",Dn,[c(e.$slots,"page-top"),k(n),c(e.$slots,"page-bottom")])}const Gn=b(Fn,[["render",On]]),Un=p({__name:"VPContent",setup(e){const{page:t,frontmatter:n}=P(),{hasSidebar:a}=D();return(o,r)=>(s(),u("div",{class:T(["VPContent",{"has-sidebar":i(a),"is-home":i(n).layout==="home"}]),id:"VPContent"},[i(t).isNotFound?c(o.$slots,"not-found",{key:0},()=>[k(st)],!0):i(n).layout==="page"?(s(),_(Gn,{key:1},{"page-top":h(()=>[c(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":h(()=>[c(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):i(n).layout==="home"?(s(),_(En,{key:2},{"home-hero-before":h(()=>[c(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":h(()=>[c(o.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":h(()=>[c(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":h(()=>[c(o.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":h(()=>[c(o.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":h(()=>[c(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":h(()=>[c(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":h(()=>[c(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":h(()=>[c(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):i(n).layout&&i(n).layout!=="doc"?(s(),_(C(i(n).layout),{key:3})):(s(),_(tn,{key:4},{"doc-top":h(()=>[c(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":h(()=>[c(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":h(()=>[c(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":h(()=>[c(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":h(()=>[c(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":h(()=>[c(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":h(()=>[c(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":h(()=>[c(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":h(()=>[c(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":h(()=>[c(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":h(()=>[c(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}}),jn=b(Un,[["__scopeId","data-v-6a1b1c35"]]),zn={class:"container"},Wn=["innerHTML"],qn=["innerHTML"],Kn=p({__name:"VPFooter",setup(e){const{theme:t,frontmatter:n}=P(),{hasSidebar:a}=D();return(o,r)=>i(t).footer&&i(n).footer!==!1?(s(),u("footer",{key:0,class:T(["VPFooter",{"has-sidebar":i(a)}])},[v("div",zn,[i(t).footer.message?(s(),u("p",{key:0,class:"message",innerHTML:i(t).footer.message},null,8,Wn)):m("",!0),i(t).footer.copyright?(s(),u("p",{key:1,class:"copyright",innerHTML:i(t).footer.copyright},null,8,qn)):m("",!0)])],2)):m("",!0)}}),Rn=b(Kn,[["__scopeId","data-v-14efd7c5"]]);function Jn(){const{theme:e,frontmatter:t}=P(),n=ge([]),a=g(()=>n.value.length>0);return Q(()=>{n.value=he(t.value.outline??e.value.outline)}),{headers:n,hasLocalNav:a}}const Yn={class:"menu-text"},Qn={class:"header"},Xn={class:"outline"},Zn=p({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(e){const t=e,{theme:n}=P(),a=S(!1),o=S(0),r=S(),l=S();function f($){var V;(V=r.value)!=null&&V.contains($.target)||(a.value=!1)}F(a,$=>{if($){document.addEventListener("click",f);return}document.removeEventListener("click",f)}),De("Escape",()=>{a.value=!1}),Q(()=>{a.value=!1});function d(){a.value=!a.value,o.value=window.innerHeight+Math.min(window.scrollY-t.navHeight,0)}function y($){$.target.classList.contains("outline-link")&&(l.value&&(l.value.style.transition="none"),Pe(()=>{a.value=!1}))}function L(){a.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return($,V)=>(s(),u("div",{class:"VPLocalNavOutlineDropdown",style:ye({"--vp-vh":o.value+"px"}),ref_key:"main",ref:r},[e.headers.length>0?(s(),u("button",{key:0,onClick:d,class:T({open:a.value})},[v("span",Yn,N(i(Ne)(i(n))),1),V[0]||(V[0]=v("span",{class:"vpi-chevron-right icon"},null,-1))],2)):(s(),u("button",{key:1,onClick:L},N(i(n).returnToTopLabel||"Return to top"),1)),k(ce,{name:"flyout"},{default:h(()=>[a.value?(s(),u("div",{key:0,ref_key:"items",ref:l,class:"items",onClick:y},[v("div",Qn,[v("a",{class:"top-link",href:"#",onClick:L},N(i(n).returnToTopLabel||"Return to top"),1)]),v("div",Xn,[k(Me,{headers:e.headers},null,8,["headers"])])],512)):m("",!0)]),_:1})],4))}}),ea=b(Zn,[["__scopeId","data-v-15ddd090"]]),ta={class:"container"},na=["aria-expanded"],aa={class:"menu-text"},oa=p({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{theme:t,frontmatter:n}=P(),{hasSidebar:a}=D(),{headers:o}=Jn(),{y:r}=Le(),l=S(0);U(()=>{l.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),Q(()=>{o.value=he(n.value.outline??t.value.outline)});const f=g(()=>o.value.length===0),d=g(()=>f.value&&!a.value),y=g(()=>({VPLocalNav:!0,"has-sidebar":a.value,empty:f.value,fixed:d.value}));return(L,$)=>i(n).layout!=="home"&&(!d.value||i(r)>=l.value)?(s(),u("div",{key:0,class:T(y.value)},[v("div",ta,[i(a)?(s(),u("button",{key:0,class:"menu","aria-expanded":e.open,"aria-controls":"VPSidebarNav",onClick:$[0]||($[0]=V=>L.$emit("open-menu"))},[$[1]||($[1]=v("span",{class:"vpi-align-left menu-icon"},null,-1)),v("span",aa,N(i(t).sidebarMenuLabel||"Menu"),1)],8,na)):m("",!0),k(ea,{headers:i(o),navHeight:l.value},null,8,["headers","navHeight"])])],2)):m("",!0)}}),sa=b(oa,[["__scopeId","data-v-f4bea7e4"]]);function ia(){const e=S(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function n(){e.value=!1,window.removeEventListener("resize",o)}function a(){e.value?n():t()}function o(){window.outerWidth>=768&&n()}const r=X();return F(()=>r.path,n),{isScreenOpen:e,openScreen:t,closeScreen:n,toggleScreen:a}}const ra={},la={class:"VPSwitch",type:"button",role:"switch"},ca={class:"check"},ua={key:0,class:"icon"};function da(e,t){return s(),u("button",la,[v("span",ca,[e.$slots.default?(s(),u("span",ua,[c(e.$slots,"default",{},void 0,!0)])):m("",!0)])])}const va=b(ra,[["render",da],["__scopeId","data-v-b8a6dba1"]]),fa=p({__name:"VPSwitchAppearance",setup(e){const{isDark:t,theme:n}=P(),a=Z("toggle-appearance",()=>{t.value=!t.value}),o=S("");return ve(()=>{o.value=t.value?n.value.lightModeSwitchTitle||"Switch to light theme":n.value.darkModeSwitchTitle||"Switch to dark theme"}),(r,l)=>(s(),_(va,{title:o.value,class:"VPSwitchAppearance","aria-checked":i(t),onClick:i(a)},{default:h(()=>[...l[0]||(l[0]=[v("span",{class:"vpi-sun sun"},null,-1),v("span",{class:"vpi-moon moon"},null,-1)])]),_:1},8,["title","aria-checked","onClick"]))}}),me=b(fa,[["__scopeId","data-v-4329f1c4"]]),ha={key:0,class:"VPNavBarAppearance"},ma=p({__name:"VPNavBarAppearance",setup(e){const{site:t}=P();return(n,a)=>i(t).appearance&&i(t).appearance!=="force-dark"&&i(t).appearance!=="force-auto"?(s(),u("div",ha,[k(me)])):m("",!0)}}),pa=b(ma,[["__scopeId","data-v-a01193e5"]]),pe=S();let xe=!1,oe=0;function ka(e){const t=S(!1);if(ee){!xe&&_a(),oe++;const n=F(pe,a=>{var o,r,l;a===e.el.value||(o=e.el.value)!=null&&o.contains(a)?(t.value=!0,(r=e.onFocus)==null||r.call(e)):(t.value=!1,(l=e.onBlur)==null||l.call(e))});de(()=>{n(),oe--,oe||ba()})}return Oe(t)}function _a(){document.addEventListener("focusin",Ie),xe=!0,pe.value=document.activeElement}function ba(){document.removeEventListener("focusin",Ie)}function Ie(){pe.value=document.activeElement}const ga={class:"VPMenuLink"},$a=["innerHTML"],ya=p({__name:"VPMenuLink",props:{item:{}},setup(e){const{page:t}=P();return(n,a)=>(s(),u("div",ga,[k(E,{class:T({active:i(z)(i(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,target:e.item.target,rel:e.item.rel,"no-icon":e.item.noIcon},{default:h(()=>[v("span",{innerHTML:e.item.text},null,8,$a)]),_:1},8,["class","href","target","rel","no-icon"])]))}}),te=b(ya,[["__scopeId","data-v-79fcbcf6"]]),Pa={class:"VPMenuGroup"},La={key:0,class:"title"},Va=p({__name:"VPMenuGroup",props:{text:{},items:{}},setup(e){return(t,n)=>(s(),u("div",Pa,[e.text?(s(),u("p",La,N(e.text),1)):m("",!0),(s(!0),u(x,null,H(e.items,a=>(s(),u(x,null,["link"in a?(s(),_(te,{key:0,item:a},null,8,["item"])):m("",!0)],64))),256))]))}}),Sa=b(Va,[["__scopeId","data-v-908bdf75"]]),Ta={class:"VPMenu"},Na={key:0,class:"items"},Ma=p({__name:"VPMenu",props:{items:{}},setup(e){return(t,n)=>(s(),u("div",Ta,[e.items?(s(),u("div",Na,[(s(!0),u(x,null,H(e.items,a=>(s(),u(x,{key:JSON.stringify(a)},["link"in a?(s(),_(te,{key:0,item:a},null,8,["item"])):"component"in a?(s(),_(C(a.component),G({key:1,ref_for:!0},a.props),null,16)):(s(),_(Sa,{key:2,text:a.text,items:a.items},null,8,["text","items"]))],64))),128))])):m("",!0),c(t.$slots,"default",{},void 0,!0)]))}}),xa=b(Ma,[["__scopeId","data-v-dbe48bad"]]),Ia=["aria-expanded","aria-label"],wa={key:0,class:"text"},Ha=["innerHTML"],Aa={key:1,class:"vpi-more-horizontal icon"},Ba={class:"menu"},Ca=p({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(e){const t=S(!1),n=S();ka({el:n,onBlur:a});function a(){t.value=!1}return(o,r)=>(s(),u("div",{class:"VPFlyout",ref_key:"el",ref:n,onMouseenter:r[1]||(r[1]=l=>t.value=!0),onMouseleave:r[2]||(r[2]=l=>t.value=!1)},[v("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":e.label,onClick:r[0]||(r[0]=l=>t.value=!t.value)},[e.button||e.icon?(s(),u("span",wa,[e.icon?(s(),u("span",{key:0,class:T([e.icon,"option-icon"])},null,2)):m("",!0),e.button?(s(),u("span",{key:1,innerHTML:e.button},null,8,Ha)):m("",!0),r[3]||(r[3]=v("span",{class:"vpi-chevron-down text-icon"},null,-1))])):(s(),u("span",Aa))],8,Ia),v("div",Ba,[k(xa,{items:e.items},{default:h(()=>[c(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}}),ke=b(Ca,[["__scopeId","data-v-a3183fa5"]]),Ea=["href","aria-label","innerHTML"],Fa=p({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(e){const t=e,n=S();U(async()=>{var r;await Pe();const o=(r=n.value)==null?void 0:r.children[0];o instanceof HTMLElement&&o.className.startsWith("vpi-social-")&&(getComputedStyle(o).maskImage||getComputedStyle(o).webkitMaskImage)==="none"&&o.style.setProperty("--icon",`url('https://api.iconify.design/simple-icons/${t.icon}.svg')`)});const a=g(()=>typeof t.icon=="object"?t.icon.svg:`<span class="vpi-social-${t.icon}"></span>`);return(o,r)=>(s(),u("a",{ref_key:"el",ref:n,class:"VPSocialLink no-icon",href:e.link,"aria-label":e.ariaLabel??(typeof e.icon=="string"?e.icon:""),target:"_blank",rel:"noopener",innerHTML:a.value},null,8,Ea))}}),Da=b(Fa,[["__scopeId","data-v-5a6aee0b"]]),Oa={class:"VPSocialLinks"},Ga=p({__name:"VPSocialLinks",props:{links:{}},setup(e){return(t,n)=>(s(),u("div",Oa,[(s(!0),u(x,null,H(e.links,({link:a,icon:o,ariaLabel:r})=>(s(),_(Da,{key:a,icon:o,link:a,ariaLabel:r},null,8,["icon","link","ariaLabel"]))),128))]))}}),_e=b(Ga,[["__scopeId","data-v-01120ffe"]]),Ua={key:0,class:"group translations"},ja={class:"trans-title"},za={key:1,class:"group"},Wa={class:"item appearance"},qa={class:"label"},Ka={class:"appearance-action"},Ra={key:2,class:"group"},Ja={class:"item social-links"},Ya=p({__name:"VPNavBarExtra",setup(e){const{site:t,theme:n}=P(),{localeLinks:a,currentLang:o}=K({correspondingLink:!0}),r=g(()=>a.value.length&&o.value.label||t.value.appearance||n.value.socialLinks);return(l,f)=>r.value?(s(),_(ke,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:h(()=>[i(a).length&&i(o).label?(s(),u("div",Ua,[v("p",ja,N(i(o).label),1),(s(!0),u(x,null,H(i(a),d=>(s(),_(te,{key:d.link,item:d},null,8,["item"]))),128))])):m("",!0),i(t).appearance&&i(t).appearance!=="force-dark"&&i(t).appearance!=="force-auto"?(s(),u("div",za,[v("div",Wa,[v("p",qa,N(i(n).darkModeSwitchLabel||"Appearance"),1),v("div",Ka,[k(me)])])])):m("",!0),i(n).socialLinks?(s(),u("div",Ra,[v("div",Ja,[k(_e,{class:"social-links-list",links:i(n).socialLinks},null,8,["links"])])])):m("",!0)]),_:1})):m("",!0)}}),Qa=b(Ya,[["__scopeId","data-v-c5dd4def"]]),Xa=["aria-expanded"],Za=p({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,n)=>(s(),u("button",{type:"button",class:T(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:n[0]||(n[0]=a=>t.$emit("click"))},[...n[1]||(n[1]=[v("span",{class:"container"},[v("span",{class:"top"}),v("span",{class:"middle"}),v("span",{class:"bottom"})],-1)])],10,Xa))}}),eo=b(Za,[["__scopeId","data-v-da8b7b90"]]),to=["innerHTML"],no=p({__name:"VPNavBarMenuLink",props:{item:{}},setup(e){const{page:t}=P();return(n,a)=>(s(),_(E,{class:T({VPNavBarMenuLink:!0,active:i(z)(i(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,target:e.item.target,rel:e.item.rel,"no-icon":e.item.noIcon,tabindex:"0"},{default:h(()=>[v("span",{innerHTML:e.item.text},null,8,to)]),_:1},8,["class","href","target","rel","no-icon"]))}}),ao=b(no,[["__scopeId","data-v-8ef452a0"]]),oo=p({__name:"VPNavBarMenuGroup",props:{item:{}},setup(e){const t=e,{page:n}=P(),a=r=>"component"in r?!1:"link"in r?z(n.value.relativePath,r.link,!!t.item.activeMatch):r.items.some(a),o=g(()=>a(t.item));return(r,l)=>(s(),_(ke,{class:T({VPNavBarMenuGroup:!0,active:i(z)(i(n).relativePath,e.item.activeMatch,!!e.item.activeMatch)||o.value}),button:e.item.text,items:e.item.items},null,8,["class","button","items"]))}}),so={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},io=p({__name:"VPNavBarMenu",setup(e){const{theme:t}=P();return(n,a)=>i(t).nav?(s(),u("nav",so,[a[0]||(a[0]=v("span",{id:"main-nav-aria-label",class:"visually-hidden"}," Main Navigation ",-1)),(s(!0),u(x,null,H(i(t).nav,o=>(s(),u(x,{key:JSON.stringify(o)},["link"in o?(s(),_(ao,{key:0,item:o},null,8,["item"])):"component"in o?(s(),_(C(o.component),G({key:1,ref_for:!0},o.props),null,16)):(s(),_(oo,{key:2,item:o},null,8,["item"]))],64))),128))])):m("",!0)}}),ro=b(io,[["__scopeId","data-v-5412324d"]]);function lo(e){const{localeIndex:t,theme:n}=P();function a(o){var I,w,A;const r=o.split("."),l=(I=n.value.search)==null?void 0:I.options,f=l&&typeof l=="object",d=f&&((A=(w=l.locales)==null?void 0:w[t.value])==null?void 0:A.translations)||null,y=f&&l.translations||null;let L=d,$=y,V=e;const M=r.pop();for(const B of r){let O=null;const q=V==null?void 0:V[B];q&&(O=V=q);const ne=$==null?void 0:$[B];ne&&(O=$=ne);const ae=L==null?void 0:L[B];ae&&(O=L=ae),q||(V=O),ne||($=O),ae||(L=O)}return(L==null?void 0:L[M])??($==null?void 0:$[M])??(V==null?void 0:V[M])??""}return a}const co=["aria-label"],uo={class:"DocSearch-Button-Container"},vo={class:"DocSearch-Button-Placeholder"},be=p({__name:"VPNavBarSearchButton",setup(e){const n=lo({button:{buttonText:"Search",buttonAriaLabel:"Search"}});return(a,o)=>(s(),u("button",{type:"button",class:"DocSearch DocSearch-Button","aria-label":i(n)("button.buttonAriaLabel")},[v("span",uo,[o[0]||(o[0]=v("span",{class:"vp-icon DocSearch-Search-Icon"},null,-1)),v("span",vo,N(i(n)("button.buttonText")),1)]),o[1]||(o[1]=v("span",{class:"DocSearch-Button-Keys"},[v("kbd",{class:"DocSearch-Button-Key"}),v("kbd",{class:"DocSearch-Button-Key"},"K")],-1))],8,co))}}),fo={class:"VPNavBarSearch"},ho={id:"local-search"},mo={key:1,id:"docsearch"},po=p({__name:"VPNavBarSearch",setup(e){const t=()=>null,n=()=>null,{theme:a}=P(),o=S(!1),r=S(!1);U(()=>{});function l(){o.value||(o.value=!0,setTimeout(f,16))}function f(){const L=new Event("keydown");L.key="k",L.metaKey=!0,window.dispatchEvent(L),setTimeout(()=>{document.querySelector(".DocSearch-Modal")||f()},16)}const d=S(!1),y="";return(L,$)=>{var V;return s(),u("div",fo,[i(y)==="local"?(s(),u(x,{key:0},[d.value?(s(),_(i(t),{key:0,onClose:$[0]||($[0]=M=>d.value=!1)})):m("",!0),v("div",ho,[k(be,{onClick:$[1]||($[1]=M=>d.value=!0)})])],64)):i(y)==="algolia"?(s(),u(x,{key:1},[o.value?(s(),_(i(n),{key:0,algolia:((V=i(a).search)==null?void 0:V.options)??i(a).algolia,onVnodeBeforeMount:$[2]||($[2]=M=>r.value=!0)},null,8,["algolia"])):m("",!0),r.value?m("",!0):(s(),u("div",mo,[k(be,{onClick:l})]))],64)):m("",!0)])}}}),ko=p({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=P();return(n,a)=>i(t).socialLinks?(s(),_(_e,{key:0,class:"VPNavBarSocialLinks",links:i(t).socialLinks},null,8,["links"])):m("",!0)}}),_o=b(ko,[["__scopeId","data-v-75a0fea7"]]),bo=["href","rel","target"],go=["innerHTML"],$o={key:2},yo=p({__name:"VPNavBarTitle",setup(e){const{site:t,theme:n}=P(),{hasSidebar:a}=D(),{currentLang:o}=K(),r=g(()=>{var d;return typeof n.value.logoLink=="string"?n.value.logoLink:(d=n.value.logoLink)==null?void 0:d.link}),l=g(()=>{var d;return typeof n.value.logoLink=="string"||(d=n.value.logoLink)==null?void 0:d.rel}),f=g(()=>{var d;return typeof n.value.logoLink=="string"||(d=n.value.logoLink)==null?void 0:d.target});return(d,y)=>(s(),u("div",{class:T(["VPNavBarTitle",{"has-sidebar":i(a)}])},[v("a",{class:"title",href:r.value??i(fe)(i(o).link),rel:l.value,target:f.value},[c(d.$slots,"nav-bar-title-before",{},void 0,!0),i(n).logo?(s(),_(J,{key:0,class:"logo",image:i(n).logo},null,8,["image"])):m("",!0),i(n).siteTitle?(s(),u("span",{key:1,innerHTML:i(n).siteTitle},null,8,go)):i(n).siteTitle===void 0?(s(),u("span",$o,N(i(t).title),1)):m("",!0),c(d.$slots,"nav-bar-title-after",{},void 0,!0)],8,bo)],2))}}),Po=b(yo,[["__scopeId","data-v-8a08158e"]]),Lo={class:"items"},Vo={class:"title"},So=p({__name:"VPNavBarTranslations",setup(e){const{theme:t}=P(),{localeLinks:n,currentLang:a}=K({correspondingLink:!0});return(o,r)=>i(n).length&&i(a).label?(s(),_(ke,{key:0,class:"VPNavBarTranslations",icon:"vpi-languages",label:i(t).langMenuLabel||"Change language"},{default:h(()=>[v("div",Lo,[v("p",Vo,N(i(a).label),1),(s(!0),u(x,null,H(i(n),l=>(s(),_(te,{key:l.link,item:l},null,8,["item"]))),128))])]),_:1},8,["label"])):m("",!0)}}),To=b(So,[["__scopeId","data-v-8df3e64c"]]),No={class:"wrapper"},Mo={class:"container"},xo={class:"title"},Io={class:"content"},wo={class:"content-body"},Ho=p({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const t=e,{y:n}=Le(),{hasSidebar:a}=D(),{frontmatter:o}=P(),r=S({});return ve(()=>{r.value={"has-sidebar":a.value,home:o.value.layout==="home",top:n.value===0,"screen-open":t.isScreenOpen}}),(l,f)=>(s(),u("div",{class:T(["VPNavBar",r.value])},[v("div",No,[v("div",Mo,[v("div",xo,[k(Po,null,{"nav-bar-title-before":h(()=>[c(l.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":h(()=>[c(l.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),v("div",Io,[v("div",wo,[c(l.$slots,"nav-bar-content-before",{},void 0,!0),k(po,{class:"search"}),k(ro,{class:"menu"}),k(To,{class:"translations"}),k(pa,{class:"appearance"}),k(_o,{class:"social-links"}),k(Qa,{class:"extra"}),c(l.$slots,"nav-bar-content-after",{},void 0,!0),k(eo,{class:"hamburger",active:e.isScreenOpen,onClick:f[0]||(f[0]=d=>l.$emit("toggle-screen"))},null,8,["active"])])])])]),f[1]||(f[1]=v("div",{class:"divider"},[v("div",{class:"divider-line"})],-1))],2))}}),Ao=b(Ho,[["__scopeId","data-v-77efa7eb"]]),Bo={key:0,class:"VPNavScreenAppearance"},Co={class:"text"},Eo=p({__name:"VPNavScreenAppearance",setup(e){const{site:t,theme:n}=P();return(a,o)=>i(t).appearance&&i(t).appearance!=="force-dark"&&i(t).appearance!=="force-auto"?(s(),u("div",Bo,[v("p",Co,N(i(n).darkModeSwitchLabel||"Appearance"),1),k(me)])):m("",!0)}}),Fo=b(Eo,[["__scopeId","data-v-935494a3"]]),Do=["innerHTML"],Oo=p({__name:"VPNavScreenMenuLink",props:{item:{}},setup(e){const t=Z("close-screen");return(n,a)=>(s(),_(E,{class:"VPNavScreenMenuLink",href:e.item.link,target:e.item.target,rel:e.item.rel,"no-icon":e.item.noIcon,onClick:i(t)},{default:h(()=>[v("span",{innerHTML:e.item.text},null,8,Do)]),_:1},8,["href","target","rel","no-icon","onClick"]))}}),Go=b(Oo,[["__scopeId","data-v-682703a0"]]),Uo=["innerHTML"],jo=p({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(e){const t=Z("close-screen");return(n,a)=>(s(),_(E,{class:"VPNavScreenMenuGroupLink",href:e.item.link,target:e.item.target,rel:e.item.rel,"no-icon":e.item.noIcon,onClick:i(t)},{default:h(()=>[v("span",{innerHTML:e.item.text},null,8,Uo)]),_:1},8,["href","target","rel","no-icon","onClick"]))}}),we=b(jo,[["__scopeId","data-v-46587101"]]),zo={class:"VPNavScreenMenuGroupSection"},Wo={key:0,class:"title"},qo=p({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(e){return(t,n)=>(s(),u("div",zo,[e.text?(s(),u("p",Wo,N(e.text),1)):m("",!0),(s(!0),u(x,null,H(e.items,a=>(s(),_(we,{key:a.text,item:a},null,8,["item"]))),128))]))}}),Ko=b(qo,[["__scopeId","data-v-636900b4"]]),Ro=["aria-controls","aria-expanded"],Jo=["innerHTML"],Yo=["id"],Qo={key:0,class:"item"},Xo={key:1,class:"item"},Zo={key:2,class:"group"},es=p({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(e){const t=e,n=S(!1),a=g(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){n.value=!n.value}return(r,l)=>(s(),u("div",{class:T(["VPNavScreenMenuGroup",{open:n.value}])},[v("button",{class:"button","aria-controls":a.value,"aria-expanded":n.value,onClick:o},[v("span",{class:"button-text",innerHTML:e.text},null,8,Jo),l[0]||(l[0]=v("span",{class:"vpi-plus button-icon"},null,-1))],8,Ro),v("div",{id:a.value,class:"items"},[(s(!0),u(x,null,H(e.items,f=>(s(),u(x,{key:JSON.stringify(f)},["link"in f?(s(),u("div",Qo,[k(we,{item:f},null,8,["item"])])):"component"in f?(s(),u("div",Xo,[(s(),_(C(f.component),G({ref_for:!0},f.props,{"screen-menu":""}),null,16))])):(s(),u("div",Zo,[k(Ko,{text:f.text,items:f.items},null,8,["text","items"])]))],64))),128))],8,Yo)],2))}}),ts=b(es,[["__scopeId","data-v-15946377"]]),ns={key:0,class:"VPNavScreenMenu"},as=p({__name:"VPNavScreenMenu",setup(e){const{theme:t}=P();return(n,a)=>i(t).nav?(s(),u("nav",ns,[(s(!0),u(x,null,H(i(t).nav,o=>(s(),u(x,{key:JSON.stringify(o)},["link"in o?(s(),_(Go,{key:0,item:o},null,8,["item"])):"component"in o?(s(),_(C(o.component),G({key:1,ref_for:!0},o.props,{"screen-menu":""}),null,16)):(s(),_(ts,{key:2,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):m("",!0)}}),os=p({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=P();return(n,a)=>i(t).socialLinks?(s(),_(_e,{key:0,class:"VPNavScreenSocialLinks",links:i(t).socialLinks},null,8,["links"])):m("",!0)}}),ss={class:"list"},is=p({__name:"VPNavScreenTranslations",setup(e){const{localeLinks:t,currentLang:n}=K({correspondingLink:!0}),a=S(!1);function o(){a.value=!a.value}return(r,l)=>i(t).length&&i(n).label?(s(),u("div",{key:0,class:T(["VPNavScreenTranslations",{open:a.value}])},[v("button",{class:"title",onClick:o},[l[0]||(l[0]=v("span",{class:"vpi-languages icon lang"},null,-1)),j(" "+N(i(n).label)+" ",1),l[1]||(l[1]=v("span",{class:"vpi-chevron-down icon chevron"},null,-1))]),v("ul",ss,[(s(!0),u(x,null,H(i(t),f=>(s(),u("li",{key:f.link,class:"item"},[k(E,{class:"link",href:f.link},{default:h(()=>[j(N(f.text),1)]),_:2},1032,["href"])]))),128))])],2)):m("",!0)}}),rs=b(is,[["__scopeId","data-v-12cc28a8"]]),ls={class:"container"},cs=p({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=S(null),n=Ve(ee?document.body:null);return(a,o)=>(s(),_(ce,{name:"fade",onEnter:o[0]||(o[0]=r=>n.value=!0),onAfterLeave:o[1]||(o[1]=r=>n.value=!1)},{default:h(()=>[e.open?(s(),u("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t,id:"VPNavScreen"},[v("div",ls,[c(a.$slots,"nav-screen-content-before",{},void 0,!0),k(as,{class:"menu"}),k(rs,{class:"translations"}),k(Fo,{class:"appearance"}),k(os,{class:"social-links"}),c(a.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):m("",!0)]),_:3}))}}),us=b(cs,[["__scopeId","data-v-cd013173"]]),ds={key:0,class:"VPNav"},vs=p({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:n,toggleScreen:a}=ia(),{frontmatter:o}=P(),r=g(()=>o.value.navbar!==!1);return Se("close-screen",n),Y(()=>{ee&&document.documentElement.classList.toggle("hide-nav",!r.value)}),(l,f)=>r.value?(s(),u("header",ds,[k(Ao,{"is-screen-open":i(t),onToggleScreen:i(a)},{"nav-bar-title-before":h(()=>[c(l.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":h(()=>[c(l.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":h(()=>[c(l.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":h(()=>[c(l.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),k(us,{open:i(t)},{"nav-screen-content-before":h(()=>[c(l.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":h(()=>[c(l.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):m("",!0)}}),fs=b(vs,[["__scopeId","data-v-acb86623"]]),hs=["role","tabindex"],ms={key:1,class:"items"},ps=p({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(e){const t=e,{collapsed:n,collapsible:a,isLink:o,isActiveLink:r,hasActiveLink:l,hasChildren:f,toggle:d}=ct(g(()=>t.item)),y=g(()=>f.value?"section":"div"),L=g(()=>o.value?"a":"div"),$=g(()=>f.value?t.depth+2===7?"p":`h${t.depth+2}`:"p"),V=g(()=>o.value?void 0:"button"),M=g(()=>[[`level-${t.depth}`],{collapsible:a.value},{collapsed:n.value},{"is-link":o.value},{"is-active":r.value},{"has-active":l.value}]);function I(A){"key"in A&&A.key!=="Enter"||!t.item.link&&d()}function w(){t.item.link&&d()}return(A,B)=>{const O=W("VPSidebarItem",!0);return s(),_(C(y.value),{class:T(["VPSidebarItem",M.value])},{default:h(()=>[e.item.text?(s(),u("div",G({key:0,class:"item",role:V.value},Ge(e.item.items?{click:I,keydown:I}:{},!0),{tabindex:e.item.items&&0}),[B[1]||(B[1]=v("div",{class:"indicator"},null,-1)),e.item.link?(s(),_(E,{key:0,tag:L.value,class:"link",href:e.item.link,rel:e.item.rel,target:e.item.target},{default:h(()=>[(s(),_(C($.value),{class:"text",innerHTML:e.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(s(),_(C($.value),{key:1,class:"text",innerHTML:e.item.text},null,8,["innerHTML"])),e.item.collapsed!=null&&e.item.items&&e.item.items.length?(s(),u("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:w,onKeydown:Ue(w,["enter"]),tabindex:"0"},[...B[0]||(B[0]=[v("span",{class:"vpi-chevron-right caret-icon"},null,-1)])],32)):m("",!0)],16,hs)):m("",!0),e.item.items&&e.item.items.length?(s(),u("div",ms,[e.depth<5?(s(!0),u(x,{key:0},H(e.item.items,q=>(s(),_(O,{key:q.text,item:q,depth:e.depth+1},null,8,["item","depth"]))),128)):m("",!0)])):m("",!0)]),_:1},8,["class"])}}}),ks=b(ps,[["__scopeId","data-v-be8e87ce"]]),_s=p({__name:"VPSidebarGroup",props:{items:{}},setup(e){const t=S(!0);let n=null;return U(()=>{n=setTimeout(()=>{n=null,t.value=!1},300)}),je(()=>{n!=null&&(clearTimeout(n),n=null)}),(a,o)=>(s(!0),u(x,null,H(e.items,r=>(s(),u("div",{key:r.text,class:T(["group",{"no-transition":t.value}])},[k(ks,{item:r,depth:0},null,8,["item"])],2))),128))}}),bs=b(_s,[["__scopeId","data-v-228ebfa9"]]),gs={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},$s=p({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const{sidebarGroups:t,hasSidebar:n}=D(),a=e,o=S(null),r=Ve(ee?document.body:null);F([a,o],()=>{var f;a.open?(r.value=!0,(f=o.value)==null||f.focus()):r.value=!1},{immediate:!0,flush:"post"});const l=S(0);return F(t,()=>{l.value+=1},{deep:!0}),(f,d)=>i(n)?(s(),u("aside",{key:0,class:T(["VPSidebar",{open:e.open}]),ref_key:"navEl",ref:o,onClick:d[0]||(d[0]=ze(()=>{},["stop"]))},[d[2]||(d[2]=v("div",{class:"curtain"},null,-1)),v("nav",gs,[d[1]||(d[1]=v("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),c(f.$slots,"sidebar-nav-before",{},void 0,!0),(s(),_(bs,{items:i(t),key:l.value},null,8,["items"])),c(f.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):m("",!0)}}),ys=b($s,[["__scopeId","data-v-e9f01ae8"]]),Ps=p({__name:"VPSkipLink",setup(e){const{theme:t}=P(),n=X(),a=S();F(()=>n.path,()=>a.value.focus());function o({target:r}){const l=document.getElementById(decodeURIComponent(r.hash).slice(1));if(l){const f=()=>{l.removeAttribute("tabindex"),l.removeEventListener("blur",f)};l.setAttribute("tabindex","-1"),l.addEventListener("blur",f),l.focus(),window.scrollTo(0,0)}}return(r,l)=>(s(),u(x,null,[v("span",{ref_key:"backToTop",ref:a,tabindex:"-1"},null,512),v("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:o},N(i(t).skipToContentLabel||"Skip to content"),1)],64))}}),Ls=b(Ps,[["__scopeId","data-v-db89ae83"]]),Vs=p({__name:"Layout",setup(e){const{isOpen:t,open:n,close:a}=D(),o=X();F(()=>o.path,a),lt(t,a);const{frontmatter:r}=P(),l=We(),f=g(()=>!!l["home-hero-image"]);return Se("hero-image-slot-exists",f),(d,y)=>{const L=W("Content");return i(r).layout!==!1?(s(),u("div",{key:0,class:T(["Layout",i(r).pageClass])},[c(d.$slots,"layout-top",{},void 0,!0),k(Ls),k(Je,{class:"backdrop",show:i(t),onClick:i(a)},null,8,["show","onClick"]),k(fs,null,{"nav-bar-title-before":h(()=>[c(d.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":h(()=>[c(d.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":h(()=>[c(d.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":h(()=>[c(d.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":h(()=>[c(d.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":h(()=>[c(d.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),k(sa,{open:i(t),onOpenMenu:i(n)},null,8,["open","onOpenMenu"]),k(ys,{open:i(t)},{"sidebar-nav-before":h(()=>[c(d.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":h(()=>[c(d.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),k(jn,null,{"page-top":h(()=>[c(d.$slots,"page-top",{},void 0,!0)]),"page-bottom":h(()=>[c(d.$slots,"page-bottom",{},void 0,!0)]),"not-found":h(()=>[c(d.$slots,"not-found",{},void 0,!0)]),"home-hero-before":h(()=>[c(d.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":h(()=>[c(d.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":h(()=>[c(d.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":h(()=>[c(d.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":h(()=>[c(d.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":h(()=>[c(d.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":h(()=>[c(d.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":h(()=>[c(d.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":h(()=>[c(d.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":h(()=>[c(d.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":h(()=>[c(d.$slots,"doc-before",{},void 0,!0)]),"doc-after":h(()=>[c(d.$slots,"doc-after",{},void 0,!0)]),"doc-top":h(()=>[c(d.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":h(()=>[c(d.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":h(()=>[c(d.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":h(()=>[c(d.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":h(()=>[c(d.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":h(()=>[c(d.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":h(()=>[c(d.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":h(()=>[c(d.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),k(Rn),c(d.$slots,"layout-bottom",{},void 0,!0)],2)):(s(),_(L,{key:1}))}}}),Ss=b(Vs,[["__scopeId","data-v-2b1fb0c9"]]),Ns={Layout:Ss,enhanceApp:({app:e})=>{e.component("Badge",qe)}};export{Ns as t};
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.RRduUuAx.js";const o=JSON.parse('{"title":"Quick Start","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),h={name:"index.md"};function l(p,s,k,e,r,E){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h1><p>Markdown Editor Kit is a React package for teams that need more than a bare markdown editor widget. It starts with a controlled markdown editor that behaves like a textarea, then adds autosave, version history, conflict handling, and collaboration through adapters.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @mp-lb/mdkit</span></span></code></pre></div><p>Import the stylesheet once if you want reset-resistant markdown defaults and generic fallback styling for the base panels:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/styles.css"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>See <a href="./styling">Styling</a> for reset handling, dark mode, fonts, sizing, and custom panel styles.</p><h2 id="basic-editor" tabindex="-1">Basic Editor <a class="header-anchor" href="#basic-editor" aria-label="Permalink to "Basic Editor""></a></h2><p><code>MdKitEditor</code> is the textarea-like entry point. It has no persistence, no version history, and no collaboration. You own the <code>value</code> and <code>onChange</code> state.</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "react"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MdKitEditor } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/styles.css"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
4
|
-
<span class="line"></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MarkdownEditorExample</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">markdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setMarkdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"# Hello markdown"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
7
|
-
<span class="line"></span>
|
|
8
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown} />;</span></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Use this when you want a local editor, a form field, or a debug surface.</p><h2 id="connected-editor" tabindex="-1">Connected Editor <a class="header-anchor" href="#connected-editor" aria-label="Permalink to "Connected Editor""></a></h2><p>The connected workflow combines:</p><ul><li><code>useMdKitDocument</code> for loading, autosave, dirty state, and conflict detection</li><li><code>useMdKitDocumentVersions</code> for version browsing and restore</li><li><code>useMdKitCollaboration</code> for Hocuspocus/Yjs collaboration</li><li><code>MdKitDocumentToolbar</code>, <code>VersionHistoryPanel</code>, and <code>MdKitConflictPanel</code> for a complete base-panel UI</li></ul><p>The TypeScript-first path is tRPC. REST is also supported for high-compatibility backends and non-TypeScript stacks.</p><h3 id="frontend-with-trpc" tabindex="-1">Frontend With tRPC <a class="header-anchor" href="#frontend-with-trpc" aria-label="Permalink to "Frontend With tRPC""></a></h3><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useMemo, useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "react"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitConflictPanel,</span></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitDocumentToolbar,</span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitEditor,</span></span>
|
|
14
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> VersionHistoryPanel,</span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitCollaboration,</span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocument,</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocumentVersions,</span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitDocumentVersionDetail,</span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
21
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcAdapter,</span></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcClient,</span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/trpc/client"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
24
|
-
<span class="line"></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> documentId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "docs/example.md"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
26
|
-
<span class="line"></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ConnectedMarkdownEditor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> apiUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> apiUrl</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}) {</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">versionHistoryOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setVersionHistoryOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">conflictOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setConflictOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
34
|
-
<span class="line"></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> trpc</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcClient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">apiUrl</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/trpc\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [apiUrl],</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
39
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> adapter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcAdapter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ client: trpc }), [trpc]);</span></span>
|
|
40
|
-
<span class="line"></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocument</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocumentVersions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
43
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitCollaboration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collaborator: { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"user-1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Ada"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
46
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> endpoint: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">apiUrl</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">http</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ws"</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/collaboration\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
48
|
-
<span class="line"></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> restoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">version</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MdKitDocumentVersionDetail</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> trpc.restoreDocumentVersion.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mutate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versionId: version.id,</span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
54
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versions.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">refresh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
57
|
-
<span class="line"></span>
|
|
58
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
59
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span>
|
|
60
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitDocumentToolbar</span></span>
|
|
61
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
62
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document}</span></span>
|
|
63
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{versions}</span></span>
|
|
64
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onOpenConflict</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setConflictOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)}</span></span>
|
|
65
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onOpenVersionHistory</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setVersionHistoryOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)}</span></span>
|
|
66
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
67
|
-
<span class="line"></span>
|
|
68
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
|
|
69
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
70
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fillHeight</span></span>
|
|
71
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readOnly</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.conflict}</span></span>
|
|
72
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.value}</span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.setContent}</span></span>
|
|
74
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onFocusChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.setFocused}</span></span>
|
|
75
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
76
|
-
<span class="line"></span>
|
|
77
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {versionHistoryOpen </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
78
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dialog"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Version history"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
79
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VersionHistoryPanel</span></span>
|
|
80
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controller</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{versions}</span></span>
|
|
81
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRestoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{restoreVersion}</span></span>
|
|
82
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
83
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
84
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
85
|
-
<span class="line"></span>
|
|
86
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {document.conflict </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> conflictOpen </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
87
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dialog"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Resolve conflict"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
88
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitConflictPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document} /></span></span>
|
|
89
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
90
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
91
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span>
|
|
92
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
93
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The modal shells above are intentionally plain. Put <code>VersionHistoryPanel</code> and <code>MdKitConflictPanel</code> inside your own dialog, drawer, side panel, or editor replacement view. If your app uses shadcn/ui, see <a href="./shadcn">Shadcn Plugin</a> for the source-installed workflow component.</p><h3 id="backend-with-fastify-and-trpc" tabindex="-1">Backend With Fastify And tRPC <a class="header-anchor" href="#backend-with-fastify-and-trpc" aria-label="Permalink to "Backend With Fastify And tRPC""></a></h3><p>The backend only needs a store object. Replace <code>createYourDocumentStore()</code> with Postgres, MongoDB, Redis, files, or any other durable storage.</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> cors </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@fastify/cors"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
94
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> websocket </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@fastify/websocket"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
95
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Database } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@hocuspocus/extension-database"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
96
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Server } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@hocuspocus/server"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
97
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { fastifyTRPCPlugin } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@trpc/server/adapters/fastify"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
98
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Fastify </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "fastify"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
99
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createMdKitTrpcRouter } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/trpc/server"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
100
|
-
<span class="line"></span>
|
|
101
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Fastify</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
102
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> store</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createYourDocumentStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
103
|
-
<span class="line"></span>
|
|
104
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Server.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">configure</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
105
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extensions: [</span></span>
|
|
106
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Database</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
107
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">documentName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readCollaborationState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(documentName),</span></span>
|
|
108
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> store</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">documentName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span></span>
|
|
109
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">writeCollaborationState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(documentName, state),</span></span>
|
|
110
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
|
111
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
112
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
113
|
-
<span class="line"></span>
|
|
114
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(cors, { origin: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
115
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(websocket);</span></span>
|
|
116
|
-
<span class="line"></span>
|
|
117
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(fastifyTRPCPlugin, {</span></span>
|
|
118
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/trpc"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
119
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> trpcOptions: {</span></span>
|
|
120
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createMdKitTrpcRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(store),</span></span>
|
|
121
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
122
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
123
|
-
<span class="line"></span>
|
|
124
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/collaboration"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { websocket: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">socket</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
125
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collaboration.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">handleConnection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(socket, request.raw, {});</span></span>
|
|
126
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
127
|
-
<span class="line"></span>
|
|
128
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ port: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(process.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">PORT</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ??</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 4312</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) });</span></span></code></pre></div><p>The store object implements <code>MdKitTransportStore</code>: current document reads and writes, version list/read/restore, and optional collaboration state storage. See <a href="./api#transport-helpers">API Reference</a>.</p><h3 id="rest-compatibility" tabindex="-1">REST Compatibility <a class="header-anchor" href="#rest-compatibility" aria-label="Permalink to "REST Compatibility""></a></h3><p>If you want REST instead of tRPC, use the REST frontend adapter:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createMdKitRestAdapter } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
129
|
-
<span class="line"></span>
|
|
130
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> adapter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitRestAdapter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
131
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> baseUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://api.example.com/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
132
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>On Fastify, register the matching REST endpoints:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { registerMdKitFastify } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/fastify"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
133
|
-
<span class="line"></span>
|
|
134
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> registerMdKitFastify</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app, {</span></span>
|
|
135
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
136
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store,</span></span>
|
|
137
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>The mdkit testbench uses this split deliberately: <code>Connected (panels)</code> uses the REST adapter, while <code>Connected (shadcn)</code> uses the tRPC adapter.</p><h2 id="questions" tabindex="-1">Questions <a class="header-anchor" href="#questions" aria-label="Permalink to "Questions""></a></h2><h3 id="do-the-backends-need-to-know-about-each-other" tabindex="-1">Do the backends need to know about each other? <a class="header-anchor" href="#do-the-backends-need-to-know-about-each-other" aria-label="Permalink to "Do the backends need to know about each other?""></a></h3><p>Storage, version history, and collaboration can stay separate. Storage stores the current markdown snapshot. Version history stores markdown snapshots. Hocuspocus stores live Yjs collaboration state. They only need glue if your product wants collaborative edits to automatically become saved markdown versions.</p><h3 id="does-mdkit-require-trpc-or-these-exact-rest-endpoints" tabindex="-1">Does mdkit require tRPC or these exact REST endpoints? <a class="header-anchor" href="#does-mdkit-require-trpc-or-these-exact-rest-endpoints" aria-label="Permalink to "Does mdkit require tRPC or these exact REST endpoints?""></a></h3><p>No. The frontend hooks only need an <code>MdKitDocumentAdapter</code>. You can use REST, tRPC, GraphQL, server actions, IndexedDB, Rails, Go, or anything else as long as your adapter returns the documented shapes.</p><h3 id="do-i-have-to-use-the-base-panels" tabindex="-1">Do I have to use the base panels? <a class="header-anchor" href="#do-i-have-to-use-the-base-panels" aria-label="Permalink to "Do I have to use the base panels?""></a></h3><p>No. The base panels are the fastest way to get a complete workflow working in any React app. If you want a fully custom UI, use <code>useMdKitDocument</code>, <code>useMdKitDocumentVersions</code>, and <code>useMdKitCollaboration</code> directly and render your own controls.</p>`,34)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.RRduUuAx.js";const o=JSON.parse('{"title":"Quick Start","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),h={name:"index.md"};function l(p,s,k,e,r,E){return a(),n("div",null,[...s[0]||(s[0]=[t("",34)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.RRduUuAx.js";const E=JSON.parse('{"title":"Shadcn Plugin","description":"","frontmatter":{},"headers":[],"relativePath":"shadcn.md","filePath":"shadcn.md"}'),l={name:"shadcn.md"};function e(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="shadcn-plugin" tabindex="-1">Shadcn Plugin <a class="header-anchor" href="#shadcn-plugin" aria-label="Permalink to "Shadcn Plugin""></a></h1><p>The core npm package is design-system agnostic. It exports the editor, hooks, base panels, types, and generic CSS. It does not export shadcn components at runtime.</p><p>The shadcn path should be a registry/plugin item. Installing it copies editable source into your app, and that source imports your app's own shadcn primitives:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Button } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/button"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Badge } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/badge"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Dialog,</span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DialogContent,</span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DialogHeader,</span></span>
|
|
7
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DialogTitle,</span></span>
|
|
8
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/dialog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Tabs, TabsContent, TabsList, TabsTrigger } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/tabs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Textarea } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/textarea"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>That means the workflow component can own polished app UI: toolbar, version history dialog, conflict dialog, tabs, buttons, and layout. The underlying state still comes from the mdkit hooks. The recommended transport for this path is the tRPC adapter from <code>@mp-lb/mdkit/trpc/client</code>.</p><h2 id="intended-shape" tabindex="-1">Intended Shape <a class="header-anchor" href="#intended-shape" aria-label="Permalink to "Intended Shape""></a></h2><p>The installed component should be one app-local workflow component that you render next to <code>MdKitEditor</code>.</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitEditor,</span></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitCollaboration,</span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocument,</span></span>
|
|
14
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocumentVersions,</span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcAdapter,</span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcClient,</span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/trpc/client"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MdKitConnectedWorkflow } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/mdkit/mdkit-connected-workflow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
21
|
-
<span class="line"></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> EditorScreen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> client</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcClient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/trpc"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> adapter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcAdapter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ client });</span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocument</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocumentVersions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitCollaboration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collaborator,</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> endpoint: hocuspocusEndpoint,</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> restoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">version</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> client.restoreDocumentVersion.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mutate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versionId: version.id,</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versions.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">refresh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
39
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
40
|
-
<span class="line"></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitConnectedWorkflow</span></span>
|
|
43
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document}</span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{versions}</span></span>
|
|
46
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRestoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{restoreVersion}</span></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readOnly</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.conflict}</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.value}</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.setContent}</span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onFocusChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.setFocused}</span></span>
|
|
54
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitConnectedWorkflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
57
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The shadcn component is deliberately source-installed instead of imported from the npm package. That is how shadcn is designed to work: the code lives in your app, uses your aliases, and can be edited like any other local component.</p><h2 id="why-not-a-runtime-export" tabindex="-1">Why Not A Runtime Export? <a class="header-anchor" href="#why-not-a-runtime-export" aria-label="Permalink to "Why Not A Runtime Export?""></a></h2><p>mdkit should not:</p><ul><li>bundle copies of shadcn primitives</li><li>depend on shadcn as a package</li><li>ask you to pass a map of local <code>Button</code>, <code>Dialog</code>, or <code>Tabs</code> components into mdkit</li><li>ship Tailwind-only wrappers from the npm package and hope your build scans external package source</li></ul><p>The npm package stays focused on the durable logic. The registry item owns the app-local shadcn composition.</p><h2 id="fallback-path" tabindex="-1">Fallback Path <a class="header-anchor" href="#fallback-path" aria-label="Permalink to "Fallback Path""></a></h2><p>If you do not use shadcn, use the base panels from the npm package:</p><ul><li><code>MdKitDocumentToolbar</code></li><li><code>VersionHistoryPanel</code></li><li><code>MdKitConflictPanel</code></li></ul><p>They render plain semantic HTML with stable <code>mdkit-*</code> classes. Import <code>@mp-lb/mdkit/styles.css</code> for generic fallback styling, or replace the CSS entirely. See <a href="./styling#component-styling">Styling</a>.</p><h2 id="status" tabindex="-1">Status <a class="header-anchor" href="#status" aria-label="Permalink to "Status""></a></h2><p>The mdkit testbench currently contains the reference shadcn workflow component. It is the target shape for the future registry/plugin item. Until that registry item exists, treat the base panels as the supported published path.</p>`,19)])])}const c=i(l,[["render",e]]);export{E as __pageData,c as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.RRduUuAx.js";const E=JSON.parse('{"title":"Shadcn Plugin","description":"","frontmatter":{},"headers":[],"relativePath":"shadcn.md","filePath":"shadcn.md"}'),l={name:"shadcn.md"};function e(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t("",19)])])}const c=i(l,[["render",e]]);export{E as __pageData,c as default};
|