@dimi-agent/cli 0.4.3 → 0.5.0

package/dist-web/assets/{CodeBlockNode-BL_lWHk1.js → CodeBlockNode-BaWzfCy0.js}

@@ -1,4 +1,4 @@
-import{bR as wi,cb as bi,bQ as Lo,M as cl,bl as ki,af as ul,bY as xi,cc as Si,b$ as fl,aU as $,c0 as Ci,c1 as Mi,c2 as Bi,a0 as ko,aD as $o,bE as ae,az as Ei,cd as hn,c8 as vt,aI as Oo,aL as G,s as bn,aw as It,au as mt,bk as V,ce as xo,u as oe,I as zo,A as Fi,bJ as Ut,aY as pt,bL as sl,v as b,t as ye,bB as dl,bb as Me,q as k,b7 as Pi,cf as Li,cg as gn,ch as $i,ci as Oi,cj as zi,ck as Hi,as as j,cl as So,cm as Ni,cn as Ti,co as jt,cp as Co,bO as Ho,T as Ri,G as Di,F as Mo,g as Ai,c7 as ji,b_ as qi}from"./index-DKIJmNQn.js";import{i as fe,t as yn}from"./safeRaf-DGuzXxDK.js";var wn=(x,M,w)=>new Promise((te,ne)=>{var we=E=>{try{r(w.next(E))}catch(z){ne(z)}},be=E=>{try{r(w.throw(E))}catch(z){ne(z)}},r=E=>E.done?te(E.value):Promise.resolve(E.value).then(we,be);r((w=w.apply(x,M)).next())});let Bo=!1,qt=null,Wt=null,_t=null;function Wi(){return wn(this,null,function*(){if(_t)return _t;_t=wn(null,null,function*(){if(!Wt)try{if(Wt=(function(x){const M=x;if(typeof M?.useMonaco=="function")return M;const w=x?.default;return typeof w?.useMonaco=="function"?w:null})(yield wi(()=>import("./__vite-optional-peer-dep_stream-diffs_markstream-vue-BIHI7g3E.js"),[])),!Wt)return null}catch{return null}try{return yield(function(x){return wn(this,null,function*(){return Bo?void 0:qt||(qt=wn(null,null,function*(){const w=globalThis?.MonacoEnvironment;w&&(typeof w.getWorker=="function"||typeof w.getWorkerUrl=="function")||typeof x?.preloadMonacoWorkers!="function"||(yield x.preloadMonacoWorkers()),Bo=!0}).finally(()=>{qt=null}),qt)})})(Wt),bi(),Wt}catch{return null}});try{return yield _t}finally{_t=null}})}var _i=Object.defineProperty,Ii=Object.defineProperties,Ui=Object.getOwnPropertyDescriptors,Eo=Object.getOwnPropertySymbols,Vi=Object.prototype.hasOwnProperty,Gi=Object.prototype.propertyIsEnumerable,Fo=(x,M,w)=>M in x?_i(x,M,{enumerable:!0,configurable:!0,writable:!0,value:w}):x[M]=w,I=(x,M)=>{for(var w in M||(M={}))Vi.call(M,w)&&Fo(x,w,M[w]);if(Eo)for(var w of Eo(M))Gi.call(M,w)&&Fo(x,w,M[w]);return x},Ce=(x,M)=>Ii(x,Ui(M)),q=(x,M,w)=>new Promise((te,ne)=>{var we=E=>{try{r(w.next(E))}catch(z){ne(z)}},be=E=>{try{r(w.throw(E))}catch(z){ne(z)}},r=E=>E.done?te(E.value):Promise.resolve(E.value).then(we,be);r((w=w.apply(x,M)).next())});const Ji={key:0,class:"code-block-header flex justify-between items-center border-b px-[var(--ms-inset-panel-x)] py-[var(--ms-inset-panel-y)] border-[var(--code-border)] bg-[var(--code-header-bg)] text-[var(--code-fg)]"},Yi={class:"flex items-center gap-0.5"},Qi=["aria-label"],Xi={class:"code-diff-stat removed"},Ki={class:"code-diff-stat added"},Zi=["aria-label"],er={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},tr={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},nr=["aria-pressed"],lr={key:3,class:"relative"},or=["aria-expanded"],ir=["disabled"],rr=["disabled"],ar=["disabled"],ur={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},sr={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},dr={class:"code-loading-placeholder"},cr={class:"sr-only","aria-live":"polite",role:"status"},fr=cl({__name:"CodeBlockShell",props:{showHeader:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},showFontSizeButtons:{type:Boolean,default:!0},enableFontSizeControl:{type:Boolean,default:!0},showCopyButton:{type:Boolean,default:!0},showExpandButton:{type:Boolean,default:!0},showPreviewButton:{type:Boolean,default:!0},showTooltips:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},stream:{type:Boolean,default:!1},isCollapsed:{type:Boolean,default:!1},isExpanded:{type:Boolean,default:!1},copyText:{type:Boolean,default:!1},isPreviewable:{type:Boolean,default:!1},codeFontSize:{},codeFontMin:{},codeFontMax:{},defaultCodeFontSize:{},fontBaselineReady:{type:Boolean,default:!1},diffStats:{},diffStatsAriaLabel:{}},emits:["toggleCollapse","decreaseFont","resetFont","increaseFont","copy","toggleExpand","preview"],setup(x,{emit:M}){const w=x,te=M,ne=$(!1),we=$(null),be=$(null);function r(){vt(!0),ne.value=!ne.value,ne.value&&document.addEventListener("click",z,{once:!0,capture:!0})}function E(){vt(!0),ne.value=!1}function z(Y){var f,O;const yt=Y.target;(f=we.value)!=null&&f.contains(yt)||(O=be.value)!=null&&O.contains(yt)?document.addEventListener("click",z,{once:!0,capture:!0}):E()}const ie=k(()=>w.showFontSizeButtons&&w.enableFontSizeControl||w.showExpandButton||w.isPreviewable&&w.showPreviewButton),{t:N}=fl(),ht=k(()=>w.showTooltips!==!1);function Ve(Y,f){ht.value&&ji(Y.currentTarget,f,"top",!1,void 0,w.isDark)}function Be(){ht.value&&vt()}function gt(Y){Ve(Y,w.copyText?N("common.copied")||"Copied":N("common.copy")||"Copy")}const vl=k(()=>{var Y,f;return!!Number.isFinite(w.codeFontSize)&&((Y=w.codeFontSize)!=null?Y:0)<=((f=w.codeFontMin)!=null?f:0)}),Vt=k(()=>!w.fontBaselineReady||w.codeFontSize===w.defaultCodeFontSize),Gt=k(()=>{var Y,f;return!!Number.isFinite(w.codeFontSize)&&((Y=w.codeFontSize)!=null?Y:0)>=((f=w.codeFontMax)!=null?f:100)});return(Y,f)=>(G(),oe(Mo,null,[w.showHeader?(G(),oe("div",Ji,[pt(Y.$slots,"header-left"),pt(Y.$slots,"header-right",{},()=>[b("div",Yi,[x.diffStats?(G(),oe("div",{key:0,class:"code-diff-stats","aria-label":x.diffStatsAriaLabel},[b("span",Xi,"-"+Me(x.diffStats.removed),1),b("span",Ki,"+"+Me(x.diffStats.added),1)],8,Qi)):ye("",!0),w.showCopyButton?(G(),oe("button",{key:1,type:"button",class:"code-action-btn inline-flex items-center justify-center p-[var(--ms-action-btn-padding)] rounded leading-none shrink-0 cursor-pointer text-[var(--code-action-fg)] hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] active:scale-[0.96] disabled:opacity-40 disabled:cursor-not-allowed transition-colors","aria-label":x.copyText?V(N)("common.copied")||"Copied":V(N)("common.copy")||"Copy",onClick:f[0]||(f[0]=O=>te("copy")),onMouseenter:f[1]||(f[1]=O=>gt(O)),onFocus:f[2]||(f[2]=O=>gt(O)),onMouseleave:Be,onBlur:Be},[x.copyText?(G(),oe("svg",tr,[...f[14]||(f[14]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M20 6L9 17l-5-5"},null,-1)])])):(G(),oe("svg",er,[...f[13]||(f[13]=[b("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[b("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),b("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})],-1)])]))],40,Zi)):ye("",!0),w.showCollapseButton?(G(),oe("button",{key:2,type:"button",class:"code-action-btn inline-flex items-center justify-center p-[var(--ms-action-btn-padding)] rounded leading-none shrink-0 cursor-pointer text-[var(--code-action-fg)] hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] active:scale-[0.96] disabled:opacity-40 disabled:cursor-not-allowed transition-colors","aria-pressed":x.isCollapsed,onClick:f[3]||(f[3]=O=>te("toggleCollapse")),onMouseenter:f[4]||(f[4]=O=>Ve(O,x.isCollapsed?V(N)("common.expand")||"Expand":V(N)("common.collapse")||"Collapse")),onFocus:f[5]||(f[5]=O=>Ve(O,x.isCollapsed?V(N)("common.expand")||"Expand":V(N)("common.collapse")||"Collapse")),onMouseleave:Be,onBlur:Be},[(G(),oe("svg",{style:It({rotate:x.isCollapsed?"0deg":"90deg"}),xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[...f[15]||(f[15]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m9 18l6-6l-6-6"},null,-1)])],4))],40,nr)):ye("",!0),ie.value?(G(),oe("div",lr,[b("button",{ref_key:"moreBtnRef",ref:be,type:"button",class:"code-action-btn inline-flex items-center justify-center p-[var(--ms-action-btn-padding)] rounded leading-none shrink-0 cursor-pointer text-[var(--code-action-fg)] hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] active:scale-[0.96] transition-colors","aria-expanded":ne.value,"aria-haspopup":"true",onClick:Ho(r,["stop"]),onMouseenter:f[6]||(f[6]=O=>Ve(O,V(N)("common.more")||"More")),onFocus:f[7]||(f[7]=O=>Ve(O,V(N)("common.more")||"More")),onMouseleave:Be,onBlur:Be},[...f[16]||(f[16]=[Di('<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" class="action-icon"><g fill="currentColor"><circle cx="12" cy="5" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="12" cy="19" r="1.5"></circle></g></svg>',1)])],40,or),zo(Ai,{name:"code-menu"},{default:Ut(()=>[ne.value?(G(),oe("div",{key:0,ref_key:"moreMenuRef",ref:we,class:"code-more-menu min-w-[10rem] p-1 bg-[hsl(var(--ms-popover))] text-[hsl(var(--ms-popover-foreground))] border border-[var(--code-border)] shadow-[var(--ms-shadow-popover)]",role:"menu"},[w.showFontSizeButtons&&w.enableFontSizeControl?(G(),oe(Mo,{key:0},[b("button",{type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",disabled:vl.value,onClick:f[8]||(f[8]=O=>{V(vt)(!0),te("decreaseFont")})},[f[17]||(f[17]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14"})],-1)),b("span",null,Me(V(N)("common.fontSmaller")||"Font size −"),1)],8,ir),b("button",{type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",disabled:Vt.value,onClick:f[9]||(f[9]=O=>{V(vt)(!0),te("resetFont")})},[f[18]||(f[18]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[b("path",{d:"M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8"}),b("path",{d:"M3 3v5h5"})])],-1)),b("span",null,Me(V(N)("common.fontReset")||"Font size reset"),1)],8,rr),b("button",{type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",disabled:Gt.value,onClick:f[10]||(f[10]=O=>{V(vt)(!0),te("increaseFont")})},[f[19]||(f[19]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14m-7-7v14"})],-1)),b("span",null,Me(V(N)("common.fontLarger")||"Font size +"),1)],8,ar)],64)):ye("",!0),w.showExpandButton?(G(),oe("button",{key:1,type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] transition-colors",onClick:f[11]||(f[11]=O=>{E(),te("toggleExpand")})},[x.isExpanded?(G(),oe("svg",ur,[...f[20]||(f[20]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m14 10l7-7m-1 7h-6V4M3 21l7-7m-6 0h6v6"},null,-1)])])):(G(),oe("svg",sr,[...f[21]||(f[21]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 3h6v6m0-6l-7 7M3 21l7-7m-1 7H3v-6"},null,-1)])])),b("span",null,Me(x.isExpanded?V(N)("common.collapse")||"Collapse":V(N)("common.expand")||"Expand"),1)])):ye("",!0),x.isPreviewable&&w.showPreviewButton?(G(),oe("button",{key:2,type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] transition-colors",onClick:f[12]||(f[12]=O=>{E(),te("preview")})},[f[22]||(f[22]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[b("path",{d:"M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0"}),b("circle",{cx:"12",cy:"12",r:"3"})])],-1)),b("span",null,Me(V(N)("common.preview")||"Preview"),1)])):ye("",!0)],512)):ye("",!0)]),_:1})])):ye("",!0)])])])):ye("",!0),sl(b("div",{class:mt(["code-block-shell-content",{"code-block-shell-content--collapsed":x.isCollapsed}])},[pt(Y.$slots,"default")],2),[[dl,!!x.stream||!x.loading]]),sl(b("div",dr,[pt(Y.$slots,"loading",{},()=>[f[23]||(f[23]=b("div",{class:"loading-skeleton"},[b("div",{class:"skeleton-line"}),b("div",{class:"skeleton-line"}),b("div",{class:"skeleton-line short"})],-1))])],512),[[dl,!x.stream&&x.loading]]),b("span",cr,Me(x.copyText?V(N)("common.copied")||"Copied":""),1)],64))}}),vr={class:"html-preview-frame__header"},mr={class:"html-preview-frame__title"},pr={class:"html-preview-frame__label"},hr=["sandbox","srcdoc"],gr=Lo(cl({__name:"HtmlPreviewFrame",props:{code:{},isDark:{type:Boolean},htmlPreviewAllowScripts:{type:Boolean},htmlPreviewSandbox:{},onClose:{type:Function},title:{}},setup(x){const M=x,w=import.meta!==void 0&&!1;let te=null;const{t:ne}=fl(),we=k(()=>{const E=M.code||"",z=E.trim().toLowerCase();return z.startsWith("<!doctype")||z.startsWith("<html")||z.startsWith("<body")?E:`<!doctype html>
+import{bR as wi,cb as bi,bQ as Lo,M as cl,bl as ki,af as ul,bY as xi,cc as Si,b$ as fl,aU as $,c0 as Ci,c1 as Mi,c2 as Bi,a0 as ko,aD as $o,bE as ae,az as Ei,cd as hn,c8 as vt,aI as Oo,aL as G,s as bn,aw as It,au as mt,bk as V,ce as xo,u as oe,I as zo,A as Fi,bJ as Ut,aY as pt,bL as sl,v as b,t as ye,bB as dl,bb as Me,q as k,b7 as Pi,cf as Li,cg as gn,ch as $i,ci as Oi,cj as zi,ck as Hi,as as j,cl as So,cm as Ni,cn as Ti,co as jt,cp as Co,bO as Ho,T as Ri,G as Di,F as Mo,g as Ai,c7 as ji,b_ as qi}from"./index-Ia-ZUO2Z.js";import{i as fe,t as yn}from"./safeRaf-DGuzXxDK.js";var wn=(x,M,w)=>new Promise((te,ne)=>{var we=E=>{try{r(w.next(E))}catch(z){ne(z)}},be=E=>{try{r(w.throw(E))}catch(z){ne(z)}},r=E=>E.done?te(E.value):Promise.resolve(E.value).then(we,be);r((w=w.apply(x,M)).next())});let Bo=!1,qt=null,Wt=null,_t=null;function Wi(){return wn(this,null,function*(){if(_t)return _t;_t=wn(null,null,function*(){if(!Wt)try{if(Wt=(function(x){const M=x;if(typeof M?.useMonaco=="function")return M;const w=x?.default;return typeof w?.useMonaco=="function"?w:null})(yield wi(()=>import("./__vite-optional-peer-dep_stream-diffs_markstream-vue-BIHI7g3E.js"),[])),!Wt)return null}catch{return null}try{return yield(function(x){return wn(this,null,function*(){return Bo?void 0:qt||(qt=wn(null,null,function*(){const w=globalThis?.MonacoEnvironment;w&&(typeof w.getWorker=="function"||typeof w.getWorkerUrl=="function")||typeof x?.preloadMonacoWorkers!="function"||(yield x.preloadMonacoWorkers()),Bo=!0}).finally(()=>{qt=null}),qt)})})(Wt),bi(),Wt}catch{return null}});try{return yield _t}finally{_t=null}})}var _i=Object.defineProperty,Ii=Object.defineProperties,Ui=Object.getOwnPropertyDescriptors,Eo=Object.getOwnPropertySymbols,Vi=Object.prototype.hasOwnProperty,Gi=Object.prototype.propertyIsEnumerable,Fo=(x,M,w)=>M in x?_i(x,M,{enumerable:!0,configurable:!0,writable:!0,value:w}):x[M]=w,I=(x,M)=>{for(var w in M||(M={}))Vi.call(M,w)&&Fo(x,w,M[w]);if(Eo)for(var w of Eo(M))Gi.call(M,w)&&Fo(x,w,M[w]);return x},Ce=(x,M)=>Ii(x,Ui(M)),q=(x,M,w)=>new Promise((te,ne)=>{var we=E=>{try{r(w.next(E))}catch(z){ne(z)}},be=E=>{try{r(w.throw(E))}catch(z){ne(z)}},r=E=>E.done?te(E.value):Promise.resolve(E.value).then(we,be);r((w=w.apply(x,M)).next())});const Ji={key:0,class:"code-block-header flex justify-between items-center border-b px-[var(--ms-inset-panel-x)] py-[var(--ms-inset-panel-y)] border-[var(--code-border)] bg-[var(--code-header-bg)] text-[var(--code-fg)]"},Yi={class:"flex items-center gap-0.5"},Qi=["aria-label"],Xi={class:"code-diff-stat removed"},Ki={class:"code-diff-stat added"},Zi=["aria-label"],er={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},tr={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},nr=["aria-pressed"],lr={key:3,class:"relative"},or=["aria-expanded"],ir=["disabled"],rr=["disabled"],ar=["disabled"],ur={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},sr={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},dr={class:"code-loading-placeholder"},cr={class:"sr-only","aria-live":"polite",role:"status"},fr=cl({__name:"CodeBlockShell",props:{showHeader:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},showFontSizeButtons:{type:Boolean,default:!0},enableFontSizeControl:{type:Boolean,default:!0},showCopyButton:{type:Boolean,default:!0},showExpandButton:{type:Boolean,default:!0},showPreviewButton:{type:Boolean,default:!0},showTooltips:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},stream:{type:Boolean,default:!1},isCollapsed:{type:Boolean,default:!1},isExpanded:{type:Boolean,default:!1},copyText:{type:Boolean,default:!1},isPreviewable:{type:Boolean,default:!1},codeFontSize:{},codeFontMin:{},codeFontMax:{},defaultCodeFontSize:{},fontBaselineReady:{type:Boolean,default:!1},diffStats:{},diffStatsAriaLabel:{}},emits:["toggleCollapse","decreaseFont","resetFont","increaseFont","copy","toggleExpand","preview"],setup(x,{emit:M}){const w=x,te=M,ne=$(!1),we=$(null),be=$(null);function r(){vt(!0),ne.value=!ne.value,ne.value&&document.addEventListener("click",z,{once:!0,capture:!0})}function E(){vt(!0),ne.value=!1}function z(Y){var f,O;const yt=Y.target;(f=we.value)!=null&&f.contains(yt)||(O=be.value)!=null&&O.contains(yt)?document.addEventListener("click",z,{once:!0,capture:!0}):E()}const ie=k(()=>w.showFontSizeButtons&&w.enableFontSizeControl||w.showExpandButton||w.isPreviewable&&w.showPreviewButton),{t:N}=fl(),ht=k(()=>w.showTooltips!==!1);function Ve(Y,f){ht.value&&ji(Y.currentTarget,f,"top",!1,void 0,w.isDark)}function Be(){ht.value&&vt()}function gt(Y){Ve(Y,w.copyText?N("common.copied")||"Copied":N("common.copy")||"Copy")}const vl=k(()=>{var Y,f;return!!Number.isFinite(w.codeFontSize)&&((Y=w.codeFontSize)!=null?Y:0)<=((f=w.codeFontMin)!=null?f:0)}),Vt=k(()=>!w.fontBaselineReady||w.codeFontSize===w.defaultCodeFontSize),Gt=k(()=>{var Y,f;return!!Number.isFinite(w.codeFontSize)&&((Y=w.codeFontSize)!=null?Y:0)>=((f=w.codeFontMax)!=null?f:100)});return(Y,f)=>(G(),oe(Mo,null,[w.showHeader?(G(),oe("div",Ji,[pt(Y.$slots,"header-left"),pt(Y.$slots,"header-right",{},()=>[b("div",Yi,[x.diffStats?(G(),oe("div",{key:0,class:"code-diff-stats","aria-label":x.diffStatsAriaLabel},[b("span",Xi,"-"+Me(x.diffStats.removed),1),b("span",Ki,"+"+Me(x.diffStats.added),1)],8,Qi)):ye("",!0),w.showCopyButton?(G(),oe("button",{key:1,type:"button",class:"code-action-btn inline-flex items-center justify-center p-[var(--ms-action-btn-padding)] rounded leading-none shrink-0 cursor-pointer text-[var(--code-action-fg)] hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] active:scale-[0.96] disabled:opacity-40 disabled:cursor-not-allowed transition-colors","aria-label":x.copyText?V(N)("common.copied")||"Copied":V(N)("common.copy")||"Copy",onClick:f[0]||(f[0]=O=>te("copy")),onMouseenter:f[1]||(f[1]=O=>gt(O)),onFocus:f[2]||(f[2]=O=>gt(O)),onMouseleave:Be,onBlur:Be},[x.copyText?(G(),oe("svg",tr,[...f[14]||(f[14]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M20 6L9 17l-5-5"},null,-1)])])):(G(),oe("svg",er,[...f[13]||(f[13]=[b("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[b("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),b("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})],-1)])]))],40,Zi)):ye("",!0),w.showCollapseButton?(G(),oe("button",{key:2,type:"button",class:"code-action-btn inline-flex items-center justify-center p-[var(--ms-action-btn-padding)] rounded leading-none shrink-0 cursor-pointer text-[var(--code-action-fg)] hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] active:scale-[0.96] disabled:opacity-40 disabled:cursor-not-allowed transition-colors","aria-pressed":x.isCollapsed,onClick:f[3]||(f[3]=O=>te("toggleCollapse")),onMouseenter:f[4]||(f[4]=O=>Ve(O,x.isCollapsed?V(N)("common.expand")||"Expand":V(N)("common.collapse")||"Collapse")),onFocus:f[5]||(f[5]=O=>Ve(O,x.isCollapsed?V(N)("common.expand")||"Expand":V(N)("common.collapse")||"Collapse")),onMouseleave:Be,onBlur:Be},[(G(),oe("svg",{style:It({rotate:x.isCollapsed?"0deg":"90deg"}),xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[...f[15]||(f[15]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m9 18l6-6l-6-6"},null,-1)])],4))],40,nr)):ye("",!0),ie.value?(G(),oe("div",lr,[b("button",{ref_key:"moreBtnRef",ref:be,type:"button",class:"code-action-btn inline-flex items-center justify-center p-[var(--ms-action-btn-padding)] rounded leading-none shrink-0 cursor-pointer text-[var(--code-action-fg)] hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] active:scale-[0.96] transition-colors","aria-expanded":ne.value,"aria-haspopup":"true",onClick:Ho(r,["stop"]),onMouseenter:f[6]||(f[6]=O=>Ve(O,V(N)("common.more")||"More")),onFocus:f[7]||(f[7]=O=>Ve(O,V(N)("common.more")||"More")),onMouseleave:Be,onBlur:Be},[...f[16]||(f[16]=[Di('<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" class="action-icon"><g fill="currentColor"><circle cx="12" cy="5" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="12" cy="19" r="1.5"></circle></g></svg>',1)])],40,or),zo(Ai,{name:"code-menu"},{default:Ut(()=>[ne.value?(G(),oe("div",{key:0,ref_key:"moreMenuRef",ref:we,class:"code-more-menu min-w-[10rem] p-1 bg-[hsl(var(--ms-popover))] text-[hsl(var(--ms-popover-foreground))] border border-[var(--code-border)] shadow-[var(--ms-shadow-popover)]",role:"menu"},[w.showFontSizeButtons&&w.enableFontSizeControl?(G(),oe(Mo,{key:0},[b("button",{type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",disabled:vl.value,onClick:f[8]||(f[8]=O=>{V(vt)(!0),te("decreaseFont")})},[f[17]||(f[17]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14"})],-1)),b("span",null,Me(V(N)("common.fontSmaller")||"Font size −"),1)],8,ir),b("button",{type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",disabled:Vt.value,onClick:f[9]||(f[9]=O=>{V(vt)(!0),te("resetFont")})},[f[18]||(f[18]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[b("path",{d:"M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8"}),b("path",{d:"M3 3v5h5"})])],-1)),b("span",null,Me(V(N)("common.fontReset")||"Font size reset"),1)],8,rr),b("button",{type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors",disabled:Gt.value,onClick:f[10]||(f[10]=O=>{V(vt)(!0),te("increaseFont")})},[f[19]||(f[19]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14m-7-7v14"})],-1)),b("span",null,Me(V(N)("common.fontLarger")||"Font size +"),1)],8,ar)],64)):ye("",!0),w.showExpandButton?(G(),oe("button",{key:1,type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] transition-colors",onClick:f[11]||(f[11]=O=>{E(),te("toggleExpand")})},[x.isExpanded?(G(),oe("svg",ur,[...f[20]||(f[20]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m14 10l7-7m-1 7h-6V4M3 21l7-7m-6 0h6v6"},null,-1)])])):(G(),oe("svg",sr,[...f[21]||(f[21]=[b("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 3h6v6m0-6l-7 7M3 21l7-7m-1 7H3v-6"},null,-1)])])),b("span",null,Me(x.isExpanded?V(N)("common.collapse")||"Collapse":V(N)("common.expand")||"Expand"),1)])):ye("",!0),x.isPreviewable&&w.showPreviewButton?(G(),oe("button",{key:2,type:"button",role:"menuitem",class:"flex items-center gap-2 w-full py-1.5 px-2 rounded text-xs text-[var(--code-action-fg)] cursor-pointer whitespace-nowrap hover:bg-[var(--code-action-hover-bg)] hover:text-[var(--code-action-hover-fg)] transition-colors",onClick:f[12]||(f[12]=O=>{E(),te("preview")})},[f[22]||(f[22]=b("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},[b("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[b("path",{d:"M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0"}),b("circle",{cx:"12",cy:"12",r:"3"})])],-1)),b("span",null,Me(V(N)("common.preview")||"Preview"),1)])):ye("",!0)],512)):ye("",!0)]),_:1})])):ye("",!0)])])])):ye("",!0),sl(b("div",{class:mt(["code-block-shell-content",{"code-block-shell-content--collapsed":x.isCollapsed}])},[pt(Y.$slots,"default")],2),[[dl,!!x.stream||!x.loading]]),sl(b("div",dr,[pt(Y.$slots,"loading",{},()=>[f[23]||(f[23]=b("div",{class:"loading-skeleton"},[b("div",{class:"skeleton-line"}),b("div",{class:"skeleton-line"}),b("div",{class:"skeleton-line short"})],-1))])],512),[[dl,!x.stream&&x.loading]]),b("span",cr,Me(x.copyText?V(N)("common.copied")||"Copied":""),1)],64))}}),vr={class:"html-preview-frame__header"},mr={class:"html-preview-frame__title"},pr={class:"html-preview-frame__label"},hr=["sandbox","srcdoc"],gr=Lo(cl({__name:"HtmlPreviewFrame",props:{code:{},isDark:{type:Boolean},htmlPreviewAllowScripts:{type:Boolean},htmlPreviewSandbox:{},onClose:{type:Function},title:{}},setup(x){const M=x,w=import.meta!==void 0&&!1;let te=null;const{t:ne}=fl(),we=k(()=>{const E=M.code||"",z=E.trim().toLowerCase();return z.startsWith("<!doctype")||z.startsWith("<html")||z.startsWith("<body")?E:`<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

package/dist-web/assets/{DesignSystemView-Gp4T3sr4.js → DesignSystemView-Bb01YcYk.js}

@@ -1,4 +1,4 @@
-import{M as w,aD as y,aI as x,aL as c,u as s,v as t,G as d,H as o,F as r,aX as u,bb as b,I as k,cx as C,bk as z,cy as q,cz as S}from"./index-DKIJmNQn.js";const T={class:"ds-page"},B={class:"layout"},A={class:"content"},I={class:"content-inner"},M={id:"tokens"},D={class:"icon-sizes"},H={class:"sz"},L={class:"p-ic",style:{width:"14px",height:"14px"},viewBox:"0 0 24 24",fill:"currentColor"},V={class:"sz"},U={class:"p-ic",style:{width:"16px",height:"16px"},viewBox:"0 0 24 24",fill:"currentColor"},W={class:"sz"},P={class:"p-ic",style:{width:"20px",height:"20px"},viewBox:"0 0 24 24",fill:"currentColor"},R={class:"icon-grid"},N={class:"icon-group-label"},O={class:"ic-name"},j={id:"primitives"},E={class:"stage-wrap"},F={class:"stage p col"},_={class:"demo-row"},K={class:"p-btn primary disabled"},G={class:"p-spinner sm",viewBox:"0 0 24 24",style:{"--p-accent":"#fff","--p-line":"rgba(255,255,255,.35)"}},J={class:"stage-wrap"},Q={class:"stage p col",style:{gap:"0",background:"var(--p-surface)",padding:"0","max-width":"300px","align-items":"stretch"}},Y={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},X={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},Z={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},$={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},aa={id:"chat"},ta={class:"stage-wrap"},ca={class:"stage p col",style:{"align-items":"center",background:"#fff"}},sa={class:"demo-chat"},da={class:"p-action"},ea={class:"p-action-head"},oa={class:"p-ic",style:{color:"var(--p-accent)"},viewBox:"0 0 24 24",fill:"currentColor"},ia={class:"p-action warn"},la={class:"p-action-head"},na={class:"p-ic",style:{color:"var(--p-warning)"},viewBox:"0 0 24 24",fill:"currentColor"},va=w({__name:"DesignSystemView",emits:["close"],setup(ra,{emit:g}){const m=g;function f(){m("close")}let v=null;function p(n){n.key==="Escape"&&f()}return y(()=>{document.addEventListener("keydown",p);const n=Array.prototype.slice.call(document.querySelectorAll('#nav a[href^="#"]')),a=new Map;n.forEach(l=>{const e=l.getAttribute("href");if(!e)return;const h=document.getElementById(e.slice(1));h&&a.set(h,l)});let i=null;v=new IntersectionObserver(l=>{l.forEach(e=>{e.isIntersecting&&(i&&i.classList.remove("active"),i=a.get(e.target)??null,i&&i.classList.add("active"))})},{rootMargin:"-20% 0px -70% 0px",threshold:0}),a.forEach((l,e)=>v.observe(e)),n.length&&n[0].classList.add("active")}),x(()=>{document.removeEventListener("keydown",p),v&&(v.disconnect(),v=null)}),(n,a)=>(c(),s("div",T,[t("div",{class:"ds-topbar"},[t("button",{class:"ds-back",type:"button",onClick:f},"← Back"),a[0]||(a[0]=t("span",{class:"ds-topbar-title"},"Design system",-1))]),t("div",B,[a[38]||(a[38]=d('<aside class="sidebar" data-v-6c48fca3><div class="brand" data-v-6c48fca3><div class="brand-mark" data-v-6c48fca3>K</div><div class="brand-name" data-v-6c48fca3>Dimi Web</div></div><div class="brand-sub" data-v-6c48fca3>Design System · v1.0</div><div class="nav-group" data-v-6c48fca3>Navigate</div><nav class="nav" id="nav" data-v-6c48fca3><a href="#overview" data-v-6c48fca3><span class="num" data-v-6c48fca3>00</span>Overview</a><a href="#principles" data-v-6c48fca3><span class="num" data-v-6c48fca3>01</span>Design Principles</a><a href="#tokens" data-v-6c48fca3><span class="num" data-v-6c48fca3>02</span>Design Tokens</a><a href="#primitives" data-v-6c48fca3><span class="num" data-v-6c48fca3>03</span>Primitives</a><a href="#chat" data-v-6c48fca3><span class="num" data-v-6c48fca3>04</span>Chat Interface</a><a href="#themes" data-v-6c48fca3><span class="num" data-v-6c48fca3>05</span>Theming</a><a href="#rules" data-v-6c48fca3><span class="num" data-v-6c48fca3>06</span>Style Rules</a><a href="#shell" data-v-6c48fca3><span class="num" data-v-6c48fca3>07</span>App Shell &amp; Sidebar</a><a href="#a11y" data-v-6c48fca3><span class="num" data-v-6c48fca3>08</span>Accessibility</a></nav><div class="nav-group" data-v-6c48fca3>Companion output</div><nav class="nav" data-v-6c48fca3><a href="#tokens" data-v-6c48fca3><span class="num" data-v-6c48fca3>↗</span>Token list</a><a href="#primitives" data-v-6c48fca3><span class="num" data-v-6c48fca3>↗</span>Component API</a><a href="#rules" data-v-6c48fca3><span class="num" data-v-6c48fca3>↗</span>Style rules</a></nav></aside>',1)),t("main",A,[t("div",I,[a[36]||(a[36]=d('<section id="overview" data-v-6c48fca3><div class="hero" data-v-6c48fca3><span class="eyebrow" data-v-6c48fca3>● Design System · v1.0</span><h1 data-v-6c48fca3>Dimi Web <span class="grad" data-v-6c48fca3>Design System</span></h1><p class="lead" data-v-6c48fca3> This document defines the visual language and component specification for Dimi Web — design tokens, component primitives, the chat interface, theming, and style rules. All UI work is grounded in it: unified, restrained, token-driven, and themeable. </p><div class="hero-meta" data-v-6c48fca3><span class="meta-chip" data-v-6c48fca3><span class="dot" data-v-6c48fca3></span> Scope <b data-v-6c48fca3>apps/dimi-web</b></span><span class="meta-chip" data-v-6c48fca3>Component primitives</span><span class="meta-chip" data-v-6c48fca3>Theme <b data-v-6c48fca3>1 set · 4 customizable colors</b></span><span class="meta-chip" data-v-6c48fca3>Light / dark mode</span></div></div><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3><b data-v-6c48fca3>This spec is the single reference when changing the web UI.</b> Before adding or modifying a component, style, layout, or theme, read this document first; color, font, radius, spacing, shadow, z-index, and motion always use the §02 tokens, components reuse the §03 primitives, and the §06 style rules are followed. </div></div></section><section id="principles" data-v-6c48fca3><div class="sec-head" data-v-6c48fca3><span class="sec-num" data-v-6c48fca3>01</span><h2 class="sec-title" data-v-6c48fca3>Design Principles</h2></div><p class="sec-desc" data-v-6c48fca3> Every UI decision traces back to the following principles. Dimi Web is a local Agent tool for developers: quick scanning, long stretches of staring, often in the dark — the design serves the task, and is restrained, clinical, and density-first. </p><ul class="clean check" data-v-6c48fca3><li data-v-6c48fca3><b data-v-6c48fca3>Consistency</b> —— The same semantics use the same component. The primary button, dialog, input, and badge should each have exactly &quot;one&quot; correct way to be written across the entire site.</li><li data-v-6c48fca3><b data-v-6c48fca3>Hierarchy</b> —— Build a clear hierarchy through size, weight, color, and whitespace; emphasize through &quot;restraint&quot; rather than &quot;bolder and bigger&quot;.</li><li data-v-6c48fca3><b data-v-6c48fca3>Proximity</b> —— Group related elements, leave whitespace between unrelated ones. A card&#39;s padding, line spacing, and group spacing all come from the same spacing scale.</li><li data-v-6c48fca3><b data-v-6c48fca3>Feedback</b> —— hover / active / focus / loading / success / error all have visible states, and the state language is unified.</li><li data-v-6c48fca3><b data-v-6c48fca3>Breathing room</b> —— Control density with the spacing scale rather than arbitrary pixels; prefer restrained whitespace over cramming controls together.</li><li data-v-6c48fca3><b data-v-6c48fca3>Accessibility (A11y)</b> —— Text contrast ≥ 4.5:1, visible focus rings, touch targets ≥ 32px, and states that don&#39;t rely on color alone.</li><li data-v-6c48fca3><b data-v-6c48fca3>Reduction</b> —— The number of colors, radii, shadow levels, and type sizes all converge to a finite set of tokens; delete stray values.</li></ul><div class="callout good" data-v-6c48fca3><span class="ico" data-v-6c48fca3>✓</span><div data-v-6c48fca3><b data-v-6c48fca3>Brand tone (the do-not list)</b>: calm, clinical, never exaggerated. <span class="pill red" style="margin:0 4px;" data-v-6c48fca3>Reject</span> purple gradients, glassmorphism, glowing shadows, AI purple / blue glows, endlessly looping fussy micro-animations, &quot;Boost your productivity&quot;-style marketing copy, and using emoji as icons — <b data-v-6c48fca3>the moon phases 🌑…🌘 are the sole exception</b>, used only in the &quot;waiting for the Agent to respond&quot; chat state, as a brand signature. These are all common tells of AI-generated interfaces (an &quot;AI tell&quot;), deliberately avoided. </div></div><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3><b data-v-6c48fca3>Declare design intent first (Design Read)</b>: before adding a component / page, write one sentence describing its scenario, audience, and tone (for example, &quot;a lightweight tool card embedded in a conversation, for developers, calm and restrained&quot;), then build. If the intent isn&#39;t clear, ask one question first rather than defaulting to the nearest existing style. </div></div></section>',2)),t("section",M,[a[7]||(a[7]=d(`<div class="sec-head" data-v-6c48fca3><span class="sec-num" data-v-6c48fca3>02</span><h2 class="sec-title" data-v-6c48fca3>Design Tokens</h2></div><p class="sec-desc" data-v-6c48fca3> Collapse every visual decision into tokens. <b data-v-6c48fca3>Color tokens keep the existing short names and fill out the semantics</b> (lowering migration cost), while <b data-v-6c48fca3>spacing, z-index, motion, and font-weight</b> fill in the scales that are currently missing. Every token has: name, light value, dark value, and usage. </p><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3><b data-v-6c48fca3>Naming convention</b>: <code data-v-6c48fca3>--&lt;category&gt;-&lt;role&gt;-&lt;state&gt;</code>. For example <code data-v-6c48fca3>--color-text-muted</code>, <code data-v-6c48fca3>--radius-md</code>, <code data-v-6c48fca3>--space-4</code>. To reduce churn, the existing short names (<code data-v-6c48fca3>--bg</code> / <code data-v-6c48fca3>--ink</code> / <code data-v-6c48fca3>--line</code> / <code data-v-6c48fca3>--blue</code> …) are kept as <b data-v-6c48fca3>compatibility aliases</b> for one release cycle. </div></div><h3 class="sub" data-v-6c48fca3>Color</h3><p data-v-6c48fca3>Semantic-first, in three layers: <b data-v-6c48fca3>background / text / border</b> + <b data-v-6c48fca3>accent</b> + <b data-v-6c48fca3>status colors</b>. All colors are defined in light / dark pairs, with contrast ≥ 4.5:1.</p><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3>The table below shows the <b data-v-6c48fca3>derived semantic tokens</b>. The <b data-v-6c48fca3>neutrals and the accent</b> are derived from the 4 color seeds in §05 — for example <code data-v-6c48fca3>--color-accent</code> comes from <code data-v-6c48fca3>--accent-primary</code>, and <code data-v-6c48fca3>--color-bg</code> comes from the current light / dark surface. The <b data-v-6c48fca3>semantic status colors</b> (success / warning / danger / info) are independent palettes paired with the seeds, one set each for light / dark; they are not auto-derived from the seeds. Day-to-day reskinning usually only needs the 4 seeds, with the status colors fine-tuned as needed.</div></div><div class="palette" data-v-6c48fca3><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#ffffff;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>bg</div><div class="cv" data-v-6c48fca3>#ffffff / #0d1117</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#fafbfc;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>surface</div><div class="cv" data-v-6c48fca3>#fafbfc / #161b22</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#f3f5f8;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>surface-sunken</div><div class="cv" data-v-6c48fca3>#f3f5f8 / #0d1117</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#eceff3;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>selected</div><div class="cv" data-v-6c48fca3>#eceff3 / #2d333b</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#14171c;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>fg</div><div class="cv" data-v-6c48fca3>#14171c / #e8eaed</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#6b7280;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>fg-muted</div><div class="cv" data-v-6c48fca3>#6b7280 / #9aa0a8</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#e7eaee;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>line</div><div class="cv" data-v-6c48fca3>#e7eaee / #2d333b</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#1783ff;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>accent (KMBlue)</div><div class="cv" data-v-6c48fca3>#1783ff / #58a6ff</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#e8f3ff;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>accent-soft</div><div class="cv" data-v-6c48fca3>#e8f3ff / rgba(88,166,255,.14)</div></div></div></div><table class="dt" data-v-6c48fca3><thead data-v-6c48fca3><tr data-v-6c48fca3><th data-v-6c48fca3>Token</th><th data-v-6c48fca3>Light</th><th data-v-6c48fca3>Dark</th><th data-v-6c48fca3>Usage</th></tr></thead><tbody data-v-6c48fca3><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-bg</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0d1117;" data-v-6c48fca3></span>#0d1117</td><td data-v-6c48fca3>Page background</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-surface</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fafbfc;" data-v-6c48fca3></span>#fafbfc</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#161b22;" data-v-6c48fca3></span>#161b22</td><td data-v-6c48fca3>Panel / sidebar / card head</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-surface-raised</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#1c2128;" data-v-6c48fca3></span>#1c2128</td><td data-v-6c48fca3>Raised card / dialog / input</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-text</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#14171c;" data-v-6c48fca3></span>#14171c</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#e8eaed;" data-v-6c48fca3></span>#e8eaed</td><td data-v-6c48fca3>Body text / headings</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-text-muted</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#6b7280;" data-v-6c48fca3></span>#6b7280</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#9aa0a8;" data-v-6c48fca3></span>#9aa0a8</td><td data-v-6c48fca3>Secondary text / placeholder</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-line</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#e7eaee;" data-v-6c48fca3></span>#e7eaee</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#2d333b;" data-v-6c48fca3></span>#2d333b</td><td data-v-6c48fca3>Divider / card border</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-selected</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#00000014;" data-v-6c48fca3></span>#00000014</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#ffffff14;" data-v-6c48fca3></span>#ffffff14</td><td data-v-6c48fca3>Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-hover</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0000000d;" data-v-6c48fca3></span>#0000000d</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#ffffff0d;" data-v-6c48fca3></span>#ffffff0d</td><td data-v-6c48fca3>Row hover wash — lighter than the selected fill (hover &lt; selected); translucent, sits on any surface</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-media-alpha-bg-1</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#858585;" data-v-6c48fca3></span>≈#858585</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#676b72;" data-v-6c48fca3></span>≈#676b72</td><td data-v-6c48fca3>Checkerboard square A of the <code data-v-6c48fca3>&lt;img&gt;</code> alpha canvas — color-mix of <code data-v-6c48fca3>--color-bg</code>/<code data-v-6c48fca3>--color-text</code> (52/48); applied via <code data-v-6c48fca3>--media-alpha-canvas</code> (16px period)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-media-alpha-bg-2</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#6b6b6b;" data-v-6c48fca3></span>≈#6b6b6b</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#7a7e85;" data-v-6c48fca3></span>≈#7a7e85</td><td data-v-6c48fca3>Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-sidebar-bg</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fbfaf9;" data-v-6c48fca3></span>#fbfaf9</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#181817;" data-v-6c48fca3></span>#181817</td><td data-v-6c48fca3>Sidebar surface — one step off <code data-v-6c48fca3>--color-bg</code> so the session column reads as its own plane</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-accent</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#1783ff;" data-v-6c48fca3></span>#1783ff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#58a6ff;" data-v-6c48fca3></span>#58a6ff</td><td data-v-6c48fca3>Primary action / link / focus</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-success</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0e7a38;" data-v-6c48fca3></span>#0e7a38</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#3fb950;" data-v-6c48fca3></span>#3fb950</td><td data-v-6c48fca3>Success / pass</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-warning</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#a9610a;" data-v-6c48fca3></span>#a9610a</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#d29922;" data-v-6c48fca3></span>#d29922</td><td data-v-6c48fca3>Warning / pending</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-danger</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#c0392b;" data-v-6c48fca3></span>#c0392b</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#f85149;" data-v-6c48fca3></span>#f85149</td><td data-v-6c48fca3>Danger / error / abort</td></tr></tbody></table><h4 class="mini" data-v-6c48fca3>Surface usage</h4><p data-v-6c48fca3>The four surface layers each have a role — choose by &quot;raised layer / default flat layer / sunken layer / page background&quot;, and avoid treating <code data-v-6c48fca3>--p-surface-raised</code> as a universal background.</p><table class="dt" data-v-6c48fca3><thead data-v-6c48fca3><tr data-v-6c48fca3><th data-v-6c48fca3>Token</th><th data-v-6c48fca3>Light</th><th data-v-6c48fca3>Dark</th><th data-v-6c48fca3>Usage</th></tr></thead><tbody data-v-6c48fca3><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-surface-raised</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#1c2128;" data-v-6c48fca3></span>#1c2128</td><td data-v-6c48fca3>Raised card / dialog / input (raised layer)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-surface</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fafbfc;" data-v-6c48fca3></span>#fafbfc</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#161b22;" data-v-6c48fca3></span>#161b22</td><td data-v-6c48fca3>Panel / sidebar / card head (default flat layer)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-surface-sunken</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#f3f5f8;" data-v-6c48fca3></span>#f3f5f8</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0d1117;" data-v-6c48fca3></span>#0d1117</td><td data-v-6c48fca3>Code block / inline input / recessed area (sunken layer)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-bg</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0d1117;" data-v-6c48fca3></span>#0d1117</td><td data-v-6c48fca3>Page background</td></tr></tbody></table><h4 class="mini" data-v-6c48fca3>Focus ring</h4><p data-v-6c48fca3>All focusable controls (button, input, link, menu item, switch, checkbox) use the focus-ring token uniformly; do not hand-write a <code data-v-6c48fca3>box-shadow</code> focus ring.</p><table class="dt" data-v-6c48fca3><thead data-v-6c48fca3><tr data-v-6c48fca3><th data-v-6c48fca3>Token</th><th data-v-6c48fca3>Value</th><th data-v-6c48fca3>Usage</th></tr></thead><tbody data-v-6c48fca3><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-focus-ring</td><td class="val" data-v-6c48fca3>0 0 0 3px var(--p-accent-soft)</td><td data-v-6c48fca3>Default focus ring (link, menu item, switch, checkbox)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-focus-ring-strong</td><td class="val" data-v-6c48fca3>0 0 0 3px var(--p-accent-soft), 0 0 0 1px var(--p-accent)</td><td data-v-6c48fca3>Strong focus ring (button, primary action)</td></tr></tbody></table><h4 class="mini" data-v-6c48fca3>Text selection</h4><p data-v-6c48fca3>The text-selection color uses <code data-v-6c48fca3>--p-selection</code> uniformly (light <code data-v-6c48fca3>rgba(23,131,255,.18)</code> / dark <code data-v-6c48fca3>rgba(88,166,255,.32)</code>), applied by the global <code data-v-6c48fca3>::selection</code> rule; do not set a separate highlight background.</p><h4 class="mini" data-v-6c48fca3>Disabled state</h4><p data-v-6c48fca3>All disabled controls use <code data-v-6c48fca3>opacity:.5</code> + <code data-v-6c48fca3>cursor:not-allowed</code> uniformly; do not separately grey out or recolor.</p><h3 class="sub" data-v-6c48fca3>Font families</h3><p data-v-6c48fca3>Dimi Web uses two font families: <b data-v-6c48fca3>--font-ui</b> (UI and body, Inter first) and <b data-v-6c48fca3>--font-mono</b> (code and monospace). Components always reference the variables; do not hard-code font names.</p><h4 class="mini" data-v-6c48fca3>--font-ui · UI &amp; body (Inter first)</h4><p data-v-6c48fca3>Body and UI use self-hosted Inter as the primary face. CJK and platform system UI fonts sit late in the fallback chain so Latin glyphs resolve to Inter while Chinese text can fall through to native CJK fonts:</p><div class="code" data-v-6c48fca3><div class="code-bar" data-v-6c48fca3><span class="d" data-v-6c48fca3></span><span class="d" data-v-6c48fca3></span><span class="d" data-v-6c48fca3></span><span class="fn" data-v-6c48fca3>--font-ui</span></div><pre data-v-6c48fca3>--font-ui: &quot;Inter Variable&quot;, &quot;Inter&quot;, &quot;Helvetica Neue&quot;, Arial,
+import{M as w,aD as y,aI as x,aL as c,u as s,v as t,G as d,H as o,F as r,aX as u,bb as b,I as k,cx as C,bk as z,cy as q,cz as S}from"./index-Ia-ZUO2Z.js";const T={class:"ds-page"},B={class:"layout"},A={class:"content"},I={class:"content-inner"},M={id:"tokens"},D={class:"icon-sizes"},H={class:"sz"},L={class:"p-ic",style:{width:"14px",height:"14px"},viewBox:"0 0 24 24",fill:"currentColor"},V={class:"sz"},U={class:"p-ic",style:{width:"16px",height:"16px"},viewBox:"0 0 24 24",fill:"currentColor"},W={class:"sz"},P={class:"p-ic",style:{width:"20px",height:"20px"},viewBox:"0 0 24 24",fill:"currentColor"},R={class:"icon-grid"},N={class:"icon-group-label"},O={class:"ic-name"},j={id:"primitives"},E={class:"stage-wrap"},F={class:"stage p col"},_={class:"demo-row"},K={class:"p-btn primary disabled"},G={class:"p-spinner sm",viewBox:"0 0 24 24",style:{"--p-accent":"#fff","--p-line":"rgba(255,255,255,.35)"}},J={class:"stage-wrap"},Q={class:"stage p col",style:{gap:"0",background:"var(--p-surface)",padding:"0","max-width":"300px","align-items":"stretch"}},Y={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},X={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},Z={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},$={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},aa={id:"chat"},ta={class:"stage-wrap"},ca={class:"stage p col",style:{"align-items":"center",background:"#fff"}},sa={class:"demo-chat"},da={class:"p-action"},ea={class:"p-action-head"},oa={class:"p-ic",style:{color:"var(--p-accent)"},viewBox:"0 0 24 24",fill:"currentColor"},ia={class:"p-action warn"},la={class:"p-action-head"},na={class:"p-ic",style:{color:"var(--p-warning)"},viewBox:"0 0 24 24",fill:"currentColor"},va=w({__name:"DesignSystemView",emits:["close"],setup(ra,{emit:g}){const m=g;function f(){m("close")}let v=null;function p(n){n.key==="Escape"&&f()}return y(()=>{document.addEventListener("keydown",p);const n=Array.prototype.slice.call(document.querySelectorAll('#nav a[href^="#"]')),a=new Map;n.forEach(l=>{const e=l.getAttribute("href");if(!e)return;const h=document.getElementById(e.slice(1));h&&a.set(h,l)});let i=null;v=new IntersectionObserver(l=>{l.forEach(e=>{e.isIntersecting&&(i&&i.classList.remove("active"),i=a.get(e.target)??null,i&&i.classList.add("active"))})},{rootMargin:"-20% 0px -70% 0px",threshold:0}),a.forEach((l,e)=>v.observe(e)),n.length&&n[0].classList.add("active")}),x(()=>{document.removeEventListener("keydown",p),v&&(v.disconnect(),v=null)}),(n,a)=>(c(),s("div",T,[t("div",{class:"ds-topbar"},[t("button",{class:"ds-back",type:"button",onClick:f},"← Back"),a[0]||(a[0]=t("span",{class:"ds-topbar-title"},"Design system",-1))]),t("div",B,[a[38]||(a[38]=d('<aside class="sidebar" data-v-6c48fca3><div class="brand" data-v-6c48fca3><div class="brand-mark" data-v-6c48fca3>K</div><div class="brand-name" data-v-6c48fca3>Dimi Web</div></div><div class="brand-sub" data-v-6c48fca3>Design System · v1.0</div><div class="nav-group" data-v-6c48fca3>Navigate</div><nav class="nav" id="nav" data-v-6c48fca3><a href="#overview" data-v-6c48fca3><span class="num" data-v-6c48fca3>00</span>Overview</a><a href="#principles" data-v-6c48fca3><span class="num" data-v-6c48fca3>01</span>Design Principles</a><a href="#tokens" data-v-6c48fca3><span class="num" data-v-6c48fca3>02</span>Design Tokens</a><a href="#primitives" data-v-6c48fca3><span class="num" data-v-6c48fca3>03</span>Primitives</a><a href="#chat" data-v-6c48fca3><span class="num" data-v-6c48fca3>04</span>Chat Interface</a><a href="#themes" data-v-6c48fca3><span class="num" data-v-6c48fca3>05</span>Theming</a><a href="#rules" data-v-6c48fca3><span class="num" data-v-6c48fca3>06</span>Style Rules</a><a href="#shell" data-v-6c48fca3><span class="num" data-v-6c48fca3>07</span>App Shell &amp; Sidebar</a><a href="#a11y" data-v-6c48fca3><span class="num" data-v-6c48fca3>08</span>Accessibility</a></nav><div class="nav-group" data-v-6c48fca3>Companion output</div><nav class="nav" data-v-6c48fca3><a href="#tokens" data-v-6c48fca3><span class="num" data-v-6c48fca3>↗</span>Token list</a><a href="#primitives" data-v-6c48fca3><span class="num" data-v-6c48fca3>↗</span>Component API</a><a href="#rules" data-v-6c48fca3><span class="num" data-v-6c48fca3>↗</span>Style rules</a></nav></aside>',1)),t("main",A,[t("div",I,[a[36]||(a[36]=d('<section id="overview" data-v-6c48fca3><div class="hero" data-v-6c48fca3><span class="eyebrow" data-v-6c48fca3>● Design System · v1.0</span><h1 data-v-6c48fca3>Dimi Web <span class="grad" data-v-6c48fca3>Design System</span></h1><p class="lead" data-v-6c48fca3> This document defines the visual language and component specification for Dimi Web — design tokens, component primitives, the chat interface, theming, and style rules. All UI work is grounded in it: unified, restrained, token-driven, and themeable. </p><div class="hero-meta" data-v-6c48fca3><span class="meta-chip" data-v-6c48fca3><span class="dot" data-v-6c48fca3></span> Scope <b data-v-6c48fca3>apps/dimi-web</b></span><span class="meta-chip" data-v-6c48fca3>Component primitives</span><span class="meta-chip" data-v-6c48fca3>Theme <b data-v-6c48fca3>1 set · 4 customizable colors</b></span><span class="meta-chip" data-v-6c48fca3>Light / dark mode</span></div></div><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3><b data-v-6c48fca3>This spec is the single reference when changing the web UI.</b> Before adding or modifying a component, style, layout, or theme, read this document first; color, font, radius, spacing, shadow, z-index, and motion always use the §02 tokens, components reuse the §03 primitives, and the §06 style rules are followed. </div></div></section><section id="principles" data-v-6c48fca3><div class="sec-head" data-v-6c48fca3><span class="sec-num" data-v-6c48fca3>01</span><h2 class="sec-title" data-v-6c48fca3>Design Principles</h2></div><p class="sec-desc" data-v-6c48fca3> Every UI decision traces back to the following principles. Dimi Web is a local Agent tool for developers: quick scanning, long stretches of staring, often in the dark — the design serves the task, and is restrained, clinical, and density-first. </p><ul class="clean check" data-v-6c48fca3><li data-v-6c48fca3><b data-v-6c48fca3>Consistency</b> —— The same semantics use the same component. The primary button, dialog, input, and badge should each have exactly &quot;one&quot; correct way to be written across the entire site.</li><li data-v-6c48fca3><b data-v-6c48fca3>Hierarchy</b> —— Build a clear hierarchy through size, weight, color, and whitespace; emphasize through &quot;restraint&quot; rather than &quot;bolder and bigger&quot;.</li><li data-v-6c48fca3><b data-v-6c48fca3>Proximity</b> —— Group related elements, leave whitespace between unrelated ones. A card&#39;s padding, line spacing, and group spacing all come from the same spacing scale.</li><li data-v-6c48fca3><b data-v-6c48fca3>Feedback</b> —— hover / active / focus / loading / success / error all have visible states, and the state language is unified.</li><li data-v-6c48fca3><b data-v-6c48fca3>Breathing room</b> —— Control density with the spacing scale rather than arbitrary pixels; prefer restrained whitespace over cramming controls together.</li><li data-v-6c48fca3><b data-v-6c48fca3>Accessibility (A11y)</b> —— Text contrast ≥ 4.5:1, visible focus rings, touch targets ≥ 32px, and states that don&#39;t rely on color alone.</li><li data-v-6c48fca3><b data-v-6c48fca3>Reduction</b> —— The number of colors, radii, shadow levels, and type sizes all converge to a finite set of tokens; delete stray values.</li></ul><div class="callout good" data-v-6c48fca3><span class="ico" data-v-6c48fca3>✓</span><div data-v-6c48fca3><b data-v-6c48fca3>Brand tone (the do-not list)</b>: calm, clinical, never exaggerated. <span class="pill red" style="margin:0 4px;" data-v-6c48fca3>Reject</span> purple gradients, glassmorphism, glowing shadows, AI purple / blue glows, endlessly looping fussy micro-animations, &quot;Boost your productivity&quot;-style marketing copy, and using emoji as icons — <b data-v-6c48fca3>the moon phases 🌑…🌘 are the sole exception</b>, used only in the &quot;waiting for the Agent to respond&quot; chat state, as a brand signature. These are all common tells of AI-generated interfaces (an &quot;AI tell&quot;), deliberately avoided. </div></div><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3><b data-v-6c48fca3>Declare design intent first (Design Read)</b>: before adding a component / page, write one sentence describing its scenario, audience, and tone (for example, &quot;a lightweight tool card embedded in a conversation, for developers, calm and restrained&quot;), then build. If the intent isn&#39;t clear, ask one question first rather than defaulting to the nearest existing style. </div></div></section>',2)),t("section",M,[a[7]||(a[7]=d(`<div class="sec-head" data-v-6c48fca3><span class="sec-num" data-v-6c48fca3>02</span><h2 class="sec-title" data-v-6c48fca3>Design Tokens</h2></div><p class="sec-desc" data-v-6c48fca3> Collapse every visual decision into tokens. <b data-v-6c48fca3>Color tokens keep the existing short names and fill out the semantics</b> (lowering migration cost), while <b data-v-6c48fca3>spacing, z-index, motion, and font-weight</b> fill in the scales that are currently missing. Every token has: name, light value, dark value, and usage. </p><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3><b data-v-6c48fca3>Naming convention</b>: <code data-v-6c48fca3>--&lt;category&gt;-&lt;role&gt;-&lt;state&gt;</code>. For example <code data-v-6c48fca3>--color-text-muted</code>, <code data-v-6c48fca3>--radius-md</code>, <code data-v-6c48fca3>--space-4</code>. To reduce churn, the existing short names (<code data-v-6c48fca3>--bg</code> / <code data-v-6c48fca3>--ink</code> / <code data-v-6c48fca3>--line</code> / <code data-v-6c48fca3>--blue</code> …) are kept as <b data-v-6c48fca3>compatibility aliases</b> for one release cycle. </div></div><h3 class="sub" data-v-6c48fca3>Color</h3><p data-v-6c48fca3>Semantic-first, in three layers: <b data-v-6c48fca3>background / text / border</b> + <b data-v-6c48fca3>accent</b> + <b data-v-6c48fca3>status colors</b>. All colors are defined in light / dark pairs, with contrast ≥ 4.5:1.</p><div class="callout info" data-v-6c48fca3><span class="ico" data-v-6c48fca3>i</span><div data-v-6c48fca3>The table below shows the <b data-v-6c48fca3>derived semantic tokens</b>. The <b data-v-6c48fca3>neutrals and the accent</b> are derived from the 4 color seeds in §05 — for example <code data-v-6c48fca3>--color-accent</code> comes from <code data-v-6c48fca3>--accent-primary</code>, and <code data-v-6c48fca3>--color-bg</code> comes from the current light / dark surface. The <b data-v-6c48fca3>semantic status colors</b> (success / warning / danger / info) are independent palettes paired with the seeds, one set each for light / dark; they are not auto-derived from the seeds. Day-to-day reskinning usually only needs the 4 seeds, with the status colors fine-tuned as needed.</div></div><div class="palette" data-v-6c48fca3><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#ffffff;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>bg</div><div class="cv" data-v-6c48fca3>#ffffff / #0d1117</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#fafbfc;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>surface</div><div class="cv" data-v-6c48fca3>#fafbfc / #161b22</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#f3f5f8;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>surface-sunken</div><div class="cv" data-v-6c48fca3>#f3f5f8 / #0d1117</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#eceff3;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>selected</div><div class="cv" data-v-6c48fca3>#eceff3 / #2d333b</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#14171c;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>fg</div><div class="cv" data-v-6c48fca3>#14171c / #e8eaed</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#6b7280;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>fg-muted</div><div class="cv" data-v-6c48fca3>#6b7280 / #9aa0a8</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#e7eaee;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>line</div><div class="cv" data-v-6c48fca3>#e7eaee / #2d333b</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#1783ff;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>accent (KMBlue)</div><div class="cv" data-v-6c48fca3>#1783ff / #58a6ff</div></div></div><div class="color-card" data-v-6c48fca3><div class="color-chip" style="background:#e8f3ff;" data-v-6c48fca3></div><div class="color-meta" data-v-6c48fca3><div class="cn" data-v-6c48fca3>accent-soft</div><div class="cv" data-v-6c48fca3>#e8f3ff / rgba(88,166,255,.14)</div></div></div></div><table class="dt" data-v-6c48fca3><thead data-v-6c48fca3><tr data-v-6c48fca3><th data-v-6c48fca3>Token</th><th data-v-6c48fca3>Light</th><th data-v-6c48fca3>Dark</th><th data-v-6c48fca3>Usage</th></tr></thead><tbody data-v-6c48fca3><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-bg</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0d1117;" data-v-6c48fca3></span>#0d1117</td><td data-v-6c48fca3>Page background</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-surface</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fafbfc;" data-v-6c48fca3></span>#fafbfc</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#161b22;" data-v-6c48fca3></span>#161b22</td><td data-v-6c48fca3>Panel / sidebar / card head</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-surface-raised</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#1c2128;" data-v-6c48fca3></span>#1c2128</td><td data-v-6c48fca3>Raised card / dialog / input</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-text</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#14171c;" data-v-6c48fca3></span>#14171c</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#e8eaed;" data-v-6c48fca3></span>#e8eaed</td><td data-v-6c48fca3>Body text / headings</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-text-muted</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#6b7280;" data-v-6c48fca3></span>#6b7280</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#9aa0a8;" data-v-6c48fca3></span>#9aa0a8</td><td data-v-6c48fca3>Secondary text / placeholder</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-line</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#e7eaee;" data-v-6c48fca3></span>#e7eaee</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#2d333b;" data-v-6c48fca3></span>#2d333b</td><td data-v-6c48fca3>Divider / card border</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-selected</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#00000014;" data-v-6c48fca3></span>#00000014</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#ffffff14;" data-v-6c48fca3></span>#ffffff14</td><td data-v-6c48fca3>Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-hover</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0000000d;" data-v-6c48fca3></span>#0000000d</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#ffffff0d;" data-v-6c48fca3></span>#ffffff0d</td><td data-v-6c48fca3>Row hover wash — lighter than the selected fill (hover &lt; selected); translucent, sits on any surface</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-media-alpha-bg-1</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#858585;" data-v-6c48fca3></span>≈#858585</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#676b72;" data-v-6c48fca3></span>≈#676b72</td><td data-v-6c48fca3>Checkerboard square A of the <code data-v-6c48fca3>&lt;img&gt;</code> alpha canvas — color-mix of <code data-v-6c48fca3>--color-bg</code>/<code data-v-6c48fca3>--color-text</code> (52/48); applied via <code data-v-6c48fca3>--media-alpha-canvas</code> (16px period)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-media-alpha-bg-2</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#6b6b6b;" data-v-6c48fca3></span>≈#6b6b6b</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#7a7e85;" data-v-6c48fca3></span>≈#7a7e85</td><td data-v-6c48fca3>Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-sidebar-bg</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fbfaf9;" data-v-6c48fca3></span>#fbfaf9</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#181817;" data-v-6c48fca3></span>#181817</td><td data-v-6c48fca3>Sidebar surface — one step off <code data-v-6c48fca3>--color-bg</code> so the session column reads as its own plane</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-accent</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#1783ff;" data-v-6c48fca3></span>#1783ff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#58a6ff;" data-v-6c48fca3></span>#58a6ff</td><td data-v-6c48fca3>Primary action / link / focus</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-success</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0e7a38;" data-v-6c48fca3></span>#0e7a38</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#3fb950;" data-v-6c48fca3></span>#3fb950</td><td data-v-6c48fca3>Success / pass</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-warning</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#a9610a;" data-v-6c48fca3></span>#a9610a</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#d29922;" data-v-6c48fca3></span>#d29922</td><td data-v-6c48fca3>Warning / pending</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--color-danger</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#c0392b;" data-v-6c48fca3></span>#c0392b</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#f85149;" data-v-6c48fca3></span>#f85149</td><td data-v-6c48fca3>Danger / error / abort</td></tr></tbody></table><h4 class="mini" data-v-6c48fca3>Surface usage</h4><p data-v-6c48fca3>The four surface layers each have a role — choose by &quot;raised layer / default flat layer / sunken layer / page background&quot;, and avoid treating <code data-v-6c48fca3>--p-surface-raised</code> as a universal background.</p><table class="dt" data-v-6c48fca3><thead data-v-6c48fca3><tr data-v-6c48fca3><th data-v-6c48fca3>Token</th><th data-v-6c48fca3>Light</th><th data-v-6c48fca3>Dark</th><th data-v-6c48fca3>Usage</th></tr></thead><tbody data-v-6c48fca3><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-surface-raised</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#1c2128;" data-v-6c48fca3></span>#1c2128</td><td data-v-6c48fca3>Raised card / dialog / input (raised layer)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-surface</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fafbfc;" data-v-6c48fca3></span>#fafbfc</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#161b22;" data-v-6c48fca3></span>#161b22</td><td data-v-6c48fca3>Panel / sidebar / card head (default flat layer)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-surface-sunken</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#f3f5f8;" data-v-6c48fca3></span>#f3f5f8</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0d1117;" data-v-6c48fca3></span>#0d1117</td><td data-v-6c48fca3>Code block / inline input / recessed area (sunken layer)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-bg</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#fff;" data-v-6c48fca3></span>#ffffff</td><td class="val" data-v-6c48fca3><span class="swatch" style="background:#0d1117;" data-v-6c48fca3></span>#0d1117</td><td data-v-6c48fca3>Page background</td></tr></tbody></table><h4 class="mini" data-v-6c48fca3>Focus ring</h4><p data-v-6c48fca3>All focusable controls (button, input, link, menu item, switch, checkbox) use the focus-ring token uniformly; do not hand-write a <code data-v-6c48fca3>box-shadow</code> focus ring.</p><table class="dt" data-v-6c48fca3><thead data-v-6c48fca3><tr data-v-6c48fca3><th data-v-6c48fca3>Token</th><th data-v-6c48fca3>Value</th><th data-v-6c48fca3>Usage</th></tr></thead><tbody data-v-6c48fca3><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-focus-ring</td><td class="val" data-v-6c48fca3>0 0 0 3px var(--p-accent-soft)</td><td data-v-6c48fca3>Default focus ring (link, menu item, switch, checkbox)</td></tr><tr data-v-6c48fca3><td class="tk" data-v-6c48fca3>--p-focus-ring-strong</td><td class="val" data-v-6c48fca3>0 0 0 3px var(--p-accent-soft), 0 0 0 1px var(--p-accent)</td><td data-v-6c48fca3>Strong focus ring (button, primary action)</td></tr></tbody></table><h4 class="mini" data-v-6c48fca3>Text selection</h4><p data-v-6c48fca3>The text-selection color uses <code data-v-6c48fca3>--p-selection</code> uniformly (light <code data-v-6c48fca3>rgba(23,131,255,.18)</code> / dark <code data-v-6c48fca3>rgba(88,166,255,.32)</code>), applied by the global <code data-v-6c48fca3>::selection</code> rule; do not set a separate highlight background.</p><h4 class="mini" data-v-6c48fca3>Disabled state</h4><p data-v-6c48fca3>All disabled controls use <code data-v-6c48fca3>opacity:.5</code> + <code data-v-6c48fca3>cursor:not-allowed</code> uniformly; do not separately grey out or recolor.</p><h3 class="sub" data-v-6c48fca3>Font families</h3><p data-v-6c48fca3>Dimi Web uses two font families: <b data-v-6c48fca3>--font-ui</b> (UI and body, Inter first) and <b data-v-6c48fca3>--font-mono</b> (code and monospace). Components always reference the variables; do not hard-code font names.</p><h4 class="mini" data-v-6c48fca3>--font-ui · UI &amp; body (Inter first)</h4><p data-v-6c48fca3>Body and UI use self-hosted Inter as the primary face. CJK and platform system UI fonts sit late in the fallback chain so Latin glyphs resolve to Inter while Chinese text can fall through to native CJK fonts:</p><div class="code" data-v-6c48fca3><div class="code-bar" data-v-6c48fca3><span class="d" data-v-6c48fca3></span><span class="d" data-v-6c48fca3></span><span class="d" data-v-6c48fca3></span><span class="fn" data-v-6c48fca3>--font-ui</span></div><pre data-v-6c48fca3>--font-ui: &quot;Inter Variable&quot;, &quot;Inter&quot;, &quot;Helvetica Neue&quot;, Arial,
       &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Noto Sans SC&quot;,
       -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;,
       Roboto, Ubuntu, sans-serif,

package/dist-web/assets/{Tooltip-DsL7mF2H.js → Tooltip-S8S-9806.js}

@@ -1 +1 @@
-import{bQ as A,M as H,aU as b,bE as V,az as J,aL as O,s as Q,v as R,I as F,bJ as G,bL as K,aw as L,H as W,bb as Z,bB as ee,g as te,au as le,T as ae,as as B,bR as ne}from"./index-DKIJmNQn.js";var k=(h,E,e)=>new Promise((o,p)=>{var i=a=>{try{d(e.next(a))}catch(c){p(c)}},y=a=>{try{d(e.throw(a))}catch(c){p(c)}},d=a=>a.done?o(a.value):Promise.resolve(a.value).then(i,y);d((e=e.apply(h,E)).next())});const oe=["id"],ie=["data-placement"],ue=A(H({__name:"Tooltip",props:{visible:{type:Boolean},anchorEl:{},content:{},placement:{},offset:{},originX:{},originY:{},id:{},isDark:{type:[Boolean,null]}},setup(h){var E;const e=h,o=b(null),p=b(null),i=b({transform:"translate3d(0px, 0px, 0px)",left:"0px",top:"0px"}),y=b({}),d=b((E=e.placement)!=null?E:"top"),a=b(!1);let c=null,$=null,T=null,C=null,w=null,s=0;function X(){return C?Promise.resolve(C):(w||(w=ne(()=>import("./floating-ui.dom-xGUaHE3m.js"),[]).then(l=>(C=l,l)).catch(l=>{throw w=null,l})),w)}function D(){c&&(c(),c=null),$=null,T=null}function P(l){return k(this,null,function*(){const t=e.anchorEl,n=o.value;if(!e.visible||!t||!n||$===t&&T===n)return;const{autoUpdate:r}=yield X();l()&&e.visible&&e.anchorEl===t&&o.value===n&&(D(),$=t,T=n,c=r(t,n,()=>{N().catch(()=>{_()})}))})}function N(){return k(this,null,function*(){var l,t;const n=e.anchorEl,r=o.value;if(!e.visible||!n||!r)return!1;const{arrow:u,computePosition:m,flip:v,offset:f,shift:x}=yield X();if(!e.visible||e.anchorEl!==n||o.value!==r)return!1;const g=[f((l=e.offset)!=null?l:6),v(),x({padding:6}),...p.value?[u({element:p.value,padding:4})]:[]],{x:S,y:j,placement:Y,middlewareData:z}=yield m(n,r,{placement:(t=e.placement)!=null?t:"top",middleware:g,strategy:"fixed"});if(!e.visible||e.anchorEl!==n||o.value!==r)return!1;if(i.value.transform=`translate3d(${Math.round(S)}px, ${Math.round(j)}px, 0)`,i.value.left="0px",i.value.top="0px",d.value=Y,z.arrow&&p.value){const{x:I,y:U}=z.arrow,q={top:"bottom",bottom:"top",left:"right",right:"left"}[Y.split("-")[0]];y.value={left:I!=null?`${I}px`:"",top:U!=null?`${U}px`:"",[q]:"-3px"}}return!0})}function _(){var l,t;const n=e.anchorEl,r=o.value;if(!n||!r)return!1;const u=n.getBoundingClientRect(),m=r.getBoundingClientRect(),v=(l=e.offset)!=null?l:6,f=(t=e.placement)!=null?t:"top";let x=u.left,g=u.top;return f==="bottom"?g=u.bottom+v:f==="left"?x=u.left-m.width-v:f==="right"?x=u.right+v:g=u.top-m.height-v,i.value.transform=`translate3d(${Math.round(Math.max(0,x))}px, ${Math.round(Math.max(0,g))}px, 0)`,i.value.left="0px",i.value.top="0px",d.value=f,y.value={},!0}V(()=>e.visible,l=>k(null,null,function*(){const t=++s;if(l){if(a.value=!1,yield B(),t!==s||!e.visible)return;if(e.anchorEl&&o.value)try{const n=e.anchorEl,r=o.value,u=n.getBoundingClientRect();if(!(yield N())||t!==s||!e.visible||e.anchorEl!==n||o.value!==r)return;const m=i.value.transform;if(e.originX!=null&&e.originY!=null){const v=Math.abs(Number(e.originX)-u.left),f=Math.abs(Number(e.originY)-u.top);if(Math.hypot(v,f)>120){if(i.value.transform=`translate3d(${Math.round(e.originX)}px, ${Math.round(e.originY)}px, 0)`,yield B(),t!==s||!e.visible||(a.value=!0,yield B(),t!==s||!e.visible))return;i.value.transform=m}else a.value=!0}else a.value=!0;yield P(()=>t===s)}catch{if(t!==s||!e.visible)return;if(a.value=_(),e.anchorEl&&o.value)try{yield P(()=>t===s)}catch{}}else a.value=!0}else a.value=!1,D()}));let M=0;return V([()=>e.anchorEl,()=>e.placement,()=>e.content],()=>k(null,null,function*(){const l=++M;if(e.visible&&e.anchorEl&&o.value){if(yield B(),l!==M||!e.visible||!e.anchorEl||!o.value)return;try{const t=yield N();if(l!==M||!e.visible||!e.anchorEl||!o.value)return;t||_()}catch{_()}yield P(()=>l===M)}})),J(()=>{s+=1,D()}),(l,t)=>(O(),Q(ae,{to:"body"},[R("div",{class:le(["markstream-vue",{dark:h.isDark}])},[F(te,{name:"tooltip",appear:""},{default:G(()=>[K(R("div",{id:e.id,ref_key:"tooltip",ref:o,style:L({position:"fixed",left:i.value.left,top:i.value.top,transform:i.value.transform,visibility:a.value?"visible":"hidden",pointerEvents:a.value?void 0:"none"}),class:"tooltip-element",role:"tooltip"},[W(Z(h.content)+" ",1),R("div",{ref_key:"arrowEl",ref:p,class:"tooltip-arrow","data-placement":d.value,style:L(y.value)},null,12,ie)],12,oe),[[ee,h.visible]])]),_:1})],2)]))}}),[["__scopeId","data-v-c606ee4c"]]);export{ue as default};
+import{bQ as A,M as H,aU as b,bE as V,az as J,aL as O,s as Q,v as R,I as F,bJ as G,bL as K,aw as L,H as W,bb as Z,bB as ee,g as te,au as le,T as ae,as as B,bR as ne}from"./index-Ia-ZUO2Z.js";var k=(h,E,e)=>new Promise((o,p)=>{var i=a=>{try{d(e.next(a))}catch(c){p(c)}},y=a=>{try{d(e.throw(a))}catch(c){p(c)}},d=a=>a.done?o(a.value):Promise.resolve(a.value).then(i,y);d((e=e.apply(h,E)).next())});const oe=["id"],ie=["data-placement"],ue=A(H({__name:"Tooltip",props:{visible:{type:Boolean},anchorEl:{},content:{},placement:{},offset:{},originX:{},originY:{},id:{},isDark:{type:[Boolean,null]}},setup(h){var E;const e=h,o=b(null),p=b(null),i=b({transform:"translate3d(0px, 0px, 0px)",left:"0px",top:"0px"}),y=b({}),d=b((E=e.placement)!=null?E:"top"),a=b(!1);let c=null,$=null,T=null,C=null,w=null,s=0;function X(){return C?Promise.resolve(C):(w||(w=ne(()=>import("./floating-ui.dom-xGUaHE3m.js"),[]).then(l=>(C=l,l)).catch(l=>{throw w=null,l})),w)}function D(){c&&(c(),c=null),$=null,T=null}function P(l){return k(this,null,function*(){const t=e.anchorEl,n=o.value;if(!e.visible||!t||!n||$===t&&T===n)return;const{autoUpdate:r}=yield X();l()&&e.visible&&e.anchorEl===t&&o.value===n&&(D(),$=t,T=n,c=r(t,n,()=>{N().catch(()=>{_()})}))})}function N(){return k(this,null,function*(){var l,t;const n=e.anchorEl,r=o.value;if(!e.visible||!n||!r)return!1;const{arrow:u,computePosition:m,flip:v,offset:f,shift:x}=yield X();if(!e.visible||e.anchorEl!==n||o.value!==r)return!1;const g=[f((l=e.offset)!=null?l:6),v(),x({padding:6}),...p.value?[u({element:p.value,padding:4})]:[]],{x:S,y:j,placement:Y,middlewareData:z}=yield m(n,r,{placement:(t=e.placement)!=null?t:"top",middleware:g,strategy:"fixed"});if(!e.visible||e.anchorEl!==n||o.value!==r)return!1;if(i.value.transform=`translate3d(${Math.round(S)}px, ${Math.round(j)}px, 0)`,i.value.left="0px",i.value.top="0px",d.value=Y,z.arrow&&p.value){const{x:I,y:U}=z.arrow,q={top:"bottom",bottom:"top",left:"right",right:"left"}[Y.split("-")[0]];y.value={left:I!=null?`${I}px`:"",top:U!=null?`${U}px`:"",[q]:"-3px"}}return!0})}function _(){var l,t;const n=e.anchorEl,r=o.value;if(!n||!r)return!1;const u=n.getBoundingClientRect(),m=r.getBoundingClientRect(),v=(l=e.offset)!=null?l:6,f=(t=e.placement)!=null?t:"top";let x=u.left,g=u.top;return f==="bottom"?g=u.bottom+v:f==="left"?x=u.left-m.width-v:f==="right"?x=u.right+v:g=u.top-m.height-v,i.value.transform=`translate3d(${Math.round(Math.max(0,x))}px, ${Math.round(Math.max(0,g))}px, 0)`,i.value.left="0px",i.value.top="0px",d.value=f,y.value={},!0}V(()=>e.visible,l=>k(null,null,function*(){const t=++s;if(l){if(a.value=!1,yield B(),t!==s||!e.visible)return;if(e.anchorEl&&o.value)try{const n=e.anchorEl,r=o.value,u=n.getBoundingClientRect();if(!(yield N())||t!==s||!e.visible||e.anchorEl!==n||o.value!==r)return;const m=i.value.transform;if(e.originX!=null&&e.originY!=null){const v=Math.abs(Number(e.originX)-u.left),f=Math.abs(Number(e.originY)-u.top);if(Math.hypot(v,f)>120){if(i.value.transform=`translate3d(${Math.round(e.originX)}px, ${Math.round(e.originY)}px, 0)`,yield B(),t!==s||!e.visible||(a.value=!0,yield B(),t!==s||!e.visible))return;i.value.transform=m}else a.value=!0}else a.value=!0;yield P(()=>t===s)}catch{if(t!==s||!e.visible)return;if(a.value=_(),e.anchorEl&&o.value)try{yield P(()=>t===s)}catch{}}else a.value=!0}else a.value=!1,D()}));let M=0;return V([()=>e.anchorEl,()=>e.placement,()=>e.content],()=>k(null,null,function*(){const l=++M;if(e.visible&&e.anchorEl&&o.value){if(yield B(),l!==M||!e.visible||!e.anchorEl||!o.value)return;try{const t=yield N();if(l!==M||!e.visible||!e.anchorEl||!o.value)return;t||_()}catch{_()}yield P(()=>l===M)}})),J(()=>{s+=1,D()}),(l,t)=>(O(),Q(ae,{to:"body"},[R("div",{class:le(["markstream-vue",{dark:h.isDark}])},[F(te,{name:"tooltip",appear:""},{default:G(()=>[K(R("div",{id:e.id,ref_key:"tooltip",ref:o,style:L({position:"fixed",left:i.value.left,top:i.value.top,transform:i.value.transform,visibility:a.value?"visible":"hidden",pointerEvents:a.value?void 0:"none"}),class:"tooltip-element",role:"tooltip"},[W(Z(h.content)+" ",1),R("div",{ref_key:"arrowEl",ref:p,class:"tooltip-arrow","data-placement":d.value,style:L(y.value)},null,12,ie)],12,oe),[[ee,h.visible]])]),_:1})],2)]))}}),[["__scopeId","data-v-c606ee4c"]]);export{ue as default};

package/dist-web/assets/{arc-CWKkAytd.js → arc-CJvKR1oC.js}

@@ -1 +1 @@
-import{W as ln,X as an,Y as B,$ as q,a0 as Y,a1 as un,a2 as y,a3 as tn,a4 as G,a5 as _,a6 as rn,a7 as o,a8 as on,a9 as sn,aa as fn}from"./mermaid.core-oS_owI3c.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,I,D,v,A,$,a){var O=I-l,i=D-h,n=$-v,d=a-A,u=d*O-n*i;if(!(u*u<y))return u=(n*(h-A)-d*(l-v))/u,[l+u*O,h+u*i]}function N(l,h,I,D,v,A,$){var a=l-I,O=h-D,i=($?A:-A)/G(a*a+O*O),n=i*O,d=-i*a,u=l+n,s=h+d,f=I+n,c=D+d,j=(u+f)/2,t=(s+c)/2,m=f-u,g=c-s,R=m*m+g*g,T=v-A,P=u*c-f*s,S=(g<0?-1:1)*G(on(0,T*T*R-P*P)),W=(P*g-m*S)/R,X=(-P*m-g*S)/R,w=(P*g+m*S)/R,p=(-P*m+g*S)/R,x=W-j,e=X-t,r=w-j,z=p-t;return x*x+e*e>r*r+z*z&&(W=w,X=p),{cx:W,cy:X,x01:-n,y01:-d,x11:W*(v/T-1),y11:X*(v/T-1)}}function hn(){var l=cn,h=yn,I=Y(0),D=null,v=gn,A=dn,$=mn,a=null,O=ln(i);function i(){var n,d,u=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-un,c=A.apply(this,arguments)-un,j=rn(c-f),t=c>f;if(a||(a=n=O()),s<u&&(d=s,s=u,u=d),!(s>y))a.moveTo(0,0);else if(j>tn-y)a.moveTo(s*B(f),s*q(f)),a.arc(0,0,s,f,c,!t),u>y&&(a.moveTo(u*B(c),u*q(c)),a.arc(0,0,u,c,f,t));else{var m=f,g=c,R=f,T=c,P=j,S=j,W=$.apply(this,arguments)/2,X=W>y&&(D?+D.apply(this,arguments):G(u*u+s*s)),w=_(rn(s-u)/2,+I.apply(this,arguments)),p=w,x=w,e,r;if(X>y){var z=sn(X/u*q(W)),H=sn(X/s*q(W));(P-=z*2)>y?(z*=t?1:-1,R+=z,T-=z):(P=0,R=T=(f+c)/2),(S-=H*2)>y?(H*=t?1:-1,m+=H,g-=H):(S=0,m=g=(f+c)/2)}var C=s*B(m),F=s*q(m),J=u*B(T),K=u*q(T);if(w>y){var L=s*B(g),M=s*q(g),Q=u*B(R),U=u*q(R),E;if(j<an)if(E=pn(C,F,Q,U,L,M,J,K)){var V=C-E[0],Z=F-E[1],k=L-E[0],b=M-E[1],nn=1/q(fn((V*k+Z*b)/(G(V*V+Z*Z)*G(k*k+b*b)))/2),en=G(E[0]*E[0]+E[1]*E[1]);p=_(w,(u-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}S>y?x>y?(e=N(Q,U,C,F,s,x,t),r=N(L,M,J,K,s,x,t),a.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),a.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(a.moveTo(C,F),a.arc(0,0,s,m,g,!t)):a.moveTo(C,F),!(u>y)||!(P>y)?a.lineTo(J,K):p>y?(e=N(J,K,L,M,u,-p,t),r=N(C,F,Q,U,u,-p,t),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,u,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),a.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):a.arc(0,0,u,T,R,t)}if(a.closePath(),n)return a=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-an/2;return[B(d)*n,q(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:Y(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:Y(+n),i):h},i.cornerRadius=function(n){return arguments.length?(I=typeof n=="function"?n:Y(+n),i):I},i.padRadius=function(n){return arguments.length?(D=n==null?null:typeof n=="function"?n:Y(+n),i):D},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:Y(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:Y(+n),i):A},i.padAngle=function(n){return arguments.length?($=typeof n=="function"?n:Y(+n),i):$},i.context=function(n){return arguments.length?(a=n??null,i):a},i}export{hn as d};
+import{W as ln,X as an,Y as B,$ as q,a0 as Y,a1 as un,a2 as y,a3 as tn,a4 as G,a5 as _,a6 as rn,a7 as o,a8 as on,a9 as sn,aa as fn}from"./mermaid.core-B_k0q1Z5.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,I,D,v,A,$,a){var O=I-l,i=D-h,n=$-v,d=a-A,u=d*O-n*i;if(!(u*u<y))return u=(n*(h-A)-d*(l-v))/u,[l+u*O,h+u*i]}function N(l,h,I,D,v,A,$){var a=l-I,O=h-D,i=($?A:-A)/G(a*a+O*O),n=i*O,d=-i*a,u=l+n,s=h+d,f=I+n,c=D+d,j=(u+f)/2,t=(s+c)/2,m=f-u,g=c-s,R=m*m+g*g,T=v-A,P=u*c-f*s,S=(g<0?-1:1)*G(on(0,T*T*R-P*P)),W=(P*g-m*S)/R,X=(-P*m-g*S)/R,w=(P*g+m*S)/R,p=(-P*m+g*S)/R,x=W-j,e=X-t,r=w-j,z=p-t;return x*x+e*e>r*r+z*z&&(W=w,X=p),{cx:W,cy:X,x01:-n,y01:-d,x11:W*(v/T-1),y11:X*(v/T-1)}}function hn(){var l=cn,h=yn,I=Y(0),D=null,v=gn,A=dn,$=mn,a=null,O=ln(i);function i(){var n,d,u=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-un,c=A.apply(this,arguments)-un,j=rn(c-f),t=c>f;if(a||(a=n=O()),s<u&&(d=s,s=u,u=d),!(s>y))a.moveTo(0,0);else if(j>tn-y)a.moveTo(s*B(f),s*q(f)),a.arc(0,0,s,f,c,!t),u>y&&(a.moveTo(u*B(c),u*q(c)),a.arc(0,0,u,c,f,t));else{var m=f,g=c,R=f,T=c,P=j,S=j,W=$.apply(this,arguments)/2,X=W>y&&(D?+D.apply(this,arguments):G(u*u+s*s)),w=_(rn(s-u)/2,+I.apply(this,arguments)),p=w,x=w,e,r;if(X>y){var z=sn(X/u*q(W)),H=sn(X/s*q(W));(P-=z*2)>y?(z*=t?1:-1,R+=z,T-=z):(P=0,R=T=(f+c)/2),(S-=H*2)>y?(H*=t?1:-1,m+=H,g-=H):(S=0,m=g=(f+c)/2)}var C=s*B(m),F=s*q(m),J=u*B(T),K=u*q(T);if(w>y){var L=s*B(g),M=s*q(g),Q=u*B(R),U=u*q(R),E;if(j<an)if(E=pn(C,F,Q,U,L,M,J,K)){var V=C-E[0],Z=F-E[1],k=L-E[0],b=M-E[1],nn=1/q(fn((V*k+Z*b)/(G(V*V+Z*Z)*G(k*k+b*b)))/2),en=G(E[0]*E[0]+E[1]*E[1]);p=_(w,(u-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}S>y?x>y?(e=N(Q,U,C,F,s,x,t),r=N(L,M,J,K,s,x,t),a.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),a.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(a.moveTo(C,F),a.arc(0,0,s,m,g,!t)):a.moveTo(C,F),!(u>y)||!(P>y)?a.lineTo(J,K):p>y?(e=N(J,K,L,M,u,-p,t),r=N(C,F,Q,U,u,-p,t),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(a.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),a.arc(0,0,u,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),a.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):a.arc(0,0,u,T,R,t)}if(a.closePath(),n)return a=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-an/2;return[B(d)*n,q(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:Y(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:Y(+n),i):h},i.cornerRadius=function(n){return arguments.length?(I=typeof n=="function"?n:Y(+n),i):I},i.padRadius=function(n){return arguments.length?(D=n==null?null:typeof n=="function"?n:Y(+n),i):D},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:Y(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:Y(+n),i):A},i.padAngle=function(n){return arguments.length?($=typeof n=="function"?n:Y(+n),i):$},i.context=function(n){return arguments.length?(a=n??null,i):a},i}export{hn as d};