@moonshot-ai/kimi-code 0.35.0 → 0.36.0

package/dist-web/assets/{CodeBlockNode-BAtAs_qm.js → CodeBlockNode-Do73mQqg.js}

@@ -1,5 +1,5 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-DzfhniX8.js","assets/index-D-7nOosq.js","assets/index-DGHD7Bg9.css"])))=>i.map(i=>d[i]);
-import{bR as xi,cb as Si,bQ as zo,M as vl,bl as Ci,af as dl,bY as Mi,cc as Bi,b$ as ml,aU as O,c0 as Ei,c1 as Fi,c2 as Pi,a0 as Co,aD as Ho,bE as ae,az as Li,cd as hn,c8 as vt,aI as No,aL as G,s as bn,aw as It,au as mt,bk as V,ce as Mo,u as oe,I as To,A as Oi,bJ as Ut,aY as pt,bL as cl,v as b,t as ye,bB as fl,bb as Me,q as k,b7 as $i,cf as zi,cg as gn,ch as Hi,ci as Ni,cj as Ti,ck as Ri,as as j,cl as Bo,cm as Di,cn as Ai,co as jt,cp as Eo,bO as Ro,T as ji,G as qi,F as Fo,g as Wi,c7 as _i,b_ as Ii}from"./index-D-7nOosq.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 Po=!1,qt=null,Wt=null,_t=null;function Ui(){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 xi(()=>import("./index-DzfhniX8.js"),__vite__mapDeps([0,1,2]))),!Wt)return null}catch{return null}try{return yield(function(x){return wn(this,null,function*(){return Po?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()),Po=!0}).finally(()=>{qt=null}),qt)})})(Wt),Si(),Wt}catch{return null}});try{return yield _t}finally{_t=null}})}var Vi=Object.defineProperty,Gi=Object.defineProperties,Ji=Object.getOwnPropertyDescriptors,Lo=Object.getOwnPropertySymbols,Yi=Object.prototype.hasOwnProperty,Qi=Object.prototype.propertyIsEnumerable,Oo=(x,M,w)=>M in x?Vi(x,M,{enumerable:!0,configurable:!0,writable:!0,value:w}):x[M]=w,I=(x,M)=>{for(var w in M||(M={}))Yi.call(M,w)&&Oo(x,w,M[w]);if(Lo)for(var w of Lo(M))Qi.call(M,w)&&Oo(x,w,M[w]);return x},Ce=(x,M)=>Gi(x,Ji(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 Xi={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)]"},Ki={class:"flex items-center gap-0.5"},Zi=["aria-label"],er={class:"code-diff-stat removed"},tr={class:"code-diff-stat added"},nr=["aria-label"],lr={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},or={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},ir=["aria-pressed"],rr={key:3,class:"relative"},ar=["aria-expanded"],ur=["disabled"],sr=["disabled"],dr=["disabled"],cr={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},fr={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},vr={class:"code-loading-placeholder"},mr={class:"sr-only","aria-live":"polite",role:"status"},pr=vl({__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=O(!1),we=O(null),be=O(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,$;const yt=Y.target;(f=we.value)!=null&&f.contains(yt)||($=be.value)!=null&&$.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}=ml(),ht=k(()=>w.showTooltips!==!1);function Ge(Y,f){ht.value&&_i(Y.currentTarget,f,"top",!1,void 0,w.isDark)}function Be(){ht.value&&vt()}function gt(Y){Ge(Y,w.copyText?N("common.copied")||"Copied":N("common.copy")||"Copy")}const pl=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(Fo,null,[w.showHeader?(G(),oe("div",Xi,[pt(Y.$slots,"header-left"),pt(Y.$slots,"header-right",{},()=>[b("div",Ki,[x.diffStats?(G(),oe("div",{key:0,class:"code-diff-stats","aria-label":x.diffStatsAriaLabel},[b("span",er,"-"+Me(x.diffStats.removed),1),b("span",tr,"+"+Me(x.diffStats.added),1)],8,Zi)):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]=$=>te("copy")),onMouseenter:f[1]||(f[1]=$=>gt($)),onFocus:f[2]||(f[2]=$=>gt($)),onMouseleave:Be,onBlur:Be},[x.copyText?(G(),oe("svg",or,[...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",lr,[...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,nr)):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]=$=>te("toggleCollapse")),onMouseenter:f[4]||(f[4]=$=>Ge($,x.isCollapsed?V(N)("common.expand")||"Expand":V(N)("common.collapse")||"Collapse")),onFocus:f[5]||(f[5]=$=>Ge($,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,ir)):ye("",!0),ie.value?(G(),oe("div",rr,[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:Ro(r,["stop"]),onMouseenter:f[6]||(f[6]=$=>Ge($,V(N)("common.more")||"More")),onFocus:f[7]||(f[7]=$=>Ge($,V(N)("common.more")||"More")),onMouseleave:Be,onBlur:Be},[...f[16]||(f[16]=[qi('<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,ar),To(Wi,{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(Fo,{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:pl.value,onClick:f[8]||(f[8]=$=>{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,ur),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]=$=>{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,sr),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]=$=>{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,dr)],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]=$=>{E(),te("toggleExpand")})},[x.isExpanded?(G(),oe("svg",cr,[...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",fr,[...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]=$=>{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),cl(b("div",{class:mt(["code-block-shell-content",{"code-block-shell-content--collapsed":x.isCollapsed}])},[pt(Y.$slots,"default")],2),[[fl,!!x.stream||!x.loading]]),cl(b("div",vr,[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),[[fl,!x.stream&&x.loading]]),b("span",mr,Me(x.copyText?V(N)("common.copied")||"Copied":""),1)],64))}}),hr={class:"html-preview-frame__header"},gr={class:"html-preview-frame__title"},yr={class:"html-preview-frame__label"},wr=["sandbox","srcdoc"],br=zo(vl({__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}=ml(),we=k(()=>{const E=M.code||"",z=E.trim().toLowerCase();return z.startsWith("<!doctype")||z.startsWith("<html")||z.startsWith("<body")?E:`<!doctype html>
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-DCogO9ha.js","assets/index-Bxn5yOTB.js","assets/index-DGHD7Bg9.css"])))=>i.map(i=>d[i]);
+import{bR as xi,cb as Si,bQ as zo,M as vl,bl as Ci,af as dl,bY as Mi,cc as Bi,b$ as ml,aU as O,c0 as Ei,c1 as Fi,c2 as Pi,a0 as Co,aD as Ho,bE as ae,az as Li,cd as hn,c8 as vt,aI as No,aL as G,s as bn,aw as It,au as mt,bk as V,ce as Mo,u as oe,I as To,A as Oi,bJ as Ut,aY as pt,bL as cl,v as b,t as ye,bB as fl,bb as Me,q as k,b7 as $i,cf as zi,cg as gn,ch as Hi,ci as Ni,cj as Ti,ck as Ri,as as j,cl as Bo,cm as Di,cn as Ai,co as jt,cp as Eo,bO as Ro,T as ji,G as qi,F as Fo,g as Wi,c7 as _i,b_ as Ii}from"./index-Bxn5yOTB.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 Po=!1,qt=null,Wt=null,_t=null;function Ui(){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 xi(()=>import("./index-DCogO9ha.js"),__vite__mapDeps([0,1,2]))),!Wt)return null}catch{return null}try{return yield(function(x){return wn(this,null,function*(){return Po?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()),Po=!0}).finally(()=>{qt=null}),qt)})})(Wt),Si(),Wt}catch{return null}});try{return yield _t}finally{_t=null}})}var Vi=Object.defineProperty,Gi=Object.defineProperties,Ji=Object.getOwnPropertyDescriptors,Lo=Object.getOwnPropertySymbols,Yi=Object.prototype.hasOwnProperty,Qi=Object.prototype.propertyIsEnumerable,Oo=(x,M,w)=>M in x?Vi(x,M,{enumerable:!0,configurable:!0,writable:!0,value:w}):x[M]=w,I=(x,M)=>{for(var w in M||(M={}))Yi.call(M,w)&&Oo(x,w,M[w]);if(Lo)for(var w of Lo(M))Qi.call(M,w)&&Oo(x,w,M[w]);return x},Ce=(x,M)=>Gi(x,Ji(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 Xi={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)]"},Ki={class:"flex items-center gap-0.5"},Zi=["aria-label"],er={class:"code-diff-stat removed"},tr={class:"code-diff-stat added"},nr=["aria-label"],lr={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},or={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},ir=["aria-pressed"],rr={key:3,class:"relative"},ar=["aria-expanded"],ur=["disabled"],sr=["disabled"],dr=["disabled"],cr={key:0,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},fr={key:1,xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"1em",height:"1em",viewBox:"0 0 24 24",class:"action-icon"},vr={class:"code-loading-placeholder"},mr={class:"sr-only","aria-live":"polite",role:"status"},pr=vl({__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=O(!1),we=O(null),be=O(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,$;const yt=Y.target;(f=we.value)!=null&&f.contains(yt)||($=be.value)!=null&&$.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}=ml(),ht=k(()=>w.showTooltips!==!1);function Ge(Y,f){ht.value&&_i(Y.currentTarget,f,"top",!1,void 0,w.isDark)}function Be(){ht.value&&vt()}function gt(Y){Ge(Y,w.copyText?N("common.copied")||"Copied":N("common.copy")||"Copy")}const pl=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(Fo,null,[w.showHeader?(G(),oe("div",Xi,[pt(Y.$slots,"header-left"),pt(Y.$slots,"header-right",{},()=>[b("div",Ki,[x.diffStats?(G(),oe("div",{key:0,class:"code-diff-stats","aria-label":x.diffStatsAriaLabel},[b("span",er,"-"+Me(x.diffStats.removed),1),b("span",tr,"+"+Me(x.diffStats.added),1)],8,Zi)):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]=$=>te("copy")),onMouseenter:f[1]||(f[1]=$=>gt($)),onFocus:f[2]||(f[2]=$=>gt($)),onMouseleave:Be,onBlur:Be},[x.copyText?(G(),oe("svg",or,[...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",lr,[...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,nr)):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]=$=>te("toggleCollapse")),onMouseenter:f[4]||(f[4]=$=>Ge($,x.isCollapsed?V(N)("common.expand")||"Expand":V(N)("common.collapse")||"Collapse")),onFocus:f[5]||(f[5]=$=>Ge($,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,ir)):ye("",!0),ie.value?(G(),oe("div",rr,[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:Ro(r,["stop"]),onMouseenter:f[6]||(f[6]=$=>Ge($,V(N)("common.more")||"More")),onFocus:f[7]||(f[7]=$=>Ge($,V(N)("common.more")||"More")),onMouseleave:Be,onBlur:Be},[...f[16]||(f[16]=[qi('<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,ar),To(Wi,{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(Fo,{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:pl.value,onClick:f[8]||(f[8]=$=>{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,ur),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]=$=>{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,sr),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]=$=>{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,dr)],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]=$=>{E(),te("toggleExpand")})},[x.isExpanded?(G(),oe("svg",cr,[...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",fr,[...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]=$=>{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),cl(b("div",{class:mt(["code-block-shell-content",{"code-block-shell-content--collapsed":x.isCollapsed}])},[pt(Y.$slots,"default")],2),[[fl,!!x.stream||!x.loading]]),cl(b("div",vr,[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),[[fl,!x.stream&&x.loading]]),b("span",mr,Me(x.copyText?V(N)("common.copied")||"Copied":""),1)],64))}}),hr={class:"html-preview-frame__header"},gr={class:"html-preview-frame__title"},yr={class:"html-preview-frame__label"},wr=["sandbox","srcdoc"],br=zo(vl({__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}=ml(),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-CTUhpkDe.js → DesignSystemView-xF63Uyfo.js}

@@ -1,4 +1,4 @@
-import{M as T,aD as z,aI as q,aL as o,u as i,v as a,G as t,H as d,F as p,aX as w,bb as y,I as c,bk as f,cx as h,cy as B,cz as k,cA as A,cB as M}from"./index-D-7nOosq.js";const I={class:"ds-page"},V={class:"layout"},H={class:"content"},L={class:"content-inner"},E={id:"tokens"},D={class:"icon-sizes"},O={class:"sz"},W={class:"p-ic",style:{width:"14px",height:"14px"},viewBox:"0 0 24 24",fill:"currentColor"},R={class:"sz"},N={class:"p-ic",style:{width:"16px",height:"16px"},viewBox:"0 0 24 24",fill:"currentColor"},U={class:"sz"},P={class:"p-ic",style:{width:"20px",height:"20px"},viewBox:"0 0 24 24",fill:"currentColor"},F={class:"icon-grid"},j={class:"icon-group-label"},K={class:"ic-name"},G={id:"primitives"},_={class:"stage-wrap"},J={class:"stage p"},Q={class:"p-pill",style:{color:"var(--p-warning)"}},Y={class:"stage-wrap"},Z={class:"stage p col"},X={class:"demo-row"},$={class:"p-btn primary disabled"},ee={class:"p-spinner sm",viewBox:"0 0 24 24",style:{"--p-accent":"#fff","--p-line":"rgba(255,255,255,.35)"}},ae={class:"stage-wrap"},te={class:"stage p col"},de={class:"demo-row"},se={class:"stage-wrap"},oe={class:"stage p col",style:{gap:"0",background:"var(--p-surface)",padding:"0","max-width":"300px","align-items":"stretch"}},ie={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},ne={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},le={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},re={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},ce={id:"chat"},ve={class:"stage-wrap"},fe={class:"stage p col"},pe={style:{"max-width":"560px",width:"100%"}},he={class:"stage-wrap"},ue={class:"stage p col",style:{"align-items":"center",background:"#fff"}},ge={class:"p-composer",style:{width:"100%","max-width":"620px"}},be={class:"p-composer-bar"},me={class:"p-composer-left"},we={class:"p-pill",style:{color:"var(--p-warning)"}},ye="/repo",ke=T({__name:"DesignSystemView",emits:["close"],setup(xe,{emit:x}){const C=[{path:"/repo/apps/web/src/components/chat/TurnFilesSummary.vue",added:19,removed:4,hasWrite:!1,statsIncomplete:!1,diff:null},{path:"/repo/apps/web/src/composables/useFilePreview.ts",added:8,removed:1,hasWrite:!1,statsIncomplete:!1,diff:null},{path:"/repo/apps/web/src/components/chatTurnRendering.ts",added:0,removed:0,hasWrite:!0,statsIncomplete:!0,diff:null},{path:"/repo/apps/web/src/lib/toolDiff.ts",added:3,removed:2,hasWrite:!1,statsIncomplete:!1,diff:null}];function u(){}const S=x;function g(){S("close")}let v=null;function b(r){r.key==="Escape"&&g()}return z(()=>{document.addEventListener("keydown",b);const r=Array.prototype.slice.call(document.querySelectorAll('#nav a[href^="#"]')),e=new Map;r.forEach(l=>{const s=l.getAttribute("href");if(!s)return;const m=document.getElementById(s.slice(1));m&&e.set(m,l)});let n=null;v=new IntersectionObserver(l=>{l.forEach(s=>{s.isIntersecting&&(n&&n.classList.remove("active"),n=e.get(s.target)??null,n&&n.classList.add("active"))})},{rootMargin:"-20% 0px -70% 0px",threshold:0}),e.forEach((l,s)=>v.observe(s)),r.length&&r[0].classList.add("active")}),q(()=>{document.removeEventListener("keydown",b),v&&(v.disconnect(),v=null)}),(r,e)=>(o(),i("div",I,[a("div",{class:"ds-topbar"},[a("button",{class:"ds-back",type:"button",onClick:g},"← Back"),e[0]||(e[0]=a("span",{class:"ds-topbar-title"},"Design system",-1))]),a("div",V,[e[44]||(e[44]=t('<aside class="sidebar" data-v-5fe218d3><div class="brand" data-v-5fe218d3><div class="brand-mark" data-v-5fe218d3>K</div><div class="brand-name" data-v-5fe218d3>Kimi Web</div></div><div class="brand-sub" data-v-5fe218d3>Design System · v1.0</div><div class="nav-group" data-v-5fe218d3>Navigate</div><nav class="nav" id="nav" data-v-5fe218d3><a href="#overview" data-v-5fe218d3><span class="num" data-v-5fe218d3>00</span>Overview</a><a href="#principles" data-v-5fe218d3><span class="num" data-v-5fe218d3>01</span>Design Principles</a><a href="#tokens" data-v-5fe218d3><span class="num" data-v-5fe218d3>02</span>Design Tokens</a><a href="#primitives" data-v-5fe218d3><span class="num" data-v-5fe218d3>03</span>Primitives</a><a href="#chat" data-v-5fe218d3><span class="num" data-v-5fe218d3>04</span>Chat Interface</a><a href="#themes" data-v-5fe218d3><span class="num" data-v-5fe218d3>05</span>Theming</a><a href="#rules" data-v-5fe218d3><span class="num" data-v-5fe218d3>06</span>Style Rules</a><a href="#shell" data-v-5fe218d3><span class="num" data-v-5fe218d3>07</span>App Shell &amp; Sidebar</a><a href="#a11y" data-v-5fe218d3><span class="num" data-v-5fe218d3>08</span>Accessibility</a><a href="#dialogs" data-v-5fe218d3><span class="num" data-v-5fe218d3>09</span>Dialogs</a></nav><div class="nav-group" data-v-5fe218d3>Companion output</div><nav class="nav" data-v-5fe218d3><a href="#tokens" data-v-5fe218d3><span class="num" data-v-5fe218d3>↗</span>Token list</a><a href="#primitives" data-v-5fe218d3><span class="num" data-v-5fe218d3>↗</span>Component API</a><a href="#rules" data-v-5fe218d3><span class="num" data-v-5fe218d3>↗</span>Style rules</a></nav></aside>',1)),a("main",H,[a("div",L,[e[42]||(e[42]=t('<section id="overview" data-v-5fe218d3><div class="hero" data-v-5fe218d3><span class="eyebrow" data-v-5fe218d3>● Design System · v1.0</span><h1 data-v-5fe218d3>Kimi Web <span class="grad" data-v-5fe218d3>Design System</span></h1><p class="lead" data-v-5fe218d3> This document defines the visual language and component specification for Kimi 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-5fe218d3><span class="meta-chip" data-v-5fe218d3><span class="dot" data-v-5fe218d3></span> Scope <b data-v-5fe218d3>apps/kimi-web</b></span><span class="meta-chip" data-v-5fe218d3>Component primitives</span><span class="meta-chip" data-v-5fe218d3>Theme <b data-v-5fe218d3>1 set · 4 customizable colors</b></span><span class="meta-chip" data-v-5fe218d3>Light / dark mode</span></div></div><div class="callout info" data-v-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3><b data-v-5fe218d3>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-5fe218d3><div class="sec-head" data-v-5fe218d3><span class="sec-num" data-v-5fe218d3>01</span><h2 class="sec-title" data-v-5fe218d3>Design Principles</h2></div><p class="sec-desc" data-v-5fe218d3> Every UI decision traces back to the following principles. Kimi 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-5fe218d3><li data-v-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>Feedback</b> —— hover / active / focus / loading / success / error all have visible states, and the state language is unified.</li><li data-v-5fe218d3><b data-v-5fe218d3>Breathing room</b> —— Control density with the spacing scale rather than arbitrary pixels; prefer restrained whitespace over cramming controls together.</li><li data-v-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>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-5fe218d3><span class="ico" data-v-5fe218d3>✓</span><div data-v-5fe218d3><b data-v-5fe218d3>Brand tone (the do-not list)</b>: calm, clinical, never exaggerated. <span class="pill red" style="margin:0 4px;" data-v-5fe218d3>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. These are all common tells of AI-generated interfaces (an &quot;AI tell&quot;), deliberately avoided. </div></div><div class="callout info" data-v-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3><b data-v-5fe218d3>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)),a("section",E,[e[7]||(e[7]=t(`<div class="sec-head" data-v-5fe218d3><span class="sec-num" data-v-5fe218d3>02</span><h2 class="sec-title" data-v-5fe218d3>Design Tokens</h2></div><p class="sec-desc" data-v-5fe218d3> Collapse every visual decision into tokens. <b data-v-5fe218d3>Color tokens keep the existing short names and fill out the semantics</b> (lowering migration cost), while <b data-v-5fe218d3>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-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3><b data-v-5fe218d3>Naming convention</b>: <code data-v-5fe218d3>--&lt;category&gt;-&lt;role&gt;-&lt;state&gt;</code>. For example <code data-v-5fe218d3>--color-text-muted</code>, <code data-v-5fe218d3>--radius-md</code>, <code data-v-5fe218d3>--space-4</code>. To reduce churn, the existing short names (<code data-v-5fe218d3>--bg</code> / <code data-v-5fe218d3>--ink</code> / <code data-v-5fe218d3>--line</code> / <code data-v-5fe218d3>--blue</code> …) are kept as <b data-v-5fe218d3>compatibility aliases</b> for one release cycle. </div></div><h3 class="sub" data-v-5fe218d3>Color</h3><p data-v-5fe218d3>Semantic-first, in three layers: <b data-v-5fe218d3>background / text / border</b> + <b data-v-5fe218d3>accent</b> + <b data-v-5fe218d3>status colors</b>. All colors are defined in light / dark pairs, with contrast ≥ 4.5:1.</p><div class="callout info" data-v-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3>The table below shows the <b data-v-5fe218d3>semantic tokens</b>. Each ships a light value in <code data-v-5fe218d3>:root</code> and a dark override in the <code data-v-5fe218d3>data-color-scheme</code> blocks — for example <code data-v-5fe218d3>--color-bg</code> is <code data-v-5fe218d3>#ffffff</code> in light and <code data-v-5fe218d3>#121212</code> in dark; <code data-v-5fe218d3>--color-accent</code> is the brand blue (<code data-v-5fe218d3>#1783ff</code> light / <code data-v-5fe218d3>#1a88ff</code> dark). The <b data-v-5fe218d3>semantic status colors</b> (success / warning / danger / info) are independent palettes, one set each for light / dark.</div></div><div class="palette" data-v-5fe218d3><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#ffffff;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>bg</div><div class="cv" data-v-5fe218d3>#ffffff / #121212</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #1f1f1f</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface-sunken</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #121212</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>well</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #1f1f1f</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface-deep</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #0d0d0d</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#fff;border:0.5px solid rgba(0,0,0,.13);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface-overlay</div><div class="cv" data-v-5fe218d3>#ffffff / rgba(255,255,255,.1)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>selected</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.05) / rgba(255,255,255,.1)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.9);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>fg</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.9) / rgba(255,255,255,.84)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>fg-muted</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.6) / rgba(255,255,255,.56)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.13);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>line</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.13) / rgba(255,255,255,.12)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>subtle</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.05) / rgba(255,255,255,.05)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#1783ff;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>accent (KMBlue)</div><div class="cv" data-v-5fe218d3>#1783ff / #1a88ff</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#e8f3ff;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>accent-soft</div><div class="cv" data-v-5fe218d3>#e8f3ff / rgba(26,136,255,.1)</div></div></div></div><table class="dt" data-v-5fe218d3><thead data-v-5fe218d3><tr data-v-5fe218d3><th data-v-5fe218d3>Token</th><th data-v-5fe218d3>Light</th><th data-v-5fe218d3>Dark</th><th data-v-5fe218d3>Usage</th></tr></thead><tbody data-v-5fe218d3><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#121212;" data-v-5fe218d3></span>#121212</td><td data-v-5fe218d3>Page background</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f5f5f5;" data-v-5fe218d3></span>#f5f5f5</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1f1f1f;" data-v-5fe218d3></span>#1f1f1f</td><td data-v-5fe218d3>Panel / sidebar / card head</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface-raised</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#292929;" data-v-5fe218d3></span>#292929</td><td data-v-5fe218d3>Raised card / dialog / input</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-menu-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.95);" data-v-5fe218d3></span>rgba(255,255,255,.95)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(41,41,41,.95);" data-v-5fe218d3></span>rgba(41,41,41,.95)</td><td data-v-5fe218d3>Floating menu panel — frosted glass over <code data-v-5fe218d3>--p-menu-backdrop</code> blur</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface-overlay</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.1);" data-v-5fe218d3></span>rgba(255,255,255,.1)</td><td data-v-5fe218d3>Field-control fill on raised cards (selects, steppers) — top rung; light tops out at white (the level is carried by the border), dark steps one rung above raised. Floating layers stay at raised</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-well</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f5f5f5;" data-v-5fe218d3></span>#f5f5f5</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1f1f1f;" data-v-5fe218d3></span>#1f1f1f</td><td data-v-5fe218d3>Content well on the page (code blocks, tool-output panels, match/file lists, media thumbnails) — light reuses the sunken recess; dark lifts one rung ABOVE the page, because a true recess (<code data-v-5fe218d3>#121212</code>) vanishes into the page there</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface-deep</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f5f5f5;" data-v-5fe218d3></span>#f5f5f5</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d0d0d;" data-v-5fe218d3></span>#0d0d0d</td><td data-v-5fe218d3>Deep chrome plane one step BELOW the page (panel headers, diff gutters) — dark drops under <code data-v-5fe218d3>--color-bg</code> so chrome framing stays darker than the content it frames</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.9);" data-v-5fe218d3></span>rgba(0,0,0,.9)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.84);" data-v-5fe218d3></span>rgba(255,255,255,.84)</td><td data-v-5fe218d3>Body text / headings</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text-strong</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#000;" data-v-5fe218d3></span>#000000</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;box-shadow:inset 0 0 0 1px #ddd;" data-v-5fe218d3></span>#ffffff</td><td data-v-5fe218d3>Max foreground emphasis — menu-row label &amp; icon on hover</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text-muted</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></span>rgba(0,0,0,.6)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.56);" data-v-5fe218d3></span>rgba(255,255,255,.56)</td><td data-v-5fe218d3>Secondary text / placeholder</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-line</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.13);" data-v-5fe218d3></span>rgba(0,0,0,.13)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.12);" data-v-5fe218d3></span>rgba(255,255,255,.12)</td><td data-v-5fe218d3>Divider / card border</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-subtle</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></span>rgba(0,0,0,.05)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.05);" data-v-5fe218d3></span>rgba(255,255,255,.05)</td><td data-v-5fe218d3>Subtle hairline — tertiary separators below <code data-v-5fe218d3>--color-line</code> (diff-gutter column rules, quiet dividers inside wells)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-selected</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></span>rgba(0,0,0,.05)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.1);" data-v-5fe218d3></span>rgba(255,255,255,.1)</td><td data-v-5fe218d3>Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-hover</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.03);" data-v-5fe218d3></span>rgba(0,0,0,.03)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.05);" data-v-5fe218d3></span>rgba(255,255,255,.05)</td><td data-v-5fe218d3>Row hover wash — lighter than the selected fill (hover &lt; selected); translucent, sits on any surface. The global hover rule: transparent-base controls overlay this f1 wash (hover never darkens — never sunken); filled controls use their own hover token (accent-hover, send-bg-hover)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-inline-code-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.03);" data-v-5fe218d3></span>rgba(0,0,0,.03)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.1);" data-v-5fe218d3></span>rgba(255,255,255,.1)</td><td data-v-5fe218d3>Inline-code chip fill — fills.f1 / fills.f2; dark lifts off any dark surface (sunken == bg there)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-media-alpha-bg-1</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#858585;" data-v-5fe218d3></span>≈#858585</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#76797e;" data-v-5fe218d3></span>≈#76797e</td><td data-v-5fe218d3>Checkerboard square A of the <code data-v-5fe218d3>&lt;img&gt;</code> alpha canvas — color-mix of <code data-v-5fe218d3>--color-bg</code>/<code data-v-5fe218d3>--color-text</code> (52/48); applied via <code data-v-5fe218d3>--media-alpha-canvas</code> (16px period)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-media-alpha-bg-2</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#6b6b6b;" data-v-5fe218d3></span>≈#6b6b6b</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#8c8f93;" data-v-5fe218d3></span>≈#8c8f93</td><td data-v-5fe218d3>Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-sidebar-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f9fbfc;" data-v-5fe218d3></span>#f9fbfc</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d0d0d;" data-v-5fe218d3></span>#0d0d0d</td><td data-v-5fe218d3>Sidebar surface — one step off <code data-v-5fe218d3>--color-bg</code> (just under white in light, one step BELOW the page in dark) so the session column reads as its own plane and never brighter than the reading surface</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-scrim</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.4);" data-v-5fe218d3></span>rgba(0,0,0,.4)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></span>rgba(0,0,0,.6)</td><td data-v-5fe218d3>Modal scrim — the dark veil behind dialogs/lightboxes (mask.base; legacy hardcoded overlays can migrate here)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-scrim-strong</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></span>rgba(0,0,0,.6)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.75);" data-v-5fe218d3></span>rgba(0,0,0,.75)</td><td data-v-5fe218d3>Stronger scrim for full-screen media previews (mask.strong — the PhotoSwipe image preview backdrop)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text-on-scrim</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>same</td><td data-v-5fe218d3>Text drawn on the scrim (captions over the media lightbox)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-accent</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1783ff;" data-v-5fe218d3></span>#1783ff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1a88ff;" data-v-5fe218d3></span>#1a88ff</td><td data-v-5fe218d3>Primary action / link / focus</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-success</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0e7a38;" data-v-5fe218d3></span>#0e7a38</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#3fb950;" data-v-5fe218d3></span>#3fb950</td><td data-v-5fe218d3>Success / pass</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-warning</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#a9610a;" data-v-5fe218d3></span>#a9610a</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#d29922;" data-v-5fe218d3></span>#d29922</td><td data-v-5fe218d3>Warning / pending</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-danger</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#c0392b;" data-v-5fe218d3></span>#c0392b</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f85149;" data-v-5fe218d3></span>#f85149</td><td data-v-5fe218d3>Danger / error / abort</td></tr></tbody></table><h4 class="mini" data-v-5fe218d3>Palette</h4><p data-v-5fe218d3>The palette <b data-v-5fe218d3>is</b> the production kimi.com palette (design tokens <code data-v-5fe218d3>tokens.json</code>): neutral-gray surfaces, an alpha-based label / fill / separator ramp (<code data-v-5fe218d3>labels.*</code> / <code data-v-5fe218d3>fills.*</code> / <code data-v-5fe218d3>separator.s1</code>), the KMBlue accent, and a true neutral dark ladder (<code data-v-5fe218d3>#121212 → #1f1f1f → #292929</code>; the deep chrome plane and sidebar derive one step below at <code data-v-5fe218d3>#0d0d0d</code> — the palette has nothing darker than primary).</p><p data-v-5fe218d3>The ONE deliberate exception is the <b data-v-5fe218d3>status hues</b>: success / warning / danger / done keep the app&#39;s own WCAG-tuned ramp (≥4.5:1 on the neutral surfaces) — the production status colours (positiveGreen <code data-v-5fe218d3>#16c456</code>, orange <code data-v-5fe218d3>#ff9500</code>, danger red <code data-v-5fe218d3>#ff3849</code>) are too bright against it. Diff add/del bands happen to coincide (both use the production 25% fills in light, 14% in dark).</p><h4 class="mini" data-v-5fe218d3>Surface usage</h4><p data-v-5fe218d3>The surface layers each have a role — choose by &quot;field overlay / raised layer / content well / default flat layer / sunken layer / page background / deep chrome&quot;, and avoid treating <code data-v-5fe218d3>--p-surface-raised</code> as a universal background. In dark, elevation = lighter: floating layers sit above the content, content wells sit above the page, and chrome planes (sidebar, panel headers) sit below it — never the reverse. One consequence: on the page itself, never use <code data-v-5fe218d3>--color-surface-sunken</code> for a content carrier — it equals <code data-v-5fe218d3>--color-bg</code> in dark and the fill vanishes; use <code data-v-5fe218d3>--color-well</code>. Sunken stays correct INSIDE surface / raised cards, where it is a genuine recess. Field controls (selects, steppers) on a raised card use <code data-v-5fe218d3>--color-surface-overlay</code>, the top fill rung; floating layers keep <code data-v-5fe218d3>--color-surface-raised</code> — their elevation is shadow + hairline, not a lighter fill.</p><table class="dt" data-v-5fe218d3><thead data-v-5fe218d3><tr data-v-5fe218d3><th data-v-5fe218d3>Token</th><th data-v-5fe218d3>Light</th><th data-v-5fe218d3>Dark</th><th data-v-5fe218d3>Usage</th></tr></thead><tbody data-v-5fe218d3><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-overlay</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#22272e;" data-v-5fe218d3></span>#22272e</td><td data-v-5fe218d3>Field controls on raised cards — select, stepper (top fill rung; light = white)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-raised</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1c2128;" data-v-5fe218d3></span>#1c2128</td><td data-v-5fe218d3>Raised card / dialog / input (raised layer)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-well</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f3f5f8;" data-v-5fe218d3></span>#f3f5f8</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#13181e;" data-v-5fe218d3></span>#13181e</td><td data-v-5fe218d3>Code block / tool output / list carrier directly on the page (content well — light: recessed, dark: one rung above the page)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fafbfc;" data-v-5fe218d3></span>#fafbfc</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#13181e;" data-v-5fe218d3></span>#13181e</td><td data-v-5fe218d3>Panel / sidebar / card head (default flat layer)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-sunken</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f3f5f8;" data-v-5fe218d3></span>#f3f5f8</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d1117;" data-v-5fe218d3></span>#0d1117</td><td data-v-5fe218d3>Recessed area INSIDE a surface / raised card — never a content carrier on the page (sunken layer)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d1117;" data-v-5fe218d3></span>#0d1117</td><td data-v-5fe218d3>Page background</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-deep</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fafbfc;" data-v-5fe218d3></span>#fafbfc</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0a0d12;" data-v-5fe218d3></span>#0a0d12</td><td data-v-5fe218d3>Panel header / diff gutter (deep chrome layer — below the page in dark)</td></tr></tbody></table><h4 class="mini" data-v-5fe218d3>Borders &amp; hairlines</h4><p data-v-5fe218d3>Three line tokens, three jobs: <code data-v-5fe218d3>--color-line</code> is the default structural separator, <code data-v-5fe218d3>--color-subtle</code> the tertiary separator that must stay quieter (diff-gutter column rules, quiet dividers inside wells), and <code data-v-5fe218d3>--color-line-strong</code> the edge of interactive controls (inputs, selects, secondary buttons). Width is one: <b data-v-5fe218d3>0.5px</b> — every stroke is the same hairline, on static structural edges (card rims, plane seams, header dividers), interactive control rims and floating layers alike. Separation comes from luminance first — planes one rung apart already read as distinct in dark, so their shared edge stays a 0.5px hairline rather than a heavier border; same-rung neighbours (list rows, card head / body) are exactly where a hairline is required. In dark, drop shadows fade on near-black surfaces, so a floating layer&#39;s edge IS its hairline — never ship a shadow-only floating surface. (Legacy <code data-v-5fe218d3>--line</code> / <code data-v-5fe218d3>--line2</code> alias <code data-v-5fe218d3>--color-line</code> / <code data-v-5fe218d3>--color-subtle</code> for one cycle; new work references the v2 names.)</p><h4 class="mini" data-v-5fe218d3>Focus ring</h4><p data-v-5fe218d3>All focusable controls (button, input, link, menu item, switch, checkbox) use the focus-ring token uniformly; do not hand-write a <code data-v-5fe218d3>box-shadow</code> focus ring.</p><table class="dt" data-v-5fe218d3><thead data-v-5fe218d3><tr data-v-5fe218d3><th data-v-5fe218d3>Token</th><th data-v-5fe218d3>Value</th><th data-v-5fe218d3>Usage</th></tr></thead><tbody data-v-5fe218d3><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-focus-ring</td><td class="val" data-v-5fe218d3>0 0 0 3px var(--p-accent-soft)</td><td data-v-5fe218d3>Default focus ring (link, menu item, switch, checkbox)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-focus-ring-strong</td><td class="val" data-v-5fe218d3>0 0 0 3px var(--p-accent-soft), 0 0 0 1px var(--p-accent)</td><td data-v-5fe218d3>Strong focus ring (button, primary action)</td></tr></tbody></table><h4 class="mini" data-v-5fe218d3>Text selection</h4><p data-v-5fe218d3>The text-selection color uses <code data-v-5fe218d3>--p-selection</code> uniformly (light <code data-v-5fe218d3>rgba(23,131,255,.18)</code> / dark <code data-v-5fe218d3>rgba(88,166,255,.32)</code>), applied by the global <code data-v-5fe218d3>::selection</code> rule; do not set a separate highlight background.</p><h4 class="mini" data-v-5fe218d3>Disabled state</h4><p data-v-5fe218d3>All disabled controls use <code data-v-5fe218d3>opacity:.5</code> + <code data-v-5fe218d3>cursor:not-allowed</code> uniformly; do not separately grey out or recolor.</p><h3 class="sub" data-v-5fe218d3>Font families</h3><p data-v-5fe218d3>Kimi Web uses two font tokens: <b data-v-5fe218d3>--font-ui</b> (UI and body, with Schibsted Grotesk for Latin and Noto Sans SC for Simplified Chinese) and <b data-v-5fe218d3>--font-mono</b> (code and monospace). Components always reference the variables; do not hard-code font names.</p><h4 class="mini" data-v-5fe218d3>--font-ui · UI &amp; body (Schibsted Grotesk + Noto Sans SC)</h4><p data-v-5fe218d3>Body and UI use self-hosted Schibsted Grotesk for Latin text and self-hosted Noto Sans SC Variable for Simplified Chinese. Platform fonts remain as fallbacks:</p><div class="code" data-v-5fe218d3><div class="code-bar" data-v-5fe218d3><span class="d" data-v-5fe218d3></span><span class="d" data-v-5fe218d3></span><span class="d" data-v-5fe218d3></span><span class="fn" data-v-5fe218d3>--font-ui</span></div><pre data-v-5fe218d3>--font-ui: &quot;Schibsted Grotesk Variable&quot;, &quot;Helvetica Neue&quot;, Arial,
+import{M as T,aD as z,aI as q,aL as o,u as i,v as a,G as t,H as d,F as p,aX as w,bb as y,I as c,bk as f,cx as h,cy as B,cz as k,cA as A,cB as M}from"./index-Bxn5yOTB.js";const I={class:"ds-page"},V={class:"layout"},H={class:"content"},L={class:"content-inner"},E={id:"tokens"},D={class:"icon-sizes"},O={class:"sz"},W={class:"p-ic",style:{width:"14px",height:"14px"},viewBox:"0 0 24 24",fill:"currentColor"},R={class:"sz"},N={class:"p-ic",style:{width:"16px",height:"16px"},viewBox:"0 0 24 24",fill:"currentColor"},U={class:"sz"},P={class:"p-ic",style:{width:"20px",height:"20px"},viewBox:"0 0 24 24",fill:"currentColor"},F={class:"icon-grid"},j={class:"icon-group-label"},K={class:"ic-name"},G={id:"primitives"},_={class:"stage-wrap"},J={class:"stage p"},Q={class:"p-pill",style:{color:"var(--p-warning)"}},Y={class:"stage-wrap"},Z={class:"stage p col"},X={class:"demo-row"},$={class:"p-btn primary disabled"},ee={class:"p-spinner sm",viewBox:"0 0 24 24",style:{"--p-accent":"#fff","--p-line":"rgba(255,255,255,.35)"}},ae={class:"stage-wrap"},te={class:"stage p col"},de={class:"demo-row"},se={class:"stage-wrap"},oe={class:"stage p col",style:{gap:"0",background:"var(--p-surface)",padding:"0","max-width":"300px","align-items":"stretch"}},ie={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},ne={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},le={style:{display:"flex","align-items":"center",gap:"8px",padding:"7px 10px",margin:"1px 6px","border-radius":"8px",color:"var(--p-text)","font-size":"13px"}},re={style:{color:"var(--d-fg-faint)",flex:"none"},width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor"},ce={id:"chat"},ve={class:"stage-wrap"},fe={class:"stage p col"},pe={style:{"max-width":"560px",width:"100%"}},he={class:"stage-wrap"},ue={class:"stage p col",style:{"align-items":"center",background:"#fff"}},ge={class:"p-composer",style:{width:"100%","max-width":"620px"}},be={class:"p-composer-bar"},me={class:"p-composer-left"},we={class:"p-pill",style:{color:"var(--p-warning)"}},ye="/repo",ke=T({__name:"DesignSystemView",emits:["close"],setup(xe,{emit:x}){const C=[{path:"/repo/apps/web/src/components/chat/TurnFilesSummary.vue",added:19,removed:4,hasWrite:!1,statsIncomplete:!1,diff:null},{path:"/repo/apps/web/src/composables/useFilePreview.ts",added:8,removed:1,hasWrite:!1,statsIncomplete:!1,diff:null},{path:"/repo/apps/web/src/components/chatTurnRendering.ts",added:0,removed:0,hasWrite:!0,statsIncomplete:!0,diff:null},{path:"/repo/apps/web/src/lib/toolDiff.ts",added:3,removed:2,hasWrite:!1,statsIncomplete:!1,diff:null}];function u(){}const S=x;function g(){S("close")}let v=null;function b(r){r.key==="Escape"&&g()}return z(()=>{document.addEventListener("keydown",b);const r=Array.prototype.slice.call(document.querySelectorAll('#nav a[href^="#"]')),e=new Map;r.forEach(l=>{const s=l.getAttribute("href");if(!s)return;const m=document.getElementById(s.slice(1));m&&e.set(m,l)});let n=null;v=new IntersectionObserver(l=>{l.forEach(s=>{s.isIntersecting&&(n&&n.classList.remove("active"),n=e.get(s.target)??null,n&&n.classList.add("active"))})},{rootMargin:"-20% 0px -70% 0px",threshold:0}),e.forEach((l,s)=>v.observe(s)),r.length&&r[0].classList.add("active")}),q(()=>{document.removeEventListener("keydown",b),v&&(v.disconnect(),v=null)}),(r,e)=>(o(),i("div",I,[a("div",{class:"ds-topbar"},[a("button",{class:"ds-back",type:"button",onClick:g},"← Back"),e[0]||(e[0]=a("span",{class:"ds-topbar-title"},"Design system",-1))]),a("div",V,[e[44]||(e[44]=t('<aside class="sidebar" data-v-5fe218d3><div class="brand" data-v-5fe218d3><div class="brand-mark" data-v-5fe218d3>K</div><div class="brand-name" data-v-5fe218d3>Kimi Web</div></div><div class="brand-sub" data-v-5fe218d3>Design System · v1.0</div><div class="nav-group" data-v-5fe218d3>Navigate</div><nav class="nav" id="nav" data-v-5fe218d3><a href="#overview" data-v-5fe218d3><span class="num" data-v-5fe218d3>00</span>Overview</a><a href="#principles" data-v-5fe218d3><span class="num" data-v-5fe218d3>01</span>Design Principles</a><a href="#tokens" data-v-5fe218d3><span class="num" data-v-5fe218d3>02</span>Design Tokens</a><a href="#primitives" data-v-5fe218d3><span class="num" data-v-5fe218d3>03</span>Primitives</a><a href="#chat" data-v-5fe218d3><span class="num" data-v-5fe218d3>04</span>Chat Interface</a><a href="#themes" data-v-5fe218d3><span class="num" data-v-5fe218d3>05</span>Theming</a><a href="#rules" data-v-5fe218d3><span class="num" data-v-5fe218d3>06</span>Style Rules</a><a href="#shell" data-v-5fe218d3><span class="num" data-v-5fe218d3>07</span>App Shell &amp; Sidebar</a><a href="#a11y" data-v-5fe218d3><span class="num" data-v-5fe218d3>08</span>Accessibility</a><a href="#dialogs" data-v-5fe218d3><span class="num" data-v-5fe218d3>09</span>Dialogs</a></nav><div class="nav-group" data-v-5fe218d3>Companion output</div><nav class="nav" data-v-5fe218d3><a href="#tokens" data-v-5fe218d3><span class="num" data-v-5fe218d3>↗</span>Token list</a><a href="#primitives" data-v-5fe218d3><span class="num" data-v-5fe218d3>↗</span>Component API</a><a href="#rules" data-v-5fe218d3><span class="num" data-v-5fe218d3>↗</span>Style rules</a></nav></aside>',1)),a("main",H,[a("div",L,[e[42]||(e[42]=t('<section id="overview" data-v-5fe218d3><div class="hero" data-v-5fe218d3><span class="eyebrow" data-v-5fe218d3>● Design System · v1.0</span><h1 data-v-5fe218d3>Kimi Web <span class="grad" data-v-5fe218d3>Design System</span></h1><p class="lead" data-v-5fe218d3> This document defines the visual language and component specification for Kimi 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-5fe218d3><span class="meta-chip" data-v-5fe218d3><span class="dot" data-v-5fe218d3></span> Scope <b data-v-5fe218d3>apps/kimi-web</b></span><span class="meta-chip" data-v-5fe218d3>Component primitives</span><span class="meta-chip" data-v-5fe218d3>Theme <b data-v-5fe218d3>1 set · 4 customizable colors</b></span><span class="meta-chip" data-v-5fe218d3>Light / dark mode</span></div></div><div class="callout info" data-v-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3><b data-v-5fe218d3>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-5fe218d3><div class="sec-head" data-v-5fe218d3><span class="sec-num" data-v-5fe218d3>01</span><h2 class="sec-title" data-v-5fe218d3>Design Principles</h2></div><p class="sec-desc" data-v-5fe218d3> Every UI decision traces back to the following principles. Kimi 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-5fe218d3><li data-v-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>Feedback</b> —— hover / active / focus / loading / success / error all have visible states, and the state language is unified.</li><li data-v-5fe218d3><b data-v-5fe218d3>Breathing room</b> —— Control density with the spacing scale rather than arbitrary pixels; prefer restrained whitespace over cramming controls together.</li><li data-v-5fe218d3><b data-v-5fe218d3>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-5fe218d3><b data-v-5fe218d3>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-5fe218d3><span class="ico" data-v-5fe218d3>✓</span><div data-v-5fe218d3><b data-v-5fe218d3>Brand tone (the do-not list)</b>: calm, clinical, never exaggerated. <span class="pill red" style="margin:0 4px;" data-v-5fe218d3>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. These are all common tells of AI-generated interfaces (an &quot;AI tell&quot;), deliberately avoided. </div></div><div class="callout info" data-v-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3><b data-v-5fe218d3>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)),a("section",E,[e[7]||(e[7]=t(`<div class="sec-head" data-v-5fe218d3><span class="sec-num" data-v-5fe218d3>02</span><h2 class="sec-title" data-v-5fe218d3>Design Tokens</h2></div><p class="sec-desc" data-v-5fe218d3> Collapse every visual decision into tokens. <b data-v-5fe218d3>Color tokens keep the existing short names and fill out the semantics</b> (lowering migration cost), while <b data-v-5fe218d3>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-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3><b data-v-5fe218d3>Naming convention</b>: <code data-v-5fe218d3>--&lt;category&gt;-&lt;role&gt;-&lt;state&gt;</code>. For example <code data-v-5fe218d3>--color-text-muted</code>, <code data-v-5fe218d3>--radius-md</code>, <code data-v-5fe218d3>--space-4</code>. To reduce churn, the existing short names (<code data-v-5fe218d3>--bg</code> / <code data-v-5fe218d3>--ink</code> / <code data-v-5fe218d3>--line</code> / <code data-v-5fe218d3>--blue</code> …) are kept as <b data-v-5fe218d3>compatibility aliases</b> for one release cycle. </div></div><h3 class="sub" data-v-5fe218d3>Color</h3><p data-v-5fe218d3>Semantic-first, in three layers: <b data-v-5fe218d3>background / text / border</b> + <b data-v-5fe218d3>accent</b> + <b data-v-5fe218d3>status colors</b>. All colors are defined in light / dark pairs, with contrast ≥ 4.5:1.</p><div class="callout info" data-v-5fe218d3><span class="ico" data-v-5fe218d3>i</span><div data-v-5fe218d3>The table below shows the <b data-v-5fe218d3>semantic tokens</b>. Each ships a light value in <code data-v-5fe218d3>:root</code> and a dark override in the <code data-v-5fe218d3>data-color-scheme</code> blocks — for example <code data-v-5fe218d3>--color-bg</code> is <code data-v-5fe218d3>#ffffff</code> in light and <code data-v-5fe218d3>#121212</code> in dark; <code data-v-5fe218d3>--color-accent</code> is the brand blue (<code data-v-5fe218d3>#1783ff</code> light / <code data-v-5fe218d3>#1a88ff</code> dark). The <b data-v-5fe218d3>semantic status colors</b> (success / warning / danger / info) are independent palettes, one set each for light / dark.</div></div><div class="palette" data-v-5fe218d3><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#ffffff;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>bg</div><div class="cv" data-v-5fe218d3>#ffffff / #121212</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #1f1f1f</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface-sunken</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #121212</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>well</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #1f1f1f</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#f5f5f5;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface-deep</div><div class="cv" data-v-5fe218d3>#f5f5f5 / #0d0d0d</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#fff;border:0.5px solid rgba(0,0,0,.13);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>surface-overlay</div><div class="cv" data-v-5fe218d3>#ffffff / rgba(255,255,255,.1)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>selected</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.05) / rgba(255,255,255,.1)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.9);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>fg</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.9) / rgba(255,255,255,.84)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>fg-muted</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.6) / rgba(255,255,255,.56)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.13);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>line</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.13) / rgba(255,255,255,.12)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>subtle</div><div class="cv" data-v-5fe218d3>rgba(0,0,0,.05) / rgba(255,255,255,.05)</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#1783ff;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>accent (KMBlue)</div><div class="cv" data-v-5fe218d3>#1783ff / #1a88ff</div></div></div><div class="color-card" data-v-5fe218d3><div class="color-chip" style="background:#e8f3ff;" data-v-5fe218d3></div><div class="color-meta" data-v-5fe218d3><div class="cn" data-v-5fe218d3>accent-soft</div><div class="cv" data-v-5fe218d3>#e8f3ff / rgba(26,136,255,.1)</div></div></div></div><table class="dt" data-v-5fe218d3><thead data-v-5fe218d3><tr data-v-5fe218d3><th data-v-5fe218d3>Token</th><th data-v-5fe218d3>Light</th><th data-v-5fe218d3>Dark</th><th data-v-5fe218d3>Usage</th></tr></thead><tbody data-v-5fe218d3><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#121212;" data-v-5fe218d3></span>#121212</td><td data-v-5fe218d3>Page background</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f5f5f5;" data-v-5fe218d3></span>#f5f5f5</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1f1f1f;" data-v-5fe218d3></span>#1f1f1f</td><td data-v-5fe218d3>Panel / sidebar / card head</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface-raised</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#292929;" data-v-5fe218d3></span>#292929</td><td data-v-5fe218d3>Raised card / dialog / input</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-menu-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.95);" data-v-5fe218d3></span>rgba(255,255,255,.95)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(41,41,41,.95);" data-v-5fe218d3></span>rgba(41,41,41,.95)</td><td data-v-5fe218d3>Floating menu panel — frosted glass over <code data-v-5fe218d3>--p-menu-backdrop</code> blur</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface-overlay</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.1);" data-v-5fe218d3></span>rgba(255,255,255,.1)</td><td data-v-5fe218d3>Field-control fill on raised cards (selects, steppers) — top rung; light tops out at white (the level is carried by the border), dark steps one rung above raised. Floating layers stay at raised</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-well</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f5f5f5;" data-v-5fe218d3></span>#f5f5f5</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1f1f1f;" data-v-5fe218d3></span>#1f1f1f</td><td data-v-5fe218d3>Content well on the page (code blocks, tool-output panels, match/file lists, media thumbnails) — light reuses the sunken recess; dark lifts one rung ABOVE the page, because a true recess (<code data-v-5fe218d3>#121212</code>) vanishes into the page there</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-surface-deep</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f5f5f5;" data-v-5fe218d3></span>#f5f5f5</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d0d0d;" data-v-5fe218d3></span>#0d0d0d</td><td data-v-5fe218d3>Deep chrome plane one step BELOW the page (panel headers, diff gutters) — dark drops under <code data-v-5fe218d3>--color-bg</code> so chrome framing stays darker than the content it frames</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.9);" data-v-5fe218d3></span>rgba(0,0,0,.9)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.84);" data-v-5fe218d3></span>rgba(255,255,255,.84)</td><td data-v-5fe218d3>Body text / headings</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text-strong</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#000;" data-v-5fe218d3></span>#000000</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;box-shadow:inset 0 0 0 1px #ddd;" data-v-5fe218d3></span>#ffffff</td><td data-v-5fe218d3>Max foreground emphasis — menu-row label &amp; icon on hover</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text-muted</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></span>rgba(0,0,0,.6)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.56);" data-v-5fe218d3></span>rgba(255,255,255,.56)</td><td data-v-5fe218d3>Secondary text / placeholder</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-line</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.13);" data-v-5fe218d3></span>rgba(0,0,0,.13)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.12);" data-v-5fe218d3></span>rgba(255,255,255,.12)</td><td data-v-5fe218d3>Divider / card border</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-subtle</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></span>rgba(0,0,0,.05)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.05);" data-v-5fe218d3></span>rgba(255,255,255,.05)</td><td data-v-5fe218d3>Subtle hairline — tertiary separators below <code data-v-5fe218d3>--color-line</code> (diff-gutter column rules, quiet dividers inside wells)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-selected</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.05);" data-v-5fe218d3></span>rgba(0,0,0,.05)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.1);" data-v-5fe218d3></span>rgba(255,255,255,.1)</td><td data-v-5fe218d3>Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-hover</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.03);" data-v-5fe218d3></span>rgba(0,0,0,.03)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.05);" data-v-5fe218d3></span>rgba(255,255,255,.05)</td><td data-v-5fe218d3>Row hover wash — lighter than the selected fill (hover &lt; selected); translucent, sits on any surface. The global hover rule: transparent-base controls overlay this f1 wash (hover never darkens — never sunken); filled controls use their own hover token (accent-hover, send-bg-hover)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-inline-code-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.03);" data-v-5fe218d3></span>rgba(0,0,0,.03)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(255,255,255,.1);" data-v-5fe218d3></span>rgba(255,255,255,.1)</td><td data-v-5fe218d3>Inline-code chip fill — fills.f1 / fills.f2; dark lifts off any dark surface (sunken == bg there)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-media-alpha-bg-1</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#858585;" data-v-5fe218d3></span>≈#858585</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#76797e;" data-v-5fe218d3></span>≈#76797e</td><td data-v-5fe218d3>Checkerboard square A of the <code data-v-5fe218d3>&lt;img&gt;</code> alpha canvas — color-mix of <code data-v-5fe218d3>--color-bg</code>/<code data-v-5fe218d3>--color-text</code> (52/48); applied via <code data-v-5fe218d3>--media-alpha-canvas</code> (16px period)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-media-alpha-bg-2</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#6b6b6b;" data-v-5fe218d3></span>≈#6b6b6b</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#8c8f93;" data-v-5fe218d3></span>≈#8c8f93</td><td data-v-5fe218d3>Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-sidebar-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f9fbfc;" data-v-5fe218d3></span>#f9fbfc</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d0d0d;" data-v-5fe218d3></span>#0d0d0d</td><td data-v-5fe218d3>Sidebar surface — one step off <code data-v-5fe218d3>--color-bg</code> (just under white in light, one step BELOW the page in dark) so the session column reads as its own plane and never brighter than the reading surface</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-scrim</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.4);" data-v-5fe218d3></span>rgba(0,0,0,.4)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></span>rgba(0,0,0,.6)</td><td data-v-5fe218d3>Modal scrim — the dark veil behind dialogs/lightboxes (mask.base; legacy hardcoded overlays can migrate here)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-scrim-strong</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.6);" data-v-5fe218d3></span>rgba(0,0,0,.6)</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:rgba(0,0,0,.75);" data-v-5fe218d3></span>rgba(0,0,0,.75)</td><td data-v-5fe218d3>Stronger scrim for full-screen media previews (mask.strong — the PhotoSwipe image preview backdrop)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-text-on-scrim</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>same</td><td data-v-5fe218d3>Text drawn on the scrim (captions over the media lightbox)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-accent</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1783ff;" data-v-5fe218d3></span>#1783ff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1a88ff;" data-v-5fe218d3></span>#1a88ff</td><td data-v-5fe218d3>Primary action / link / focus</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-success</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0e7a38;" data-v-5fe218d3></span>#0e7a38</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#3fb950;" data-v-5fe218d3></span>#3fb950</td><td data-v-5fe218d3>Success / pass</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-warning</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#a9610a;" data-v-5fe218d3></span>#a9610a</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#d29922;" data-v-5fe218d3></span>#d29922</td><td data-v-5fe218d3>Warning / pending</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--color-danger</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#c0392b;" data-v-5fe218d3></span>#c0392b</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f85149;" data-v-5fe218d3></span>#f85149</td><td data-v-5fe218d3>Danger / error / abort</td></tr></tbody></table><h4 class="mini" data-v-5fe218d3>Palette</h4><p data-v-5fe218d3>The palette <b data-v-5fe218d3>is</b> the production kimi.com palette (design tokens <code data-v-5fe218d3>tokens.json</code>): neutral-gray surfaces, an alpha-based label / fill / separator ramp (<code data-v-5fe218d3>labels.*</code> / <code data-v-5fe218d3>fills.*</code> / <code data-v-5fe218d3>separator.s1</code>), the KMBlue accent, and a true neutral dark ladder (<code data-v-5fe218d3>#121212 → #1f1f1f → #292929</code>; the deep chrome plane and sidebar derive one step below at <code data-v-5fe218d3>#0d0d0d</code> — the palette has nothing darker than primary).</p><p data-v-5fe218d3>The ONE deliberate exception is the <b data-v-5fe218d3>status hues</b>: success / warning / danger / done keep the app&#39;s own WCAG-tuned ramp (≥4.5:1 on the neutral surfaces) — the production status colours (positiveGreen <code data-v-5fe218d3>#16c456</code>, orange <code data-v-5fe218d3>#ff9500</code>, danger red <code data-v-5fe218d3>#ff3849</code>) are too bright against it. Diff add/del bands happen to coincide (both use the production 25% fills in light, 14% in dark).</p><h4 class="mini" data-v-5fe218d3>Surface usage</h4><p data-v-5fe218d3>The surface layers each have a role — choose by &quot;field overlay / raised layer / content well / default flat layer / sunken layer / page background / deep chrome&quot;, and avoid treating <code data-v-5fe218d3>--p-surface-raised</code> as a universal background. In dark, elevation = lighter: floating layers sit above the content, content wells sit above the page, and chrome planes (sidebar, panel headers) sit below it — never the reverse. One consequence: on the page itself, never use <code data-v-5fe218d3>--color-surface-sunken</code> for a content carrier — it equals <code data-v-5fe218d3>--color-bg</code> in dark and the fill vanishes; use <code data-v-5fe218d3>--color-well</code>. Sunken stays correct INSIDE surface / raised cards, where it is a genuine recess. Field controls (selects, steppers) on a raised card use <code data-v-5fe218d3>--color-surface-overlay</code>, the top fill rung; floating layers keep <code data-v-5fe218d3>--color-surface-raised</code> — their elevation is shadow + hairline, not a lighter fill.</p><table class="dt" data-v-5fe218d3><thead data-v-5fe218d3><tr data-v-5fe218d3><th data-v-5fe218d3>Token</th><th data-v-5fe218d3>Light</th><th data-v-5fe218d3>Dark</th><th data-v-5fe218d3>Usage</th></tr></thead><tbody data-v-5fe218d3><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-overlay</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#22272e;" data-v-5fe218d3></span>#22272e</td><td data-v-5fe218d3>Field controls on raised cards — select, stepper (top fill rung; light = white)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-raised</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#1c2128;" data-v-5fe218d3></span>#1c2128</td><td data-v-5fe218d3>Raised card / dialog / input (raised layer)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-well</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f3f5f8;" data-v-5fe218d3></span>#f3f5f8</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#13181e;" data-v-5fe218d3></span>#13181e</td><td data-v-5fe218d3>Code block / tool output / list carrier directly on the page (content well — light: recessed, dark: one rung above the page)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fafbfc;" data-v-5fe218d3></span>#fafbfc</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#13181e;" data-v-5fe218d3></span>#13181e</td><td data-v-5fe218d3>Panel / sidebar / card head (default flat layer)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-sunken</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#f3f5f8;" data-v-5fe218d3></span>#f3f5f8</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d1117;" data-v-5fe218d3></span>#0d1117</td><td data-v-5fe218d3>Recessed area INSIDE a surface / raised card — never a content carrier on the page (sunken layer)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-bg</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fff;" data-v-5fe218d3></span>#ffffff</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0d1117;" data-v-5fe218d3></span>#0d1117</td><td data-v-5fe218d3>Page background</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-surface-deep</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#fafbfc;" data-v-5fe218d3></span>#fafbfc</td><td class="val" data-v-5fe218d3><span class="swatch" style="background:#0a0d12;" data-v-5fe218d3></span>#0a0d12</td><td data-v-5fe218d3>Panel header / diff gutter (deep chrome layer — below the page in dark)</td></tr></tbody></table><h4 class="mini" data-v-5fe218d3>Borders &amp; hairlines</h4><p data-v-5fe218d3>Three line tokens, three jobs: <code data-v-5fe218d3>--color-line</code> is the default structural separator, <code data-v-5fe218d3>--color-subtle</code> the tertiary separator that must stay quieter (diff-gutter column rules, quiet dividers inside wells), and <code data-v-5fe218d3>--color-line-strong</code> the edge of interactive controls (inputs, selects, secondary buttons). Width is one: <b data-v-5fe218d3>0.5px</b> — every stroke is the same hairline, on static structural edges (card rims, plane seams, header dividers), interactive control rims and floating layers alike. Separation comes from luminance first — planes one rung apart already read as distinct in dark, so their shared edge stays a 0.5px hairline rather than a heavier border; same-rung neighbours (list rows, card head / body) are exactly where a hairline is required. In dark, drop shadows fade on near-black surfaces, so a floating layer&#39;s edge IS its hairline — never ship a shadow-only floating surface. (Legacy <code data-v-5fe218d3>--line</code> / <code data-v-5fe218d3>--line2</code> alias <code data-v-5fe218d3>--color-line</code> / <code data-v-5fe218d3>--color-subtle</code> for one cycle; new work references the v2 names.)</p><h4 class="mini" data-v-5fe218d3>Focus ring</h4><p data-v-5fe218d3>All focusable controls (button, input, link, menu item, switch, checkbox) use the focus-ring token uniformly; do not hand-write a <code data-v-5fe218d3>box-shadow</code> focus ring.</p><table class="dt" data-v-5fe218d3><thead data-v-5fe218d3><tr data-v-5fe218d3><th data-v-5fe218d3>Token</th><th data-v-5fe218d3>Value</th><th data-v-5fe218d3>Usage</th></tr></thead><tbody data-v-5fe218d3><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-focus-ring</td><td class="val" data-v-5fe218d3>0 0 0 3px var(--p-accent-soft)</td><td data-v-5fe218d3>Default focus ring (link, menu item, switch, checkbox)</td></tr><tr data-v-5fe218d3><td class="tk" data-v-5fe218d3>--p-focus-ring-strong</td><td class="val" data-v-5fe218d3>0 0 0 3px var(--p-accent-soft), 0 0 0 1px var(--p-accent)</td><td data-v-5fe218d3>Strong focus ring (button, primary action)</td></tr></tbody></table><h4 class="mini" data-v-5fe218d3>Text selection</h4><p data-v-5fe218d3>The text-selection color uses <code data-v-5fe218d3>--p-selection</code> uniformly (light <code data-v-5fe218d3>rgba(23,131,255,.18)</code> / dark <code data-v-5fe218d3>rgba(88,166,255,.32)</code>), applied by the global <code data-v-5fe218d3>::selection</code> rule; do not set a separate highlight background.</p><h4 class="mini" data-v-5fe218d3>Disabled state</h4><p data-v-5fe218d3>All disabled controls use <code data-v-5fe218d3>opacity:.5</code> + <code data-v-5fe218d3>cursor:not-allowed</code> uniformly; do not separately grey out or recolor.</p><h3 class="sub" data-v-5fe218d3>Font families</h3><p data-v-5fe218d3>Kimi Web uses two font tokens: <b data-v-5fe218d3>--font-ui</b> (UI and body, with Schibsted Grotesk for Latin and Noto Sans SC for Simplified Chinese) and <b data-v-5fe218d3>--font-mono</b> (code and monospace). Components always reference the variables; do not hard-code font names.</p><h4 class="mini" data-v-5fe218d3>--font-ui · UI &amp; body (Schibsted Grotesk + Noto Sans SC)</h4><p data-v-5fe218d3>Body and UI use self-hosted Schibsted Grotesk for Latin text and self-hosted Noto Sans SC Variable for Simplified Chinese. Platform fonts remain as fallbacks:</p><div class="code" data-v-5fe218d3><div class="code-bar" data-v-5fe218d3><span class="d" data-v-5fe218d3></span><span class="d" data-v-5fe218d3></span><span class="d" data-v-5fe218d3></span><span class="fn" data-v-5fe218d3>--font-ui</span></div><pre data-v-5fe218d3>--font-ui: &quot;Schibsted Grotesk Variable&quot;, &quot;Helvetica Neue&quot;, Arial,
       &quot;Noto Sans SC Variable&quot;, &quot;Noto Sans SC&quot;, &quot;PingFang SC&quot;,
       &quot;Microsoft YaHei&quot;,
       -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;,

package/dist-web/assets/{Tooltip-DbYQWF1U.js → Tooltip-BCySsRbJ.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-D-7nOosq.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-Bxn5yOTB.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/{abnfDiagram-VRR7QNED-C0Afmuc1.js → abnfDiagram-VRR7QNED-LUo2ybd4.js}

@@ -1 +1 @@
-import{g as p,r as u,d as a}from"./chunk-MOJQB5TN-JQ2kJR9W.js";import{p as f}from"./chunk-JWPE2WC7-Dsg3gA8l.js";import{_ as n,l as o}from"./mermaid.core-CJB1tAev.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-BIlq342y.js";import"./index-D-7nOosq.js";import"./_commonjsHelpers-CqkleIqs.js";var v=d().RailroadAbnf.parser.LangiumParser,i=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return i(e.element);case"AbnfOptionalGroup":return{type:"optional",element:i(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:i(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},F={parser:R,db:a,renderer:u,styles:p};export{F as diagram};
+import{g as p,r as u,d as a}from"./chunk-MOJQB5TN-CuHpGhX-.js";import{p as f}from"./chunk-JWPE2WC7-R8L-LjRL.js";import{_ as n,l as o}from"./mermaid.core-CsZwh_jB.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-CD6doQLg.js";import"./index-Bxn5yOTB.js";import"./_commonjsHelpers-CqkleIqs.js";var v=d().RailroadAbnf.parser.LangiumParser,i=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return i(e.element);case"AbnfOptionalGroup":return{type:"optional",element:i(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:i(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},F={parser:R,db:a,renderer:u,styles:p};export{F as diagram};

package/dist-web/assets/{arc-IkhU3FHH.js → arc-HTdwJ95y.js}

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