@teambit/scope 1.0.122 → 1.0.123

package/artifacts/preview/static/css/teambit.scope/{scope-preview.c8578a71.css → scope-preview.d9789376.css}

@@ -51,5 +51,5 @@
   transform-origin: center center;
 }
 
-.image_fullWidth__ZH91W{width:100%}
-.image_center__Hfsuj{margin-left:auto;margin-right:auto}
+.image_fullWidth__M5NBA{width:100%}
+.image_center__hG6ii{margin-left:auto;margin-right:auto}

package/artifacts/preview/teambit_scope_scope-preview.js

@@ -1,2 +1,2 @@
 /*! For license information please see teambit_scope_scope-preview.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.scope/scope-preview"]=t():e["teambit.scope/scope-preview"]=t()}(self,(()=>(()=>{var e={5576:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)&&n.length){var a=r.apply(null,n);a&&e.push(a)}else if("object"===i)for(var s in n)o.call(n,s)&&n[s]&&e.push(s)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},61844:()=>{!function(){if("undefined"!=typeof window&&"undefined"!=typeof document&&"undefined"!=typeof HTMLElement){var e=!1;try{var t=document.createElement("div");t.addEventListener("focus",(function(e){e.preventDefault(),e.stopPropagation()}),!0),t.focus(Object.defineProperty({},"preventScroll",{get:function(){e=!0}}))}catch(e){}void 0!==HTMLElement.prototype.nativeFocus||e||(HTMLElement.prototype.nativeFocus=HTMLElement.prototype.focus,HTMLElement.prototype.focus=function(e){var t=window.scrollY||window.pageYOffset;this.nativeFocus(),e&&e.preventScroll&&setTimeout((function(){window.scroll(window.scrollX||window.pageXOffset,t)}),0)})}}()},42263:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)){if(n.length){var a=r.apply(null,n);a&&e.push(a)}}else if("object"===i)if(n.toString===Object.prototype.toString)for(var s in n)o.call(n,s)&&n[s]&&e.push(s);else e.push(n.toString())}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},75902:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isNavigator=t.isBrowser=t.off=t.on=t.noop=void 0,t.noop=function(){},t.on=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.addEventListener&&e.addEventListener.apply(e,t)},t.off=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.removeEventListener&&e.removeEventListener.apply(e,t)},t.isBrowser="undefined"!=typeof window,t.isNavigator="undefined"!=typeof navigator},17352:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(87363);t.default=function(e){o.useEffect(e,[])}},29918:(e,t,n)=>{"use strict";var o=n(87363),r=n(75902),i=r.isBrowser?window:null,a=function(e){return!!e.addEventListener},s=function(e){return!!e.on};t.Z=function(e,t,n,c){void 0===n&&(n=i),o.useEffect((function(){if(t&&n)return a(n)?r.on(n,e,t,c):s(n)&&n.on(e,t,c),function(){a(n)?r.off(n,e,t,c):s(n)&&n.off(e,t,c)}}),[e,t,n,JSON.stringify(c)])}},52135:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(78655),r=n(87363),i=o.__importDefault(n(40042));t.default=function(e){var t=r.useRef(0),n=r.useState(e),o=n[0],a=n[1],s=r.useCallback((function(e){cancelAnimationFrame(t.current),t.current=requestAnimationFrame((function(){a(e)}))}),[]);return i.default((function(){cancelAnimationFrame(t.current)})),[o,s]}},40042:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(78655),r=n(87363),i=o.__importDefault(n(17352));t.default=function(e){var t=r.useRef(e);t.current=e,i.default((function(){return function(){return t.current()}}))}},76175:(e,t,n)=>{"use strict";var o=n(78655),r=n(87363),i=o.__importDefault(n(52135)),a=n(75902);t.Z=function(e,t){void 0===e&&(e=1/0),void 0===t&&(t=1/0);var n=i.default({width:a.isBrowser?window.innerWidth:e,height:a.isBrowser?window.innerHeight:t}),o=n[0],s=n[1];return r.useEffect((function(){if(a.isBrowser){var e=function(){s({width:window.innerWidth,height:window.innerHeight})};return a.on(window,"resize",e),function(){a.off(window,"resize",e)}}}),[]),o}},58500:(e,t,n)=>{"use strict";var o={id:"teambit.scope/scope@1.0.122",homepage:"https://bit.cloud/teambit/scope/scope",exported:!0};function r(){const e=i(n(87363));return r=function(){return e},e}function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=o,i.__bit_component=o;const a=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/scope.svg"}));a.__bit_component=o,t.Logo=a},54548:function(e,t,n){"use strict";var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.BaseImage=void 0;const i=r(n(87363)),a=r(n(5576)),s=r(n(23302));function c(e){var{alt:t,className:n,fullWidth:r}=e,c=o(e,["alt","className","fullWidth"]);return i.default.createElement("img",Object.assign({"data-bit-id":"teambit.base-ui/elements/image",alt:t},c,{className:a.default(s.default.image,r&&s.default.fullWidth,n)}))}c.__bit_component={id:"teambit.base-ui/elements/image@1.0.0",homepage:"https://bit.dev/teambit/base-ui/elements/image",exported:!0},t.BaseImage=c},37706:function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||o(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),r(n(54548),t)},55113:(e,t,n)=>{"use strict";n.r(t),n.d(t,{Image:()=>y});var o=n(87363),r=n.n(o),i=n(42263),a=n.n(i);n(61844);const s=ReactDom;var c=n(29918),l=n(76175),u=n(78655),p=function(e){return e+"ms"},f={getBoundingClientRect:function(){return{height:0,left:0,top:0,width:0}},style:{transform:null}},d=(0,o.memo)((function(e){var t=e.children,n=e.closeText,i=void 0===n?"Unzoom Image":n,a=e.onUnload,d=e.onLoad,m=e.overlayBgColorEnd,h=void 0===m?"rgba(255, 255, 255, 0.95)":m,y=e.overlayBgColorStart,v=void 0===y?"rgba(255, 255, 255, 0)":y,b=e.parentRef,g=e.portalEl,_=void 0===g?document.body:g,w=e.scrollableEl,x=void 0===w?window:w,O=e.transitionDuration,j=void 0===O?300:O,S=e.zoomMargin,P=void 0===S?0:S,E=e.zoomZindex,T=void 0===E?2147483647:E,k=(0,o.useRef)(null),M=(0,o.useState)(0)[1],D=(0,o.useState)(!1),C=D[0],I=D[1],B=(0,o.useState)(!1),z=B[0],N=B[1],A=(0,l.Z)(),R=A.width,L=A.height,W=(0,o.useCallback)((function(e){e.preventDefault(),N(!0)}),[]),F=(0,o.useCallback)((function(e){"Escape"!==e.key&&27!==e.keyCode||(e.stopPropagation(),N(!0))}),[]),H=(0,o.useCallback)((function(){M((function(e){return e+1})),z||N(!0)}),[z]);(0,c.Z)("keydown",F,document),(0,c.Z)("scroll",H,x),(0,o.useEffect)((function(){I(!0),d(),k.current&&k.current.focus({preventScroll:!0})}),[d]),(0,o.useEffect)((function(){var e=z?setTimeout(a,j):null;return function(){e&&clearTimeout(e)}}),[z,a,j]);var Z=b.current||f,X=Z.getBoundingClientRect(),U=X.height,G=X.left,$=X.top,J=X.width,V=function(e){var t=e.isLoaded,n=e.isUnloading,o=e.overlayBgColorEnd,r=e.zoomZindex,i={backgroundColor:e.overlayBgColorStart,transitionDuration:p(e.transitionDuration),zIndex:r};return t&&!n&&(i.backgroundColor=o),i}({isLoaded:C,isUnloading:z,overlayBgColorEnd:h,overlayBgColorStart:v,transitionDuration:j,zoomZindex:T}),Y=function(e){var t=e.height,n=e.innerHeight,o=e.innerWidth,r=e.isLoaded,i=e.isUnloading,a=e.left,s=e.originalTransform,c=e.top,l=e.transitionDuration,f=e.width,d=e.zoomMargin,m=p(l);if(!r||i){var h=(0,u.__spreadArrays)(["scale(1)","translate(0, 0)"],s?[s]:[]).join(" ");return{height:t,left:a,top:c,transform:h,WebkitTransform:h,transitionDuration:m,width:f}}var y=function(e){var t=e.zoomMargin,n=e.innerWidth/(e.width+t),o=e.innerHeight/(e.height+t);return Math.min(n,o)}({height:t,innerWidth:o,innerHeight:n,width:f,zoomMargin:d}),v=(o/2-(a+f/2))/y,b=(n/2-(c+t/2))/y,g=(0,u.__spreadArrays)(["scale("+y+")","translate("+v+"px, "+b+"px)"],s?[s]:[]).join(" ");return{height:t,left:a,top:c,transform:g,WebkitTransform:g,transitionDuration:m,width:f}}({height:U,isLoaded:C,innerHeight:L,innerWidth:R,isUnloading:z,left:G,originalTransform:Z.style.transform,top:$,transitionDuration:j,width:J,zoomMargin:P});return(0,s.createPortal)(r().createElement("div",{"aria-modal":!0,"data-rmiz-overlay":!0,role:"dialog",style:V},r().createElement("div",{"data-rmiz-modal-content":!0,style:Y},t),r().createElement("button",{"aria-label":i,"data-rmiz-btn-close":!0,onClick:W,ref:k})),_)}));const m=(0,o.memo)((function(e){var t=e.children,n=e.closeText,i=void 0===n?"Unzoom image":n,a=e.overlayBgColorEnd,s=void 0===a?"rgba(255, 255, 255, 0.95)":a,c=e.overlayBgColorStart,l=void 0===c?"rgba(255, 255, 255, 0)":c,u=e.portalEl,p=e.openText,f=void 0===p?"Zoom image":p,m=e.scrollableEl,h=e.transitionDuration,y=void 0===h?300:h,v=e.wrapElement,b=void 0===v?"div":v,g=e.wrapStyle,_=e.zoomMargin,w=void 0===_?0:_,x=e.zoomZindex,O=void 0===x?2147483647:x,j=(0,o.useState)(!1),S=j[0],P=j[1],E=(0,o.useState)(!1),T=E[0],k=E[1],M=(0,o.useRef)(null),D=(0,o.useRef)(null),C=(0,o.useCallback)((function(e){S||(e.preventDefault(),P(!0))}),[S]),I=(0,o.useCallback)((function(){k(!0)}),[]),B=(0,o.useCallback)((function(){P(!1),k(!1),D.current&&D.current.focus({preventScroll:!0})}),[]),z=S&&T?"hidden":"visible";return r().createElement(o.StrictMode,null,r().createElement(b,{"data-rmiz-wrap":z,ref:M,style:g},t,r().createElement("button",{"aria-label":f,"data-rmiz-btn-open":!0,onClick:C,ref:D}),"undefined"!=typeof window&&S&&r().createElement(d,{closeText:i,onLoad:I,onUnload:B,overlayBgColorEnd:s,overlayBgColorStart:l,parentRef:M,portalEl:u,scrollableEl:m,transitionDuration:y,zoomMargin:w,zoomZindex:O},t)))}));var h=n(37706);const y=e=>{var{center:t=!0,width:n,alt:o,src:i,className:s}=e,c=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["center","width","alt","src","className"]);return r().createElement("div",{style:{width:n||"100%"},className:a()(t&&"image_center__Hfsuj",s)},r().createElement(m,null,r().createElement(h.BaseImage,Object.assign({fullWidth:!0,alt:o,src:i},c))))};y.__bit_component={id:"teambit.docs/ui/zoomable-image@1.95.0",homepage:"https://bit.dev/teambit/docs/ui/zoomable-image",exported:!0}},43077:(e,t,n)=>{"use strict";Object.defineProperty(t,"ZP",{enumerable:!0,get:function(){return o.default}});var o=r(n(16015));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.scope/content/scope-overview@1.95.0",homepage:"https://bit.dev/teambit/scope/content/scope-overview",exported:!0}},16015:(e,t,n)=>{"use strict";var o={id:"teambit.scope/content/scope-overview@1.95.0",homepage:"https://bit.dev/teambit/scope/content/scope-overview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=v,p(n(87363));var r=n(40040),i=n(70500),a=p(n(24783)),s=p(n(35574)),c=p(n(34599)),l=n(55113),u=["components"];function p(e){return e&&e.__esModule?e:{default:e}}function f(){return f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},f.apply(this,arguments)}function d(e,t){if(null==e)return{};var n,o,r=m(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function m(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}p.__bit_component=o,f.__bit_component=o,d.__bit_component=o,m.__bit_component=o;var h={},y="wrapper";function v(e){var t=e.components,n=d(e,u);return(0,r.mdx)(y,f({},h,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(i.MDXScopeProvider,{components:{scopeImage:a.default,scopeGraph:s.default,componentTypes:c.default,Image:l.Image},mdxType:"MDXScopeProvider"},(0,r.mdx)("h1",null,"Scope Overview"),(0,r.mdx)("p",null,"Scope is a server for hosting components. Scopes help teams to share and use each other's components as by preserving team autonomy through versioning, forking, storing dependencies, and collaborate on changes of independent components.\nScopes defines ownership on components, as a single team owns the components exported to scope."),(0,r.mdx)(l.Image,{width:"70%",src:a.default,mdxType:"Image"}),(0,r.mdx)("h2",null,"Full stack of functionality"),(0,r.mdx)("p",null,"Scopes host components of any kind, from React, Angular and Node modules, all the way to a frontend apps or microservices. For a scope they are all Bit Components.",(0,r.mdx)("br",{parentName:"p"}),"\n","For example, the ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/mdx"},"MDX scope"),' contains all components relevant to handling MDX functionality in Bit. It exposes various types of components (or "APIs") to achieve this: Webpack loader, Node modules, React components and even a ',(0,r.mdx)("a",{parentName:"p",href:"/"},"Bit Aspect"),". This makes it easy for other teams to take leverage of MDX, not just as a feature but also as an API for their features."),(0,r.mdx)("p",null,"Scopes support various methods for using components, from adding as dependencies to runtime integrations, allowing the consumer to decide how whats the best solution for their use case."),(0,r.mdx)(l.Image,{width:"70%",src:c.default,mdxType:"Image"}),(0,r.mdx)("h2",null,"Team collaboration using components"),(0,r.mdx)("p",null,"Scopes provides visibility to components built by other teams, this is the first step towards better collaboration. Developers can find, use and depend on components by other teams. Instead of reinventing the wheel and rebuilding the same functionality, component visibility drives for collaboration. It is similar to how teams build with microservices and build team communication and collaboration by using each-other's APIs.",(0,r.mdx)("br",{parentName:"p"}),"\n","Moreover, developers can use ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," and access to any component's source code and contribute change to collaborate on components."),(0,r.mdx)("p",null,"Bit keeps track on all these dependencies and flows, making team collaboration visible, easy to extend and optimize."),(0,r.mdx)(l.Image,{width:"70%",src:s.default,mdxType:"Image"}),(0,r.mdx)("h2",null,"Distributed and autonomous"),(0,r.mdx)("p",null,"Hosted scopes form a distributed network, where each scope is connected to the other scopes according to component dependencies. Each scope stores not only the components it hosts, but also the dependencies of those components.",(0,r.mdx)("br",{parentName:"p"}),"\n","When you export a component, the scope then does network calls to fetch the dependencies of the component from their respective scopes. This means that each scope becomes autonomous, as it contains all the dependencies needed to its components to run. In turn this makes teams more autonomous, as they can now build and use their components without having to worry about the dependencies."),(0,r.mdx)("p",null,"Scopes use standard HTTP for inner-scope communication, however, when building a network of scopes, you need to ensure scopes are able to connect to one another to fetch dependencies."),(0,r.mdx)("h2",null,"Source of truth"),(0,r.mdx)("p",null,"Scopes become the source of truth for components. Allowing different stakeholders to collaborate and work together from the same, or from different Workspaces.\nComponents can be maintained from multiple Workspaces in parallel, while Scopes are keeping them in sync, merging changes for all ends."),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," can be used to fetch component updates. Using ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," is similar to using ",(0,r.mdx)("inlineCode",{parentName:"p"},"git fetch")," where new objects are being fetched but not checked out in your workspace.  "),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"$ bit import\n⡃⢐ fetching 143 components from 18 remotes. delta-only: 143, all-history: 0.\n- up to date teambit.community/ui/hero   \n- up to date teambit.community/ui/homepage/sections/distribution   \n- updated teambit.design/ui/layouts/sections/left-right   \n- updated teambit.design/ui/layouts/sections/section-group   \n- updated teambit.design/ui/layouts/sections/top-down   \n")),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"bit export")," is used to share component changes with others. It pushes new objects from a local Workspace to a remote Scope, allowing others to keep in sync with the latest\ncomponent changes."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"$ bit export\nexported 8 components successfully to remote scope `community`\n"))))}v.__bit_component=o,v.isMDXComponent=!0},23302:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});const o={fullWidth:"image_fullWidth__ZH91W"}},34599:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/3a1072c009accd203fa8.png"},35574:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/ccf5ea377e3a1a72829d.png"},24783:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/aef2176d16de53259dad.png"},40040:e=>{"use strict";e.exports=MdxJsReact},87363:e=>{"use strict";e.exports=React},70500:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext},78655:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>B,__assign:()=>i,__asyncDelegator:()=>S,__asyncGenerator:()=>j,__asyncValues:()=>P,__await:()=>O,__awaiter:()=>m,__classPrivateFieldGet:()=>D,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>C,__createBinding:()=>y,__decorate:()=>s,__disposeResources:()=>N,__esDecorate:()=>l,__exportStar:()=>v,__extends:()=>r,__generator:()=>h,__importDefault:()=>M,__importStar:()=>k,__makeTemplateObject:()=>E,__metadata:()=>d,__param:()=>c,__propKey:()=>p,__read:()=>g,__rest:()=>a,__runInitializers:()=>u,__setFunctionName:()=>f,__spread:()=>_,__spreadArray:()=>x,__spreadArrays:()=>w,__values:()=>b,default:()=>A});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},o(e,t)};function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}function s(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function c(e,t){return function(n,o){t(n,o,e)}}function l(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=o.kind,l="getter"===c?"get":"setter"===c?"set":"value",u=!t&&e?o.static?e:e.prototype:null,p=t||(u?Object.getOwnPropertyDescriptor(u,o.name):{}),f=!1,d=n.length-1;d>=0;d--){var m={};for(var h in o)m[h]="access"===h?{}:o[h];for(var h in o.access)m.access[h]=o.access[h];m.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var y=(0,n[d])("accessor"===c?{get:p.get,set:p.set}:p[l],m);if("accessor"===c){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(s=a(y.get))&&(p.get=s),(s=a(y.set))&&(p.set=s),(s=a(y.init))&&r.unshift(s)}else(s=a(y))&&("field"===c?r.unshift(s):p[l]=s)}u&&Object.defineProperty(u,o.name,p),f=!0}function u(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0}function p(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function m(e,t,n,o){return new(n||(n=Promise))((function(r,i){function a(e){try{c(o.next(e))}catch(e){i(e)}}function s(e){try{c(o.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((o=o.apply(e,t||[])).next())}))}function h(e,t){var n,o,r,i,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(c){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(r=2&s[0]?o.return:s[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;switch(o=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!((r=(r=a.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){a.label=s[1];break}if(6===s[0]&&a.label<r[1]){a.label=r[1],r=s;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(s);break}r[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],o=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var y=Object.create?function(e,t,n,o){void 0===o&&(o=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,r)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]};function v(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||y(t,e,n)}function b(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function g(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function _(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(g(arguments[t]));return e}function w(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var o=Array(e),r=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,s=i.length;a<s;a++,r++)o[r]=i[a];return o}function x(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function j(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,r=n.apply(e,t||[]),i=[];return o={},a("next"),a("throw"),a("return"),o[Symbol.asyncIterator]=function(){return this},o;function a(e){r[e]&&(o[e]=function(t){return new Promise((function(n,o){i.push([e,t,n,o])>1||s(e,t)}))})}function s(e,t){try{(n=r[e](t)).value instanceof O?Promise.resolve(n.value.v).then(c,l):u(i[0][2],n)}catch(e){u(i[0][3],e)}var n}function c(e){s("next",e)}function l(e){s("throw",e)}function u(e,t){e(t),i.shift(),i.length&&s(i[0][0],i[0][1])}}function S(e){var t,n;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,r){t[o]=e[o]?function(t){return(n=!n)?{value:O(e[o](t)),done:!1}:r?r(t):t}:r}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=b(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(n){t[n]=e[n]&&function(t){return new Promise((function(o,r){!function(e,t,n,o){Promise.resolve(o).then((function(t){e({value:t,done:n})}),t)}(o,r,(t=e[n](t)).done,t.value)}))}}}function E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function k(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&y(t,e,n);return T(t,e),t}function M(e){return e&&e.__esModule?e:{default:e}}function D(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function C(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function B(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var o;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");o=t[Symbol.asyncDispose]}if(void 0===o){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");o=t[Symbol.dispose]}if("function"!=typeof o)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:o,async:n})}else n&&e.stack.push({async:!0});return t}var z="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var o=new Error(n);return o.name="SuppressedError",o.error=e,o.suppressed=t,o};function N(e){function t(t){e.error=e.hasError?new z(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function n(){for(;e.stack.length;){var o=e.stack.pop();try{var r=o.dispose&&o.dispose.call(o.value);if(o.async)return Promise.resolve(r).then(n,(function(e){return t(e),n()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const A={__extends:r,__assign:i,__rest:a,__decorate:s,__param:c,__metadata:d,__awaiter:m,__generator:h,__createBinding:y,__exportStar:v,__values:b,__read:g,__spread:_,__spreadArrays:w,__spreadArray:x,__await:O,__asyncGenerator:j,__asyncDelegator:S,__asyncValues:P,__makeTemplateObject:E,__importStar:k,__importDefault:M,__classPrivateFieldGet:D,__classPrivateFieldSet:C,__classPrivateFieldIn:I,__addDisposableResource:B,__disposeResources:N}}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o].call(i.exports,i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");if(o.length)for(var r=o.length-1;r>-1&&!e;)e=o[r--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})();var o={};return(()=>{"use strict";n.r(o),n.d(o,{compositions:()=>f,compositions_metadata:()=>m,overview:()=>d});var e={};n.r(e),n.d(e,{default:()=>p});var t=n(58500),r=(n(87363),n(40040)),i=n(70500),a=n(43077),s=["components"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(this,arguments)}var l={},u="wrapper";function p(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,s);return(0,r.mdx)(u,c({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(i.MDXScopeProvider,{components:{ScopeOverview:a.ZP},mdxType:"MDXScopeProvider"},(0,r.mdx)(a.ZP,{mdxType:"ScopeOverview"})))}p.isMDXComponent=!0;const f=[t],d=[e],m={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.scope/scope-preview"]=t():e["teambit.scope/scope-preview"]=t()}(self,(()=>(()=>{var e={5576:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)&&n.length){var a=r.apply(null,n);a&&e.push(a)}else if("object"===i)for(var s in n)o.call(n,s)&&n[s]&&e.push(s)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},61844:()=>{!function(){if("undefined"!=typeof window&&"undefined"!=typeof document&&"undefined"!=typeof HTMLElement){var e=!1;try{var t=document.createElement("div");t.addEventListener("focus",(function(e){e.preventDefault(),e.stopPropagation()}),!0),t.focus(Object.defineProperty({},"preventScroll",{get:function(){e=!0}}))}catch(e){}void 0!==HTMLElement.prototype.nativeFocus||e||(HTMLElement.prototype.nativeFocus=HTMLElement.prototype.focus,HTMLElement.prototype.focus=function(e){var t=window.scrollY||window.pageYOffset;this.nativeFocus(),e&&e.preventScroll&&setTimeout((function(){window.scroll(window.scrollX||window.pageXOffset,t)}),0)})}}()},65461:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)){if(n.length){var a=r.apply(null,n);a&&e.push(a)}}else if("object"===i)if(n.toString===Object.prototype.toString)for(var s in n)o.call(n,s)&&n[s]&&e.push(s);else e.push(n.toString())}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},13442:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isNavigator=t.isBrowser=t.off=t.on=t.noop=void 0,t.noop=function(){},t.on=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.addEventListener&&e.addEventListener.apply(e,t)},t.off=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.removeEventListener&&e.removeEventListener.apply(e,t)},t.isBrowser="undefined"!=typeof window,t.isNavigator="undefined"!=typeof navigator},39039:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(87363);t.default=function(e){o.useEffect(e,[])}},31277:(e,t,n)=>{"use strict";var o=n(87363),r=n(13442),i=r.isBrowser?window:null,a=function(e){return!!e.addEventListener},s=function(e){return!!e.on};t.Z=function(e,t,n,c){void 0===n&&(n=i),o.useEffect((function(){if(t&&n)return a(n)?r.on(n,e,t,c):s(n)&&n.on(e,t,c),function(){a(n)?r.off(n,e,t,c):s(n)&&n.off(e,t,c)}}),[e,t,n,JSON.stringify(c)])}},18312:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(78655),r=n(87363),i=o.__importDefault(n(55070));t.default=function(e){var t=r.useRef(0),n=r.useState(e),o=n[0],a=n[1],s=r.useCallback((function(e){cancelAnimationFrame(t.current),t.current=requestAnimationFrame((function(){a(e)}))}),[]);return i.default((function(){cancelAnimationFrame(t.current)})),[o,s]}},55070:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(78655),r=n(87363),i=o.__importDefault(n(39039));t.default=function(e){var t=r.useRef(e);t.current=e,i.default((function(){return function(){return t.current()}}))}},65634:(e,t,n)=>{"use strict";var o=n(78655),r=n(87363),i=o.__importDefault(n(18312)),a=n(13442);t.Z=function(e,t){void 0===e&&(e=1/0),void 0===t&&(t=1/0);var n=i.default({width:a.isBrowser?window.innerWidth:e,height:a.isBrowser?window.innerHeight:t}),o=n[0],s=n[1];return r.useEffect((function(){if(a.isBrowser){var e=function(){s({width:window.innerWidth,height:window.innerHeight})};return a.on(window,"resize",e),function(){a.off(window,"resize",e)}}}),[]),o}},94952:(e,t,n)=>{"use strict";var o={id:"teambit.scope/scope@1.0.123",homepage:"https://bit.cloud/teambit/scope/scope",exported:!0};function r(){const e=i(n(87363));return r=function(){return e},e}function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=o,i.__bit_component=o;const a=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/scope.svg"}));a.__bit_component=o,t.Logo=a},30475:function(e,t,n){"use strict";var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.BaseImage=void 0;const i=r(n(87363)),a=r(n(5576)),s=r(n(18564));function c(e){var{alt:t,className:n,fullWidth:r}=e,c=o(e,["alt","className","fullWidth"]);return i.default.createElement("img",Object.assign({"data-bit-id":"teambit.base-ui/elements/image",alt:t},c,{className:a.default(s.default.image,r&&s.default.fullWidth,n)}))}c.__bit_component={id:"teambit.base-ui/elements/image@1.0.0",homepage:"https://bit.dev/teambit/base-ui/elements/image",exported:!0},t.BaseImage=c},42366:function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||o(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),r(n(30475),t)},78968:(e,t,n)=>{"use strict";n.r(t),n.d(t,{Image:()=>y});var o=n(87363),r=n.n(o),i=n(65461),a=n.n(i);n(61844);const s=ReactDom;var c=n(31277),l=n(65634),u=n(78655),p=function(e){return e+"ms"},f={getBoundingClientRect:function(){return{height:0,left:0,top:0,width:0}},style:{transform:null}},d=(0,o.memo)((function(e){var t=e.children,n=e.closeText,i=void 0===n?"Unzoom Image":n,a=e.onUnload,d=e.onLoad,m=e.overlayBgColorEnd,h=void 0===m?"rgba(255, 255, 255, 0.95)":m,y=e.overlayBgColorStart,v=void 0===y?"rgba(255, 255, 255, 0)":y,b=e.parentRef,g=e.portalEl,_=void 0===g?document.body:g,w=e.scrollableEl,x=void 0===w?window:w,O=e.transitionDuration,j=void 0===O?300:O,S=e.zoomMargin,P=void 0===S?0:S,E=e.zoomZindex,T=void 0===E?2147483647:E,k=(0,o.useRef)(null),M=(0,o.useState)(0)[1],D=(0,o.useState)(!1),C=D[0],I=D[1],B=(0,o.useState)(!1),N=B[0],z=B[1],A=(0,l.Z)(),R=A.width,L=A.height,W=(0,o.useCallback)((function(e){e.preventDefault(),z(!0)}),[]),F=(0,o.useCallback)((function(e){"Escape"!==e.key&&27!==e.keyCode||(e.stopPropagation(),z(!0))}),[]),Z=(0,o.useCallback)((function(){M((function(e){return e+1})),N||z(!0)}),[N]);(0,c.Z)("keydown",F,document),(0,c.Z)("scroll",Z,x),(0,o.useEffect)((function(){I(!0),d(),k.current&&k.current.focus({preventScroll:!0})}),[d]),(0,o.useEffect)((function(){var e=N?setTimeout(a,j):null;return function(){e&&clearTimeout(e)}}),[N,a,j]);var H=b.current||f,X=H.getBoundingClientRect(),U=X.height,G=X.left,$=X.top,J=X.width,V=function(e){var t=e.isLoaded,n=e.isUnloading,o=e.overlayBgColorEnd,r=e.zoomZindex,i={backgroundColor:e.overlayBgColorStart,transitionDuration:p(e.transitionDuration),zIndex:r};return t&&!n&&(i.backgroundColor=o),i}({isLoaded:C,isUnloading:N,overlayBgColorEnd:h,overlayBgColorStart:v,transitionDuration:j,zoomZindex:T}),Y=function(e){var t=e.height,n=e.innerHeight,o=e.innerWidth,r=e.isLoaded,i=e.isUnloading,a=e.left,s=e.originalTransform,c=e.top,l=e.transitionDuration,f=e.width,d=e.zoomMargin,m=p(l);if(!r||i){var h=(0,u.__spreadArrays)(["scale(1)","translate(0, 0)"],s?[s]:[]).join(" ");return{height:t,left:a,top:c,transform:h,WebkitTransform:h,transitionDuration:m,width:f}}var y=function(e){var t=e.zoomMargin,n=e.innerWidth/(e.width+t),o=e.innerHeight/(e.height+t);return Math.min(n,o)}({height:t,innerWidth:o,innerHeight:n,width:f,zoomMargin:d}),v=(o/2-(a+f/2))/y,b=(n/2-(c+t/2))/y,g=(0,u.__spreadArrays)(["scale("+y+")","translate("+v+"px, "+b+"px)"],s?[s]:[]).join(" ");return{height:t,left:a,top:c,transform:g,WebkitTransform:g,transitionDuration:m,width:f}}({height:U,isLoaded:C,innerHeight:L,innerWidth:R,isUnloading:N,left:G,originalTransform:H.style.transform,top:$,transitionDuration:j,width:J,zoomMargin:P});return(0,s.createPortal)(r().createElement("div",{"aria-modal":!0,"data-rmiz-overlay":!0,role:"dialog",style:V},r().createElement("div",{"data-rmiz-modal-content":!0,style:Y},t),r().createElement("button",{"aria-label":i,"data-rmiz-btn-close":!0,onClick:W,ref:k})),_)}));const m=(0,o.memo)((function(e){var t=e.children,n=e.closeText,i=void 0===n?"Unzoom image":n,a=e.overlayBgColorEnd,s=void 0===a?"rgba(255, 255, 255, 0.95)":a,c=e.overlayBgColorStart,l=void 0===c?"rgba(255, 255, 255, 0)":c,u=e.portalEl,p=e.openText,f=void 0===p?"Zoom image":p,m=e.scrollableEl,h=e.transitionDuration,y=void 0===h?300:h,v=e.wrapElement,b=void 0===v?"div":v,g=e.wrapStyle,_=e.zoomMargin,w=void 0===_?0:_,x=e.zoomZindex,O=void 0===x?2147483647:x,j=(0,o.useState)(!1),S=j[0],P=j[1],E=(0,o.useState)(!1),T=E[0],k=E[1],M=(0,o.useRef)(null),D=(0,o.useRef)(null),C=(0,o.useCallback)((function(e){S||(e.preventDefault(),P(!0))}),[S]),I=(0,o.useCallback)((function(){k(!0)}),[]),B=(0,o.useCallback)((function(){P(!1),k(!1),D.current&&D.current.focus({preventScroll:!0})}),[]),N=S&&T?"hidden":"visible";return r().createElement(o.StrictMode,null,r().createElement(b,{"data-rmiz-wrap":N,ref:M,style:g},t,r().createElement("button",{"aria-label":f,"data-rmiz-btn-open":!0,onClick:C,ref:D}),"undefined"!=typeof window&&S&&r().createElement(d,{closeText:i,onLoad:I,onUnload:B,overlayBgColorEnd:s,overlayBgColorStart:l,parentRef:M,portalEl:u,scrollableEl:m,transitionDuration:y,zoomMargin:w,zoomZindex:O},t)))}));var h=n(42366);const y=e=>{var{center:t=!0,width:n,alt:o,src:i,className:s}=e,c=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["center","width","alt","src","className"]);return r().createElement("div",{style:{width:n||"100%"},className:a()(t&&"image_center__hG6ii",s)},r().createElement(m,null,r().createElement(h.BaseImage,Object.assign({fullWidth:!0,alt:o,src:i},c))))};y.__bit_component={id:"teambit.docs/ui/zoomable-image@1.95.0",homepage:"https://bit.dev/teambit/docs/ui/zoomable-image",exported:!0}},490:(e,t,n)=>{"use strict";Object.defineProperty(t,"ZP",{enumerable:!0,get:function(){return o.default}});var o=r(n(73864));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.scope/content/scope-overview@1.95.0",homepage:"https://bit.dev/teambit/scope/content/scope-overview",exported:!0}},73864:(e,t,n)=>{"use strict";var o={id:"teambit.scope/content/scope-overview@1.95.0",homepage:"https://bit.dev/teambit/scope/content/scope-overview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=v,p(n(87363));var r=n(40040),i=n(70500),a=p(n(30819)),s=p(n(58111)),c=p(n(71058)),l=n(78968),u=["components"];function p(e){return e&&e.__esModule?e:{default:e}}function f(){return f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},f.apply(this,arguments)}function d(e,t){if(null==e)return{};var n,o,r=m(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function m(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}p.__bit_component=o,f.__bit_component=o,d.__bit_component=o,m.__bit_component=o;var h={},y="wrapper";function v(e){var t=e.components,n=d(e,u);return(0,r.mdx)(y,f({},h,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(i.MDXScopeProvider,{components:{scopeImage:a.default,scopeGraph:s.default,componentTypes:c.default,Image:l.Image},mdxType:"MDXScopeProvider"},(0,r.mdx)("h1",null,"Scope Overview"),(0,r.mdx)("p",null,"Scope is a server for hosting components. Scopes help teams to share and use each other's components as by preserving team autonomy through versioning, forking, storing dependencies, and collaborate on changes of independent components.\nScopes defines ownership on components, as a single team owns the components exported to scope."),(0,r.mdx)(l.Image,{width:"70%",src:a.default,mdxType:"Image"}),(0,r.mdx)("h2",null,"Full stack of functionality"),(0,r.mdx)("p",null,"Scopes host components of any kind, from React, Angular and Node modules, all the way to a frontend apps or microservices. For a scope they are all Bit Components.",(0,r.mdx)("br",{parentName:"p"}),"\n","For example, the ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/mdx"},"MDX scope"),' contains all components relevant to handling MDX functionality in Bit. It exposes various types of components (or "APIs") to achieve this: Webpack loader, Node modules, React components and even a ',(0,r.mdx)("a",{parentName:"p",href:"/"},"Bit Aspect"),". This makes it easy for other teams to take leverage of MDX, not just as a feature but also as an API for their features."),(0,r.mdx)("p",null,"Scopes support various methods for using components, from adding as dependencies to runtime integrations, allowing the consumer to decide how whats the best solution for their use case."),(0,r.mdx)(l.Image,{width:"70%",src:c.default,mdxType:"Image"}),(0,r.mdx)("h2",null,"Team collaboration using components"),(0,r.mdx)("p",null,"Scopes provides visibility to components built by other teams, this is the first step towards better collaboration. Developers can find, use and depend on components by other teams. Instead of reinventing the wheel and rebuilding the same functionality, component visibility drives for collaboration. It is similar to how teams build with microservices and build team communication and collaboration by using each-other's APIs.",(0,r.mdx)("br",{parentName:"p"}),"\n","Moreover, developers can use ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," and access to any component's source code and contribute change to collaborate on components."),(0,r.mdx)("p",null,"Bit keeps track on all these dependencies and flows, making team collaboration visible, easy to extend and optimize."),(0,r.mdx)(l.Image,{width:"70%",src:s.default,mdxType:"Image"}),(0,r.mdx)("h2",null,"Distributed and autonomous"),(0,r.mdx)("p",null,"Hosted scopes form a distributed network, where each scope is connected to the other scopes according to component dependencies. Each scope stores not only the components it hosts, but also the dependencies of those components.",(0,r.mdx)("br",{parentName:"p"}),"\n","When you export a component, the scope then does network calls to fetch the dependencies of the component from their respective scopes. This means that each scope becomes autonomous, as it contains all the dependencies needed to its components to run. In turn this makes teams more autonomous, as they can now build and use their components without having to worry about the dependencies."),(0,r.mdx)("p",null,"Scopes use standard HTTP for inner-scope communication, however, when building a network of scopes, you need to ensure scopes are able to connect to one another to fetch dependencies."),(0,r.mdx)("h2",null,"Source of truth"),(0,r.mdx)("p",null,"Scopes become the source of truth for components. Allowing different stakeholders to collaborate and work together from the same, or from different Workspaces.\nComponents can be maintained from multiple Workspaces in parallel, while Scopes are keeping them in sync, merging changes for all ends."),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," can be used to fetch component updates. Using ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," is similar to using ",(0,r.mdx)("inlineCode",{parentName:"p"},"git fetch")," where new objects are being fetched but not checked out in your workspace.  "),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"$ bit import\n⡃⢐ fetching 143 components from 18 remotes. delta-only: 143, all-history: 0.\n- up to date teambit.community/ui/hero   \n- up to date teambit.community/ui/homepage/sections/distribution   \n- updated teambit.design/ui/layouts/sections/left-right   \n- updated teambit.design/ui/layouts/sections/section-group   \n- updated teambit.design/ui/layouts/sections/top-down   \n")),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"bit export")," is used to share component changes with others. It pushes new objects from a local Workspace to a remote Scope, allowing others to keep in sync with the latest\ncomponent changes."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"$ bit export\nexported 8 components successfully to remote scope `community`\n"))))}v.__bit_component=o,v.isMDXComponent=!0},18564:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});const o={fullWidth:"image_fullWidth__M5NBA"}},71058:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/3a1072c009accd203fa8.png"},58111:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/ccf5ea377e3a1a72829d.png"},30819:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/aef2176d16de53259dad.png"},40040:e=>{"use strict";e.exports=MdxJsReact},87363:e=>{"use strict";e.exports=React},70500:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext},78655:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>B,__assign:()=>i,__asyncDelegator:()=>S,__asyncGenerator:()=>j,__asyncValues:()=>P,__await:()=>O,__awaiter:()=>m,__classPrivateFieldGet:()=>D,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>C,__createBinding:()=>y,__decorate:()=>s,__disposeResources:()=>z,__esDecorate:()=>l,__exportStar:()=>v,__extends:()=>r,__generator:()=>h,__importDefault:()=>M,__importStar:()=>k,__makeTemplateObject:()=>E,__metadata:()=>d,__param:()=>c,__propKey:()=>p,__read:()=>g,__rest:()=>a,__runInitializers:()=>u,__setFunctionName:()=>f,__spread:()=>_,__spreadArray:()=>x,__spreadArrays:()=>w,__values:()=>b,default:()=>A});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},o(e,t)};function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}function s(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function c(e,t){return function(n,o){t(n,o,e)}}function l(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=o.kind,l="getter"===c?"get":"setter"===c?"set":"value",u=!t&&e?o.static?e:e.prototype:null,p=t||(u?Object.getOwnPropertyDescriptor(u,o.name):{}),f=!1,d=n.length-1;d>=0;d--){var m={};for(var h in o)m[h]="access"===h?{}:o[h];for(var h in o.access)m.access[h]=o.access[h];m.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var y=(0,n[d])("accessor"===c?{get:p.get,set:p.set}:p[l],m);if("accessor"===c){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(s=a(y.get))&&(p.get=s),(s=a(y.set))&&(p.set=s),(s=a(y.init))&&r.unshift(s)}else(s=a(y))&&("field"===c?r.unshift(s):p[l]=s)}u&&Object.defineProperty(u,o.name,p),f=!0}function u(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0}function p(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function m(e,t,n,o){return new(n||(n=Promise))((function(r,i){function a(e){try{c(o.next(e))}catch(e){i(e)}}function s(e){try{c(o.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((o=o.apply(e,t||[])).next())}))}function h(e,t){var n,o,r,i,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(c){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(r=2&s[0]?o.return:s[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;switch(o=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!((r=(r=a.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){a.label=s[1];break}if(6===s[0]&&a.label<r[1]){a.label=r[1],r=s;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(s);break}r[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],o=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var y=Object.create?function(e,t,n,o){void 0===o&&(o=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,r)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]};function v(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||y(t,e,n)}function b(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function g(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function _(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(g(arguments[t]));return e}function w(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var o=Array(e),r=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,s=i.length;a<s;a++,r++)o[r]=i[a];return o}function x(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function j(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,r=n.apply(e,t||[]),i=[];return o={},a("next"),a("throw"),a("return"),o[Symbol.asyncIterator]=function(){return this},o;function a(e){r[e]&&(o[e]=function(t){return new Promise((function(n,o){i.push([e,t,n,o])>1||s(e,t)}))})}function s(e,t){try{(n=r[e](t)).value instanceof O?Promise.resolve(n.value.v).then(c,l):u(i[0][2],n)}catch(e){u(i[0][3],e)}var n}function c(e){s("next",e)}function l(e){s("throw",e)}function u(e,t){e(t),i.shift(),i.length&&s(i[0][0],i[0][1])}}function S(e){var t,n;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,r){t[o]=e[o]?function(t){return(n=!n)?{value:O(e[o](t)),done:!1}:r?r(t):t}:r}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=b(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(n){t[n]=e[n]&&function(t){return new Promise((function(o,r){!function(e,t,n,o){Promise.resolve(o).then((function(t){e({value:t,done:n})}),t)}(o,r,(t=e[n](t)).done,t.value)}))}}}function E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function k(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&y(t,e,n);return T(t,e),t}function M(e){return e&&e.__esModule?e:{default:e}}function D(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function C(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function B(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var o;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");o=t[Symbol.asyncDispose]}if(void 0===o){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");o=t[Symbol.dispose]}if("function"!=typeof o)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:o,async:n})}else n&&e.stack.push({async:!0});return t}var N="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var o=new Error(n);return o.name="SuppressedError",o.error=e,o.suppressed=t,o};function z(e){function t(t){e.error=e.hasError?new N(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function n(){for(;e.stack.length;){var o=e.stack.pop();try{var r=o.dispose&&o.dispose.call(o.value);if(o.async)return Promise.resolve(r).then(n,(function(e){return t(e),n()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const A={__extends:r,__assign:i,__rest:a,__decorate:s,__param:c,__metadata:d,__awaiter:m,__generator:h,__createBinding:y,__exportStar:v,__values:b,__read:g,__spread:_,__spreadArrays:w,__spreadArray:x,__await:O,__asyncGenerator:j,__asyncDelegator:S,__asyncValues:P,__makeTemplateObject:E,__importStar:k,__importDefault:M,__classPrivateFieldGet:D,__classPrivateFieldSet:C,__classPrivateFieldIn:I,__addDisposableResource:B,__disposeResources:z}}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o].call(i.exports,i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");if(o.length)for(var r=o.length-1;r>-1&&!e;)e=o[r--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})();var o={};return(()=>{"use strict";n.r(o),n.d(o,{compositions:()=>f,compositions_metadata:()=>m,overview:()=>d});var e={};n.r(e),n.d(e,{default:()=>p});var t=n(94952),r=(n(87363),n(40040)),i=n(70500),a=n(490),s=["components"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(this,arguments)}var l={},u="wrapper";function p(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,s);return(0,r.mdx)(u,c({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(i.MDXScopeProvider,{components:{ScopeOverview:a.ZP},mdxType:"MDXScopeProvider"},(0,r.mdx)(a.ZP,{mdxType:"ScopeOverview"})))}p.isMDXComponent=!0;const f=[t],d=[e],m={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));

package/dist/{preview-1704270602796.js → preview-1704347596257.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@1.0.122/dist/scope.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@1.0.122/dist/scope.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@1.0.123/dist/scope.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@1.0.123/dist/scope.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/scope-overview/scope-overview.d.ts

@@ -1,15 +1,31 @@
 import { ComponentType } from 'react';
+import { ScopeID } from '@teambit/scopes.scope-id';
+import { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 import { ComponentModel } from '@teambit/component';
+import { ComponentDescriptor } from '@teambit/component-descriptor';
 import type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';
 export type ScopeOverviewProps = {
     badgeSlot: ScopeBadgeSlot;
     overviewSlot: OverviewLineSlot;
     TargetOverview?: ComponentType;
 };
+export declare class LinkPlugin {
+    link(id: any): any;
+}
 export declare function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps): JSX.Element;
 type ScopeComponentCardProps = {
-    component: ComponentModel;
+    component?: ComponentModel;
+    componentDescriptor?: ComponentDescriptor;
+    plugins?: ComponentCardPluginType<PluginProps>[];
+    scope?: {
+        icon?: string;
+        backgroundIconColor?: string;
+        id: ScopeID;
+    };
     componentUrl?: string;
 };
-export declare function ScopeComponentCard({ component, componentUrl }: ScopeComponentCardProps): JSX.Element;
+export declare function ScopeComponentCard({ componentDescriptor, plugins }: ScopeComponentCardProps): JSX.Element;
+export declare function useCardPlugins({ compModelsById, }: {
+    compModelsById: Map<string, ComponentModel>;
+}): ComponentCardPluginType<PluginProps>[];
 export {};

package/dist/ui/scope-overview/scope-overview.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.LinkPlugin = void 0;
 exports.ScopeComponentCard = ScopeComponentCard;
 exports.ScopeOverview = ScopeOverview;
+exports.useCardPlugins = useCardPlugins;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -13,15 +15,8 @@ function _react() {
   return data;
 }
 function _explorerUiGallery() {
-  const data = require("@teambit/explorer.ui.gallery.component-card");
-  _explorerUiGallery = function () {
-    return data;
-  };
-  return data;
-}
-function _explorerUiGallery2() {
   const data = require("@teambit/explorer.ui.gallery.component-grid");
-  _explorerUiGallery2 = function () {
+  _explorerUiGallery = function () {
     return data;
   };
   return data;
@@ -47,6 +42,27 @@ function _scopeUi2() {
   };
   return data;
 }
+function _designUi() {
+  const data = require("@teambit/design.ui.tooltip");
+  _designUi = function () {
+    return data;
+  };
+  return data;
+}
+function _componentId() {
+  const data = require("@teambit/component-id");
+  _componentId = function () {
+    return data;
+  };
+  return data;
+}
+function _explorerUi() {
+  const data = require("@teambit/explorer.ui.component-card");
+  _explorerUi = function () {
+    return data;
+  };
+  return data;
+}
 function _scopeUiHooks() {
   const data = require("@teambit/scope.ui.hooks.scope-context");
   _scopeUiHooks = function () {
@@ -64,6 +80,12 @@ function _scopeOverviewModule() {
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class LinkPlugin {
+  link(id) {
+    return id.fullName;
+  }
+}
+exports.LinkPlugin = LinkPlugin;
 function ScopeOverview({
   badgeSlot,
   overviewSlot,
@@ -71,12 +93,18 @@ function ScopeOverview({
 }) {
   const scope = (0, _react().useContext)(_scopeUiHooks().ScopeContext);
   const {
-    components
+    components,
+    componentDescriptors
   } = scope;
   if (TargetOverview) return /*#__PURE__*/_react().default.createElement(TargetOverview, null);
   if (!components || components.length === 0) return /*#__PURE__*/_react().default.createElement(_scopeUi2().EmptyScope, {
     name: scope.name
   });
+  const compDescriptorById = new Map(componentDescriptors.map(comp => [comp.id.toString(), comp]));
+  const compModelsById = new Map(components.map(comp => [comp.id.toString(), comp]));
+  const plugins = useCardPlugins({
+    compModelsById
+  });
   return /*#__PURE__*/_react().default.createElement("div", {
     className: _scopeOverviewModule().default.container
   }, /*#__PURE__*/_react().default.createElement(_scopeUi().ScopeDetails, {
@@ -87,31 +115,64 @@ function ScopeOverview({
     overviewSlot: overviewSlot,
     description: scope.description,
     componentCount: scope.components.length
-  }), /*#__PURE__*/_react().default.createElement(_explorerUiGallery2().ComponentGrid, null, components.map((component, index) => {
+  }), /*#__PURE__*/_react().default.createElement(_explorerUiGallery().ComponentGrid, {
+    className: _scopeOverviewModule().default.cardGrid
+  }, components.map(component => {
     if (component.deprecation?.isDeprecate) return null;
     return /*#__PURE__*/_react().default.createElement("div", {
-      key: index
+      key: component.id.toString()
     }, /*#__PURE__*/_react().default.createElement(ScopeComponentCard, {
-      component: component
+      component: component,
+      plugins: plugins,
+      componentDescriptor: compDescriptorById.get(component.id.toString())
     }));
   })));
 }
 function ScopeComponentCard({
-  component,
-  componentUrl
+  componentDescriptor,
+  plugins
 }) {
-  const shouldShowPreview = component.compositions.length > 0;
-  return /*#__PURE__*/_react().default.createElement(_explorerUiGallery().ComponentCard, {
-    id: component.id.fullName,
-    envIcon: component.environment?.icon,
-    description: component.description,
-    version: component.version,
-    href: componentUrl,
-    preview: /*#__PURE__*/_react().default.createElement(_previewUi().PreviewPlaceholder, {
-      component: component,
-      shouldShowPreview: shouldShowPreview
-    })
+  if (!componentDescriptor) return null;
+  return /*#__PURE__*/_react().default.createElement(_explorerUi().ComponentCard, {
+    plugins: plugins,
+    component: componentDescriptor
   });
 }
+function useCardPlugins({
+  compModelsById
+}) {
+  const plugins = _react().default.useMemo(() => [{
+    preview: function Preview({
+      component
+    }) {
+      const compModel = compModelsById.get(component.id.toString());
+      if (!compModel) return null;
+      return /*#__PURE__*/_react().default.createElement(_previewUi().PreviewPlaceholder, {
+        componentDescriptor: component,
+        component: compModel,
+        shouldShowPreview: compModel.compositions.length > 0
+      });
+    }
+  }, {
+    previewBottomRight: function PreviewBottomRight({
+      component
+    }) {
+      const env = component.get('teambit.envs/envs');
+      const envComponentId = env?.id ? _componentId().ComponentID.fromString(env?.id) : undefined;
+      return /*#__PURE__*/_react().default.createElement("div", {
+        className: _scopeOverviewModule().default.rightPreviewPlugins
+      }, /*#__PURE__*/_react().default.createElement("div", {
+        className: _scopeOverviewModule().default.badge
+      }, /*#__PURE__*/_react().default.createElement(_designUi().Tooltip, {
+        delay: 300,
+        content: envComponentId?.name
+      }, /*#__PURE__*/_react().default.createElement("img", {
+        src: env?.icon,
+        className: _scopeOverviewModule().default.envIcon
+      }))));
+    }
+  }, new LinkPlugin()], [compModelsById.size]);
+  return plugins;
+}
 
 //# sourceMappingURL=scope-overview.js.map

package/dist/ui/scope-overview/scope-overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_explorerUiGallery","_explorerUiGallery2","_scopeUi","_previewUi","_scopeUi2","_scopeUiHooks","_scopeOverviewModule","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ScopeOverview","badgeSlot","overviewSlot","TargetOverview","scope","useContext","ScopeContext","components","createElement","length","EmptyScope","name","className","styles","container","ScopeDetails","scopeName","icon","backgroundIconColor","description","componentCount","ComponentGrid","map","component","index","deprecation","isDeprecate","key","ScopeComponentCard","componentUrl","shouldShowPreview","compositions","ComponentCard","id","fullName","envIcon","environment","version","href","preview","PreviewPlaceholder"],"sources":["scope-overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType } from 'react';\nimport { ComponentCard } from '@teambit/explorer.ui.gallery.component-card';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { ScopeDetails } from '@teambit/scope.ui.scope-details';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { EmptyScope } from '@teambit/scope.ui.empty-scope';\nimport { ComponentModel } from '@teambit/component';\nimport { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';\nimport styles from './scope-overview.module.scss';\nimport type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';\n\nexport type ScopeOverviewProps = {\n  badgeSlot: ScopeBadgeSlot;\n  overviewSlot: OverviewLineSlot;\n  TargetOverview?: ComponentType;\n};\n\nexport function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps) {\n  const scope = useContext(ScopeContext);\n  const { components } = scope;\n  if (TargetOverview) return <TargetOverview />;\n  if (!components || components.length === 0) return <EmptyScope name={scope.name} />;\n\n  return (\n    <div className={styles.container}>\n      <ScopeDetails\n        scopeName={scope.name}\n        icon={scope.icon}\n        backgroundIconColor={scope.backgroundIconColor}\n        badgeSlot={badgeSlot}\n        overviewSlot={overviewSlot}\n        description={scope.description}\n        componentCount={scope.components.length}\n      />\n      <ComponentGrid>\n        {components.map((component, index) => {\n          if (component.deprecation?.isDeprecate) return null;\n          return (\n            <div key={index}>\n              <ScopeComponentCard component={component} />\n            </div>\n          );\n        })}\n      </ComponentGrid>\n    </div>\n  );\n}\n\ntype ScopeComponentCardProps = {\n  component: ComponentModel;\n  componentUrl?: string;\n};\n\nexport function ScopeComponentCard({ component, componentUrl }: ScopeComponentCardProps) {\n  const shouldShowPreview = component.compositions.length > 0;\n  return (\n    <ComponentCard\n      id={component.id.fullName}\n      envIcon={component.environment?.icon}\n      description={component.description}\n      version={component.version}\n      href={componentUrl}\n      preview={<PreviewPlaceholder component={component} shouldShowPreview={shouldShowPreview} />}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_explorerUiGallery","_scopeUi","_previewUi","_scopeUi2","_designUi","_componentId","_explorerUi","_scopeUiHooks","_scopeOverviewModule","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","LinkPlugin","link","id","fullName","exports","ScopeOverview","badgeSlot","overviewSlot","TargetOverview","scope","useContext","ScopeContext","components","componentDescriptors","createElement","length","EmptyScope","name","compDescriptorById","Map","map","comp","toString","compModelsById","plugins","useCardPlugins","className","styles","container","ScopeDetails","scopeName","icon","backgroundIconColor","description","componentCount","ComponentGrid","cardGrid","component","deprecation","isDeprecate","key","ScopeComponentCard","componentDescriptor","ComponentCard","React","useMemo","preview","Preview","compModel","PreviewPlaceholder","shouldShowPreview","compositions","previewBottomRight","PreviewBottomRight","env","envComponentId","ComponentID","fromString","undefined","rightPreviewPlugins","badge","Tooltip","delay","content","src","envIcon","size"],"sources":["scope-overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType } from 'react';\nimport { ScopeID } from '@teambit/scopes.scope-id';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { ScopeDetails } from '@teambit/scope.ui.scope-details';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { EmptyScope } from '@teambit/scope.ui.empty-scope';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { ComponentID } from '@teambit/component-id';\nimport { ComponentCard, ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';\nimport { ComponentModel } from '@teambit/component';\nimport { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport styles from './scope-overview.module.scss';\nimport type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';\n\nexport type ScopeOverviewProps = {\n  badgeSlot: ScopeBadgeSlot;\n  overviewSlot: OverviewLineSlot;\n  TargetOverview?: ComponentType;\n};\n\nexport class LinkPlugin {\n  link(id) {\n    return id.fullName;\n  }\n}\n\nexport function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps) {\n  const scope = useContext(ScopeContext);\n  const { components, componentDescriptors } = scope;\n  if (TargetOverview) return <TargetOverview />;\n  if (!components || components.length === 0) return <EmptyScope name={scope.name} />;\n  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));\n  const compModelsById = new Map(components.map((comp) => [comp.id.toString(), comp]));\n  const plugins = useCardPlugins({ compModelsById });\n\n  return (\n    <div className={styles.container}>\n      <ScopeDetails\n        scopeName={scope.name}\n        icon={scope.icon}\n        backgroundIconColor={scope.backgroundIconColor}\n        badgeSlot={badgeSlot}\n        overviewSlot={overviewSlot}\n        description={scope.description}\n        componentCount={scope.components.length}\n      />\n      <ComponentGrid className={styles.cardGrid}>\n        {components.map((component) => {\n          if (component.deprecation?.isDeprecate) return null;\n          return (\n            <div key={component.id.toString()}>\n              <ScopeComponentCard\n                component={component}\n                plugins={plugins}\n                componentDescriptor={compDescriptorById.get(component.id.toString())}\n              />\n            </div>\n          );\n        })}\n      </ComponentGrid>\n    </div>\n  );\n}\n\ntype ScopeComponentCardProps = {\n  component?: ComponentModel;\n  componentDescriptor?: ComponentDescriptor;\n  plugins?: ComponentCardPluginType<PluginProps>[];\n  scope?: {\n    icon?: string;\n    backgroundIconColor?: string;\n    id: ScopeID;\n  };\n  componentUrl?: string;\n};\n\nexport function ScopeComponentCard({ componentDescriptor, plugins }: ScopeComponentCardProps) {\n  if (!componentDescriptor) return null;\n\n  return <ComponentCard plugins={plugins} component={componentDescriptor} />;\n}\n\nexport function useCardPlugins({\n  compModelsById,\n}: {\n  compModelsById: Map<string, ComponentModel>;\n}): ComponentCardPluginType<PluginProps>[] {\n  const plugins = React.useMemo(\n    () => [\n      {\n        preview: function Preview({ component }) {\n          const compModel = compModelsById.get(component.id.toString());\n          if (!compModel) return null;\n          return (\n            <PreviewPlaceholder\n              componentDescriptor={component}\n              component={compModel}\n              shouldShowPreview={compModel.compositions.length > 0}\n            />\n          );\n        },\n      },\n      {\n        previewBottomRight: function PreviewBottomRight({ component }) {\n          const env = component.get('teambit.envs/envs');\n          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;\n\n          return (\n            <div className={styles.rightPreviewPlugins}>\n              <div className={styles.badge}>\n                <Tooltip delay={300} content={envComponentId?.name}>\n                  <img src={env?.icon} className={styles.envIcon} />\n                </Tooltip>\n              </div>\n            </div>\n          );\n        },\n      },\n      new LinkPlugin(),\n    ],\n    [compModelsById.size]\n  );\n\n  return plugins;\n}\n"],"mappings":"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"}

package/dist/ui/scope-overview/scope-overview.module.scss

@@ -4,3 +4,14 @@
   height: 100%;
   box-sizing: border-box;
 }
+
+.cardGrid {
+  grid-column-gap: 10px;
+  grid-gap: 32px 24px;
+  -moz-column-gap: 10px;
+  column-gap: 10px;
+  display: grid;
+  gap: 32px 24px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  max-width: 1280px;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "1.0.122",
+  "version": "1.0.123",
   "homepage": "https://bit.cloud/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "1.0.122"
+    "version": "1.0.123"
   },
   "dependencies": {
     "fs-extra": "10.0.0",
@@ -27,7 +27,6 @@
     "@teambit/legacy-bit-id": "1.1.0",
     "@teambit/legacy-component-log": "0.0.402",
     "@teambit/design.ui.tree": "0.0.15",
-    "@teambit/lanes.hooks.use-lane-components": "0.0.253",
     "@teambit/lanes.hooks.use-lanes": "0.0.254",
     "@teambit/lanes.ui.models.lanes-model": "0.0.207",
     "@teambit/ui-foundation.ui.side-bar": "0.0.871",
@@ -52,34 +51,38 @@
     "@teambit/ui-foundation.ui.top-bar": "0.0.514",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.141",
     "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.145",
-    "@teambit/explorer.ui.gallery.component-card": "0.0.513",
+    "@teambit/scopes.scope-id": "0.0.7",
+    "@teambit/design.ui.tooltip": "0.0.361",
+    "@teambit/explorer.ui.component-card": "0.0.30",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
     "@teambit/scope.ui.empty-scope": "0.0.509",
     "@teambit/scope.ui.scope-details": "0.0.526",
     "@teambit/component.modules.component-url": "0.0.167",
     "@teambit/scope.ui.hooks.scope-context": "0.0.495",
     "@teambit/scope.models.scope-model": "0.0.501",
-    "@teambit/aspect-loader": "1.0.122",
-    "@teambit/cli": "0.0.844",
-    "@teambit/compiler": "1.0.122",
-    "@teambit/component": "1.0.122",
-    "@teambit/dependency-resolver": "1.0.122",
-    "@teambit/envs": "1.0.122",
-    "@teambit/global-config": "0.0.847",
+    "@teambit/aspect-loader": "1.0.123",
+    "@teambit/cli": "0.0.845",
+    "@teambit/compiler": "1.0.123",
+    "@teambit/component": "1.0.123",
+    "@teambit/dependency-resolver": "1.0.123",
+    "@teambit/envs": "1.0.123",
+    "@teambit/global-config": "0.0.848",
     "@teambit/harmony.modules.requireable-component": "0.0.497",
-    "@teambit/isolator": "1.0.122",
-    "@teambit/logger": "0.0.937",
-    "@teambit/builder": "1.0.122",
-    "@teambit/express": "0.0.943",
-    "@teambit/graph": "1.0.122",
-    "@teambit/graphql": "1.0.122",
-    "@teambit/ui": "1.0.122",
+    "@teambit/isolator": "1.0.123",
+    "@teambit/logger": "0.0.938",
+    "@teambit/builder": "1.0.123",
+    "@teambit/express": "0.0.944",
+    "@teambit/graph": "1.0.123",
+    "@teambit/graphql": "1.0.123",
+    "@teambit/ui": "1.0.123",
     "@teambit/workspace.modules.match-pattern": "0.0.504",
     "@teambit/component.ui.component-drawer": "0.0.385",
-    "@teambit/command-bar": "1.0.122",
-    "@teambit/component-tree": "1.0.122",
-    "@teambit/sidebar": "1.0.122",
-    "@teambit/preview.ui.preview-placeholder": "0.0.507"
+    "@teambit/lanes.hooks.use-lane-components": "0.0.255",
+    "@teambit/command-bar": "1.0.123",
+    "@teambit/component-tree": "1.0.123",
+    "@teambit/sidebar": "1.0.123",
+    "@teambit/preview.ui.preview-placeholder": "0.0.508",
+    "@teambit/component-descriptor": "0.0.412"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.7",

package/ui/scope-overview/scope-overview.module.scss

@@ -4,3 +4,14 @@
   height: 100%;
   box-sizing: border-box;
 }
+
+.cardGrid {
+  grid-column-gap: 10px;
+  grid-gap: 32px 24px;
+  -moz-column-gap: 10px;
+  column-gap: 10px;
+  display: grid;
+  gap: 32px 24px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  max-width: 1280px;
+}

package/ui/scope-overview/scope-overview.tsx

@@ -1,11 +1,15 @@
 import React, { useContext, ComponentType } from 'react';
-import { ComponentCard } from '@teambit/explorer.ui.gallery.component-card';
+import { ScopeID } from '@teambit/scopes.scope-id';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { ScopeDetails } from '@teambit/scope.ui.scope-details';
 import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
 import { EmptyScope } from '@teambit/scope.ui.empty-scope';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { ComponentID } from '@teambit/component-id';
+import { ComponentCard, ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 import { ComponentModel } from '@teambit/component';
 import { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';
+import { ComponentDescriptor } from '@teambit/component-descriptor';
 import styles from './scope-overview.module.scss';
 import type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';
 
@@ -15,11 +19,20 @@ export type ScopeOverviewProps = {
   TargetOverview?: ComponentType;
 };
 
+export class LinkPlugin {
+  link(id) {
+    return id.fullName;
+  }
+}
+
 export function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps) {
   const scope = useContext(ScopeContext);
-  const { components } = scope;
+  const { components, componentDescriptors } = scope;
   if (TargetOverview) return <TargetOverview />;
   if (!components || components.length === 0) return <EmptyScope name={scope.name} />;
+  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));
+  const compModelsById = new Map(components.map((comp) => [comp.id.toString(), comp]));
+  const plugins = useCardPlugins({ compModelsById });
 
   return (
     <div className={styles.container}>
@@ -32,12 +45,16 @@ export function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: Scope
         description={scope.description}
         componentCount={scope.components.length}
       />
-      <ComponentGrid>
-        {components.map((component, index) => {
+      <ComponentGrid className={styles.cardGrid}>
+        {components.map((component) => {
           if (component.deprecation?.isDeprecate) return null;
           return (
-            <div key={index}>
-              <ScopeComponentCard component={component} />
+            <div key={component.id.toString()}>
+              <ScopeComponentCard
+                component={component}
+                plugins={plugins}
+                componentDescriptor={compDescriptorById.get(component.id.toString())}
+              />
             </div>
           );
         })}
@@ -47,20 +64,63 @@ export function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: Scope
 }
 
 type ScopeComponentCardProps = {
-  component: ComponentModel;
+  component?: ComponentModel;
+  componentDescriptor?: ComponentDescriptor;
+  plugins?: ComponentCardPluginType<PluginProps>[];
+  scope?: {
+    icon?: string;
+    backgroundIconColor?: string;
+    id: ScopeID;
+  };
   componentUrl?: string;
 };
 
-export function ScopeComponentCard({ component, componentUrl }: ScopeComponentCardProps) {
-  const shouldShowPreview = component.compositions.length > 0;
-  return (
-    <ComponentCard
-      id={component.id.fullName}
-      envIcon={component.environment?.icon}
-      description={component.description}
-      version={component.version}
-      href={componentUrl}
-      preview={<PreviewPlaceholder component={component} shouldShowPreview={shouldShowPreview} />}
-    />
+export function ScopeComponentCard({ componentDescriptor, plugins }: ScopeComponentCardProps) {
+  if (!componentDescriptor) return null;
+
+  return <ComponentCard plugins={plugins} component={componentDescriptor} />;
+}
+
+export function useCardPlugins({
+  compModelsById,
+}: {
+  compModelsById: Map<string, ComponentModel>;
+}): ComponentCardPluginType<PluginProps>[] {
+  const plugins = React.useMemo(
+    () => [
+      {
+        preview: function Preview({ component }) {
+          const compModel = compModelsById.get(component.id.toString());
+          if (!compModel) return null;
+          return (
+            <PreviewPlaceholder
+              componentDescriptor={component}
+              component={compModel}
+              shouldShowPreview={compModel.compositions.length > 0}
+            />
+          );
+        },
+      },
+      {
+        previewBottomRight: function PreviewBottomRight({ component }) {
+          const env = component.get('teambit.envs/envs');
+          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;
+
+          return (
+            <div className={styles.rightPreviewPlugins}>
+              <div className={styles.badge}>
+                <Tooltip delay={300} content={envComponentId?.name}>
+                  <img src={env?.icon} className={styles.envIcon} />
+                </Tooltip>
+              </div>
+            </div>
+          );
+        },
+      },
+      new LinkPlugin(),
+    ],
+    [compModelsById.size]
   );
+
+  return plugins;
 }