@sanity/dashboard 3.1.0 → 3.1.2

package/lib/index.esm.js

@@ -1,2 +1,729 @@
-var e,n,t,r,i,o,l,a,d,s,c,u,h,p,g,m,f,b,y,w;function v(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?v(Object(t),!0).forEach((function(n){x(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}import{jsxs as k,jsx as z,Fragment as P}from"react/jsx-runtime";import{forwardRef as _,createContext as S,useContext as R,useMemo as I,createElement as L,useState as q,useEffect as A,useCallback as E}from"react";import{Card as Y,Box as B,Heading as D,Button as H,Stack as M,Label as T,Grid as V,Text as X,Code as N,Spinner as U,Flex as C,Container as F}from"@sanity/ui";import G,{css as Q}from"styled-components";import{useClient as W,useUserStore as Z,DefaultPreview as J,definePlugin as K}from"sanity";import{from as $}from"rxjs";import{switchMap as ee,map as ne}from"rxjs/operators";import{RobotIcon as te,PlayIcon as re}from"@sanity/icons";import ie from"@sanity/image-url";const oe=G(Y)(e||(e=O(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n  box-sizing: border-box;\n  position: relative;\n"]))),le=G(Y)(n||(n=O(["\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n"]))),ae=G(Y)(t||(t=O(["\n  position: sticky;\n  overflow: hidden;\n  bottom: 0;\n  z-index: 2;\n  border-bottom-right-radius: inherit;\n  border-bottom-left-radius: inherit;\n  margin-top: auto;\n"]))),de=G(B)(r||(r=O(["\n  position: relative;\n  z-index: 1;\n  height: stretch;\n  min-height: 21.5em;\n\n  @media (min-width: ","px) {\n    overflow-y: auto;\n    outline: none;\n  }\n"])),(e=>{let{theme:n}=e;return n.sanity.media[0]})),se=_((function(e,n){const{header:t,children:r,footer:i}=e;return k(oe,{radius:3,display:"flex",ref:n,children:[t&&z(le,{borderBottom:!0,paddingX:3,paddingY:4,children:z(D,{size:1,textOverflow:"ellipsis",children:t})}),r&&z(de,{children:r}),i&&z(ae,{borderTop:!0,children:i})]})}));function ce(){return W({apiVersion:"1"})}const ue=S({widgets:[]});function he(e){const n=R(ue),t=I((()=>j(j({},e.layout||{}),n.layout||{})),[e.layout,n.layout]);return z(Y,{shadow:1,"data-width":t.width,"data-height":t.height,children:L(e.component,{})})}function pe(e,n){return"https://".concat(e,".api.sanity.io/v1/groq/").concat(n)}function ge(e){return"https://manage.sanity.io/projects/".concat(e)}const me=[],fe=[];function be(e){const{__experimental_before:n=me,data:t=fe}=e,[r,i]=q(),[o,l]=q(),a=ce(),{projectId:d="unknown",dataset:s="unknown"}=a.config();A((()=>{const e=[];return e.push(a.observable.request({uri:"/projects/".concat(d)}).subscribe({next:e=>{const{studioHost:n}=e;i(n?"https://".concat(n,".sanity.studio"):void 0)},error:e=>{console.error("Error while looking for studioHost",e),i({error:"Something went wrong while looking up studioHost. See console."})}})),e.push(a.observable.request({method:"HEAD",uri:"/graphql/".concat(s,"/default")}).subscribe({next:()=>l(function(e,n){return"https://".concat(e,".api.sanity.io/v1/graphql/").concat(n,"/default")}(d,s)),error:e=>{404===e.statusCode?l(void 0):(console.error("Error while looking for graphqlApi",e),l({error:"Something went wrong while looking up graphqlApi. See console."}))}})),()=>{e.forEach((e=>e.unsubscribe()))}}),[s,d,a,l,i]);const c=I((()=>{var e;let n=[{title:"Sanity project",rows:[{title:"Project ID",value:d},{title:"Dataset",value:s}]}];const i=[r?{title:"Studio",value:r}:null,...t.filter((e=>"apps"===e.category))].filter((e=>!!e));i.length>0&&(n=n.concat([{title:"Apps",rows:i}])),n=n.concat([{title:"APIs",rows:[{title:"GROQ",value:pe(d,s)},{title:"GraphQL",value:null!=(e="object"==typeof o?"Error":o)?e:"Not deployed"}]}],t.filter((e=>"apis"===e.category)));const l={};return t.forEach((e=>{e.category&&"apps"!==e.category&&"apis"!==e.category&&(l[e.category]||(l[e.category]=[]),l[e.category].push(e))})),Object.keys(l).forEach((e=>{n.push({title:e,rows:l[e]})})),n}),[o,r,d,s,t]);return k(P,{children:[n.map(((e,n)=>z(he,j({},e),n))),z(B,{height:"fill",marginTop:(null==n?void 0:n.length)>0?4:0,children:z(se,{footer:z(H,{style:{width:"100%"},paddingX:2,paddingY:4,mode:"bleed",tone:"primary",text:"Manage project",as:"a",href:ge(d)}),children:z(Y,{paddingY:4,radius:2,role:"table","aria-label":"Project info","aria-describedby":"project_info_table",children:k(M,{space:4,children:[z(B,{paddingX:3,as:"header",children:z(D,{size:1,as:"h2",id:"project_info_table",children:"Project info"})}),c.map((e=>e&&e.rows?k(M,{space:3,children:[z(Y,{borderBottom:!0,padding:3,children:z(T,{size:0,muted:!0,role:"columnheader",children:e.title})}),z(M,{space:4,paddingX:3,role:"rowgroup",children:e.rows.map((e=>{var n,t;return k(V,{columns:2,role:"row",children:[z(X,{weight:"medium",role:"rowheader",children:e.title}),"object"==typeof e.value&&z(X,{size:1,children:null==(n=e.value)?void 0:n.error}),"string"==typeof e.value&&z(P,{children:(t=e.value,t&&/^https?:\/\//.test("".concat(t))?z(X,{size:1,role:"cell",style:{wordBreak:"break-word"},children:z("a",{href:e.value,children:e.value})}):z(N,{size:1,role:"cell",style:{wordBreak:"break-word"},children:e.value}))})]},e.title)}))})]},e.title):null))]})})})})]})}function ye(e){var n;return{name:"project-info",component:be,layout:null!=(n=null==e?void 0:e.layout)?n:{width:"medium"}}}const we=G(Y)(i||(i=O(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  border-color: transparent;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  & > img {\n    width: 100%;\n    height: auto;\n  }\n"])));function ve(){const[e,n]=q(),[t,r]=q(),[i,o]=q(),l=Z(),a=ce(),d=E((()=>{const{projectId:e}=a.config(),t=a.observable.request({uri:"/projects/".concat(e)}).pipe(ee((e=>$(l.getUsers(e.members.map((e=>e.id)))).pipe(ne((n=>({project:e,users:n}))))))).subscribe({next:e=>{let{users:t,project:i}=e;n(i),r((Array.isArray(t)?t:[t]).sort(((e,n)=>function(e,n,t){const{members:r}=t,i=r.find((n=>n.id===(null==e?void 0:e.id))),o=r.find((e=>e.id===(null==n?void 0:n.id)));if(null==i?void 0:i.isRobot)return 1;if(null==o?void 0:o.isRobot)return-1;return 0}(e,n,i))))},error:e=>o(e)});return()=>t.unsubscribe()}),[l,a]);A((()=>d()),[d]);const s=E((()=>d()),[d]),c=!t||!e;return i?z(se,{header:"Project users",children:z(B,{padding:4,children:k(X,{children:["Something went wrong while fetching data. You could"," ",z("a",{onClick:s,title:"Retry users fetch",style:{cursor:"pointer"},children:"retry"}),"..?"]})})}):k(se,{header:"Project users",footer:z(H,{style:{width:"100%"},paddingX:2,paddingY:4,mode:"bleed",tone:"primary",text:"Invite members",as:"a",loading:c,href:c?void 0:(u=e.id,"https://manage.sanity.io/projects/".concat(u,"/team/invite"))}),children:[c&&z(B,{paddingY:5,paddingX:2,children:k(M,{space:4,children:[z(X,{align:"center",muted:!0,size:1,children:z(U,{})}),z(X,{align:"center",size:1,muted:!0,children:"Loading items..."})]})}),!c&&z(M,{space:3,padding:3,children:null==t?void 0:t.map((n=>{const t=e.members.find((e=>e.id===n.id)),r=(null==t?void 0:t.isRobot)?z(X,{size:3,children:z(te,{})}):z(we,{tone:"transparent",children:(null==n?void 0:n.imageUrl)&&z("img",{src:n.imageUrl,alt:null==n?void 0:n.displayName})});return z(B,{children:z(J,{title:n.displayName,subtitle:null==t?void 0:t.role,media:r})},n.id)}))})]});var u}function je(e){return{name:"project-info",component:ve,layout:null==e?void 0:e.layout}}const xe=G(B)(o||(o=O(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2.75em;\n    height: 2.75em;\n    border-radius: 50%;\n    background: ",";\n    opacity: 0.75;\n  }\n"])),(e=>{let{theme:n}=e;return n.sanity.color.card.enabled.bg})),Oe=G(C)(l||(l=O(["\n  &:hover {\n    "," {\n      &:before {\n        opacity: 1;\n      }\n    }\n  }\n"])),xe),ke=G(Y)(a||(a=O(["\n  width: 100%;\n  padding-bottom: calc(9 / 16 * 100%);\n  position: relative;\n"]))),ze=G.img(d||(d=O(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  display: block;\n\n  &:not([src]) {\n    display: none;\n  }\n"])));function Pe(e){const{title:n,posterURL:t,showPlayIcon:r,href:i,presenterName:o,presenterSubtitle:l}=e;return z(Oe,{flex:1,children:z(Y,{sizing:"border",flex:1,padding:2,radius:2,as:"a",href:i,target:"_blank",rel:"noopener noreferrer",style:{position:"relative"},children:k(C,{direction:"column",style:{height:"100%"},children:[t&&k(ke,{marginBottom:1,children:[z(ze,{src:t}),r&&z(xe,{display:"flex",children:z(X,{align:"center",children:z(re,{})})})]}),k(C,{direction:"column",justify:"space-between",paddingY:2,flex:1,children:[z(D,{as:"h3",size:1,children:n}),z(B,{marginTop:4,children:k(M,{space:2,flex:1,children:[z(X,{size:1,children:o}),z(X,{size:0,style:{opacity:.7},children:l})]})})]})]})})})}const _e={projectId:"3do82whm",dataset:"next"};function Se(e){const{templateRepoId:n}=e,[t,r]=q([]),{getFeed:i,urlBuilder:o}=function(){const e=ce();return I((()=>({getFeed:n=>{const t=n?"/addons/dashboard?templateRepoId=".concat(n):"/addons/dashboard";return e.observable.request({uri:t,withCredentials:!1})},urlBuilder:ie(_e)})),[e])}();A((()=>{const e=i(n).subscribe((e=>{r(e.items)}));return()=>{e.unsubscribe()}}),[r,i,n]);return z(se,{header:"Learn about Sanity",children:z(C,{as:"ul",overflow:"auto",align:"stretch",paddingY:2,children:null==t?void 0:t.map(((e,n)=>{var r;if(!e.title||!e.guideOrTutorial&&!e.externalLink)return null;const i=e.presenter||(null==(r=e.guideOrTutorial)?void 0:r.presenter)||{},l=e.category,{guideOrTutorial:a={}}=e,d=(a.slug?(s=a.slug,"tutorial"===(c=a._type)?"https://www.sanity.io/docs/tutorials/".concat(s.current):"guide"===c&&"https://www.sanity.io/docs/guides/".concat(s.current)):e.externalLink)||e.externalLink;var s,c;return z(C,{as:"li",paddingRight:n<(null==t?void 0:t.length)-1?1:3,paddingLeft:0===n?3:0,align:"stretch",style:{minWidth:272,width:"30%"},children:z(Pe,{title:e.title,href:null!=d?d:"",presenterName:i.name,presenterSubtitle:l,showPlayIcon:e.hasVideo,posterURL:e.poster?o.image(e.poster).height(360).url():void 0})},e._id)}))})})}function Re(e){var n;return{name:"sanity-tutorials",component:Se,layout:null!=(n=null==e?void 0:e.layout)?n:{width:"full"}}}function Ie(e){return z(F,{width:4,padding:4,sizing:"border",style:{minHeight:"100%"},children:e.children})}const Le=function(){return Q(s||(s=O(["\n      @media (min-width: ","px) {\n        ","\n      }\n    "])),(e=>{let{theme:n}=e;return n.sanity.media[0]}),Q(...arguments))},qe=function(){return Q(c||(c=O(["\n      @media (min-width: ","px) {\n        ","\n      }\n    "])),(e=>{let{theme:n}=e;return n.sanity.media[2]}),Q(...arguments))},Ae=G(V)(u||(u=O(["\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n\n  & > div {\n    overflow: hidden;\n  }\n\n  & > div[data-width='medium'] {\n    ","\n  }\n\n  & > div[data-width='large'] {\n    ","\n\n    ","\n  }\n\n  & > div[data-width='full'] {\n    ","\n  }\n\n  & > div[data-height='medium'] {\n    ","\n  }\n\n  & > div[data-height='large'] {\n    ","\n\n    ","\n  }\n\n  & > div[data-height='full'] {\n    ","\n  }\n"])),Le(h||(h=O(["\n      grid-column: span 2;\n    "]))),Le(p||(p=O(["\n      grid-column: span 2;\n    "]))),qe(g||(g=O(["\n      grid-column: span 3;\n    "]))),Le(m||(m=O(["\n      grid-column: 1 / -1;\n    "]))),Le(f||(f=O(["\n      grid-row: span 2;\n    "]))),Le(b||(b=O(["\n      grid-row: span 2;\n    "]))),qe(y||(y=O(["\n      grid-row: span 3;\n    "]))),qe(w||(w=O(["\n      grid-row: 1 / -1;\n    "])))),Ee=[],Ye={};function Be(e){const{config:{layout:n=Ye,widgets:t=Ee}}=e;return k(Ae,{autoFlow:"row dense","data-width":n.width||"auto","data-height":n.height||"auto",gap:4,children:[t.length?null:z(Y,{padding:4,shadow:1,tone:"primary",children:z(X,{align:"center",children:"Add some widgets to populate this space."})}),t.map(((e,n)=>"__experimental_group"===e.type?z(Be,{config:e},n):e.component?z(he,j({},e),n):k(B,{children:[e.name," is missing widget component"]},n)))]})}function De(e){let{config:n}=e;return n?z(ue.Provider,{value:n,children:z(Ie,{children:z(Be,{config:n})})}):null}const He={stroke:"currentColor",strokeWidth:1.2},Me=()=>k("svg",{"data-sanity-icon":!0,viewBox:"0 0 25 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",width:"1em",height:"1em",children:[z("path",{d:"M19.5 19.5H5.5V5.5H19.5V19.5Z",style:He}),z("path",{d:"M5.5 12.5H19.5",style:He}),z("path",{d:"M14.5 19.5V12.5M10.5 12.5V5.5",style:He})]}),Te=K((function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};var n,t,r,i,o;const l={layout:null!=(n=e.defaultLayout)?n:{},widgets:null!=(t=e.widgets)?t:[]},a=null!=(r=e.title)?r:"Dashboard",d=null!=(i=e.name)?i:"dashboard",s=null!=(o=e.icon)?o:Me;return{name:"dashboard",tools:(e,n)=>[...e,{title:a,name:d,icon:s,component:()=>z(De,{config:l})}]}}));export{se as DashboardWidgetContainer,Te as dashboardTool,ye as projectInfoWidget,je as projectUsersWidget,Re as sanityTutorialsWidget};
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext, useMemo, createElement, useState, useEffect, useCallback } from 'react';
+import { Card, Box, Heading, Button, Stack, Label, Grid, Text, Code, Spinner, Flex, Container } from '@sanity/ui';
+import styled, { css } from 'styled-components';
+import { useClient, useUserStore, DefaultPreview, definePlugin } from 'sanity';
+import { from } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+import { RobotIcon, PlayIcon } from '@sanity/icons';
+import imageUrlBuilder from '@sanity/image-url';
+const Root$2 = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n  box-sizing: border-box;\n  position: relative;\n"])));
+const Header = styled(Card)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n"])));
+const Footer = styled(Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: sticky;\n  overflow: hidden;\n  bottom: 0;\n  z-index: 2;\n  border-bottom-right-radius: inherit;\n  border-bottom-left-radius: inherit;\n  margin-top: auto;\n"])));
+const Content = styled(Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  height: stretch;\n  min-height: 21.5em;\n\n  @media (min-width: ", "px) {\n    overflow-y: auto;\n    outline: none;\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.sanity.media[0];
+});
+const DashboardWidgetContainer = forwardRef(function DashboardWidgetContainer2(props, ref) {
+  const {
+    header,
+    children,
+    footer
+  } = props;
+  return /* @__PURE__ */jsxs(Root$2, {
+    radius: 3,
+    display: "flex",
+    ref,
+    children: [header && /* @__PURE__ */jsx(Header, {
+      borderBottom: true,
+      paddingX: 3,
+      paddingY: 4,
+      children: /* @__PURE__ */jsx(Heading, {
+        size: 1,
+        textOverflow: "ellipsis",
+        children: header
+      })
+    }), children && /* @__PURE__ */jsx(Content, {
+      children
+    }), footer && /* @__PURE__ */jsx(Footer, {
+      borderTop: true,
+      children: footer
+    })]
+  });
+});
+function useVersionedClient() {
+  return useClient({
+    apiVersion: "1"
+  });
+}
+const DashboardContext = createContext({
+  widgets: []
+});
+function useDashboardConfig() {
+  return useContext(DashboardContext);
+}
+function WidgetContainer(props) {
+  const config = useDashboardConfig();
+  const layout = useMemo(() => _objectSpread(_objectSpread({}, props.layout || {}), config.layout || {}), [props.layout, config.layout]);
+  return /* @__PURE__ */jsx(Card, {
+    shadow: 1,
+    "data-width": layout.width,
+    "data-height": layout.height,
+    children: createElement(props.component, {})
+  });
+}
+function isUrl(url) {
+  return url && /^https?:\/\//.test("".concat(url));
+}
+function getGraphQlUrl(projectId, dataset) {
+  return "https://".concat(projectId, ".api.sanity.io/v1/graphql/").concat(dataset, "/default");
+}
+function getGroqUrl(projectId, dataset) {
+  return "https://".concat(projectId, ".api.sanity.io/v1/groq/").concat(dataset);
+}
+function getManageUrl(projectId) {
+  return "https://manage.sanity.io/projects/".concat(projectId);
+}
+const NO_EXPERIMENTAL = [];
+const NO_DATA = [];
+function ProjectInfo(props) {
+  const {
+    __experimental_before = NO_EXPERIMENTAL,
+    data = NO_DATA
+  } = props;
+  const [studioHost, setStudioHost] = useState();
+  const [graphqlApi, setGraphQlApi] = useState();
+  const versionedClient = useVersionedClient();
+  const {
+    projectId = "unknown",
+    dataset = "unknown"
+  } = versionedClient.config();
+  useEffect(() => {
+    const subscriptions = [];
+    subscriptions.push(versionedClient.observable.request({
+      uri: "/projects/".concat(projectId)
+    }).subscribe({
+      next: result => {
+        const {
+          studioHost: host
+        } = result;
+        setStudioHost(host ? "https://".concat(host, ".sanity.studio") : void 0);
+      },
+      error: error => {
+        console.error("Error while looking for studioHost", error);
+        setStudioHost({
+          error: "Something went wrong while looking up studioHost. See console."
+        });
+      }
+    }));
+    subscriptions.push(versionedClient.observable.request({
+      method: "HEAD",
+      uri: "/graphql/".concat(dataset, "/default")
+    }).subscribe({
+      next: () => setGraphQlApi(getGraphQlUrl(projectId, dataset)),
+      error: error => {
+        if (error.statusCode === 404) {
+          setGraphQlApi(void 0);
+        } else {
+          console.error("Error while looking for graphqlApi", error);
+          setGraphQlApi({
+            error: "Something went wrong while looking up graphqlApi. See console."
+          });
+        }
+      }
+    }));
+    return () => {
+      subscriptions.forEach(s => s.unsubscribe());
+    };
+  }, [dataset, projectId, versionedClient, setGraphQlApi, setStudioHost]);
+  const assembleTableRows = useMemo(() => {
+    var _a;
+    let result = [{
+      title: "Sanity project",
+      rows: [{
+        title: "Project ID",
+        value: projectId
+      }, {
+        title: "Dataset",
+        value: dataset
+      }]
+    }];
+    const apps = [studioHost ? {
+      title: "Studio",
+      value: studioHost
+    } : null, ...data.filter(item => item.category === "apps")].filter(a => !!a);
+    if (apps.length > 0) {
+      result = result.concat([{
+        title: "Apps",
+        rows: apps
+      }]);
+    }
+    result = result.concat([{
+      title: "APIs",
+      rows: [{
+        title: "GROQ",
+        value: getGroqUrl(projectId, dataset)
+      }, {
+        title: "GraphQL",
+        value: (_a = typeof graphqlApi === "object" ? "Error" : graphqlApi) != null ? _a : "Not deployed"
+      }]
+    }], data.filter(item => item.category === "apis"));
+    const otherStuff = {};
+    data.forEach(item => {
+      if (item.category && item.category !== "apps" && item.category !== "apis") {
+        if (!otherStuff[item.category]) {
+          otherStuff[item.category] = [];
+        }
+        otherStuff[item.category].push(item);
+      }
+    });
+    Object.keys(otherStuff).forEach(category => {
+      result.push({
+        title: category,
+        rows: otherStuff[category]
+      });
+    });
+    return result;
+  }, [graphqlApi, studioHost, projectId, dataset, data]);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [__experimental_before.map((widgetConfig, idx) => /* @__PURE__ */jsx(WidgetContainer, _objectSpread({}, widgetConfig), idx)), /* @__PURE__ */jsx(Box, {
+      height: "fill",
+      marginTop: (__experimental_before == null ? void 0 : __experimental_before.length) > 0 ? 4 : 0,
+      children: /* @__PURE__ */jsx(DashboardWidgetContainer, {
+        footer: /* @__PURE__ */jsx(Button, {
+          style: {
+            width: "100%"
+          },
+          paddingX: 2,
+          paddingY: 4,
+          mode: "bleed",
+          tone: "primary",
+          text: "Manage project",
+          as: "a",
+          href: getManageUrl(projectId)
+        }),
+        children: /* @__PURE__ */jsx(Card, {
+          paddingY: 4,
+          radius: 2,
+          role: "table",
+          "aria-label": "Project info",
+          "aria-describedby": "project_info_table",
+          children: /* @__PURE__ */jsxs(Stack, {
+            space: 4,
+            children: [/* @__PURE__ */jsx(Box, {
+              paddingX: 3,
+              as: "header",
+              children: /* @__PURE__ */jsx(Heading, {
+                size: 1,
+                as: "h2",
+                id: "project_info_table",
+                children: "Project info"
+              })
+            }), assembleTableRows.map(item => {
+              if (!item || !item.rows) {
+                return null;
+              }
+              return /* @__PURE__ */jsxs(Stack, {
+                space: 3,
+                children: [/* @__PURE__ */jsx(Card, {
+                  borderBottom: true,
+                  padding: 3,
+                  children: /* @__PURE__ */jsx(Label, {
+                    size: 0,
+                    muted: true,
+                    role: "columnheader",
+                    children: item.title
+                  })
+                }), /* @__PURE__ */jsx(Stack, {
+                  space: 4,
+                  paddingX: 3,
+                  role: "rowgroup",
+                  children: item.rows.map(row => {
+                    var _a;
+                    return /* @__PURE__ */jsxs(Grid, {
+                      columns: 2,
+                      role: "row",
+                      children: [/* @__PURE__ */jsx(Text, {
+                        weight: "medium",
+                        role: "rowheader",
+                        children: row.title
+                      }), typeof row.value === "object" && /* @__PURE__ */jsx(Text, {
+                        size: 1,
+                        children: (_a = row.value) == null ? void 0 : _a.error
+                      }), typeof row.value === "string" && /* @__PURE__ */jsx(Fragment, {
+                        children: isUrl(row.value) ? /* @__PURE__ */jsx(Text, {
+                          size: 1,
+                          role: "cell",
+                          style: {
+                            wordBreak: "break-word"
+                          },
+                          children: /* @__PURE__ */jsx("a", {
+                            href: row.value,
+                            children: row.value
+                          })
+                        }) : /* @__PURE__ */jsx(Code, {
+                          size: 1,
+                          role: "cell",
+                          style: {
+                            wordBreak: "break-word"
+                          },
+                          children: row.value
+                        })
+                      })]
+                    }, row.title);
+                  })
+                })]
+              }, item.title);
+            })]
+          })
+        })
+      })
+    })]
+  });
+}
+function projectInfoWidget(config) {
+  var _a;
+  return {
+    name: "project-info",
+    component: ProjectInfo,
+    layout: (_a = config == null ? void 0 : config.layout) != null ? _a : {
+      width: "medium"
+    }
+  };
+}
+const AvatarWrapper = styled(Card)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  border-color: transparent;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  & > img {\n    width: 100%;\n    height: auto;\n  }\n"])));
+function getInviteUrl(projectId) {
+  return "https://manage.sanity.io/projects/".concat(projectId, "/team/invite");
+}
+function ProjectUsers() {
+  const [project, setProject] = useState();
+  const [users, setUsers] = useState();
+  const [error, setError] = useState();
+  const userStore = useUserStore();
+  const versionedClient = useVersionedClient();
+  const fetchData = useCallback(() => {
+    const {
+      projectId
+    } = versionedClient.config();
+    const subscription = versionedClient.observable.request({
+      uri: "/projects/".concat(projectId)
+    }).pipe(switchMap(_project => from(userStore.getUsers(_project.members.map(mem => mem.id))).pipe(map(_users => ({
+      project: _project,
+      users: _users
+    }))))).subscribe({
+      next: _ref2 => {
+        let {
+          users: _users,
+          project: _project
+        } = _ref2;
+        setProject(_project);
+        setUsers((Array.isArray(_users) ? _users : [_users]).sort((userA, userB) => sortUsersByRobotStatus(userA, userB, _project)));
+      },
+      error: e => setError(e)
+    });
+    return () => subscription.unsubscribe();
+  }, [userStore, versionedClient]);
+  useEffect(() => fetchData(), [fetchData]);
+  const handleRetryFetch = useCallback(() => fetchData(), [fetchData]);
+  const isLoading = !users || !project;
+  if (error) {
+    return /* @__PURE__ */jsx(DashboardWidgetContainer, {
+      header: "Project users",
+      children: /* @__PURE__ */jsx(Box, {
+        padding: 4,
+        children: /* @__PURE__ */jsxs(Text, {
+          children: ["Something went wrong while fetching data. You could", " ", /* @__PURE__ */jsx("a", {
+            onClick: handleRetryFetch,
+            title: "Retry users fetch",
+            style: {
+              cursor: "pointer"
+            },
+            children: "retry"
+          }), "..?"]
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */jsxs(DashboardWidgetContainer, {
+    header: "Project users",
+    footer: /* @__PURE__ */jsx(Button, {
+      style: {
+        width: "100%"
+      },
+      paddingX: 2,
+      paddingY: 4,
+      mode: "bleed",
+      tone: "primary",
+      text: "Invite members",
+      as: "a",
+      loading: isLoading,
+      href: isLoading ? void 0 : getInviteUrl(project.id)
+    }),
+    children: [isLoading && /* @__PURE__ */jsx(Box, {
+      paddingY: 5,
+      paddingX: 2,
+      children: /* @__PURE__ */jsxs(Stack, {
+        space: 4,
+        children: [/* @__PURE__ */jsx(Text, {
+          align: "center",
+          muted: true,
+          size: 1,
+          children: /* @__PURE__ */jsx(Spinner, {})
+        }), /* @__PURE__ */jsx(Text, {
+          align: "center",
+          size: 1,
+          muted: true,
+          children: "Loading items..."
+        })]
+      })
+    }), !isLoading && /* @__PURE__ */jsx(Stack, {
+      space: 3,
+      padding: 3,
+      children: users == null ? void 0 : users.map(user => {
+        const membership = project.members.find(member => member.id === user.id);
+        const media = (membership == null ? void 0 : membership.isRobot) ? /* @__PURE__ */jsx(Text, {
+          size: 3,
+          children: /* @__PURE__ */jsx(RobotIcon, {})
+        }) : /* @__PURE__ */jsx(AvatarWrapper, {
+          tone: "transparent",
+          children: (user == null ? void 0 : user.imageUrl) && /* @__PURE__ */jsx("img", {
+            src: user.imageUrl,
+            alt: user == null ? void 0 : user.displayName
+          })
+        });
+        return /* @__PURE__ */jsx(Box, {
+          children: /* @__PURE__ */jsx(DefaultPreview, {
+            title: user.displayName,
+            subtitle: membership == null ? void 0 : membership.role,
+            media
+          })
+        }, user.id);
+      })
+    })]
+  });
+}
+function sortUsersByRobotStatus(userA, userB, project) {
+  const {
+    members
+  } = project;
+  const membershipA = members.find(member => member.id === (userA == null ? void 0 : userA.id));
+  const membershipB = members.find(member => member.id === (userB == null ? void 0 : userB.id));
+  if (membershipA == null ? void 0 : membershipA.isRobot) {
+    return 1;
+  }
+  if (membershipB == null ? void 0 : membershipB.isRobot) {
+    return -1;
+  }
+  return 0;
+}
+function projectUsersWidget(config) {
+  return {
+    name: "project-info",
+    component: ProjectUsers,
+    layout: config == null ? void 0 : config.layout
+  };
+}
+const PlayIconBox = styled(Box)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2.75em;\n    height: 2.75em;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.75;\n  }\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.sanity.color.card.enabled.bg;
+});
+const Root$1 = styled(Flex)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  &:hover {\n    ", " {\n      &:before {\n        opacity: 1;\n      }\n    }\n  }\n"])), PlayIconBox);
+const PosterCard = styled(Card)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding-bottom: calc(9 / 16 * 100%);\n  position: relative;\n"])));
+const Poster = styled.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  display: block;\n\n  &:not([src]) {\n    display: none;\n  }\n"])));
+function Tutorial(props) {
+  const {
+    title,
+    posterURL,
+    showPlayIcon,
+    href,
+    presenterName,
+    presenterSubtitle
+  } = props;
+  return /* @__PURE__ */jsx(Root$1, {
+    flex: 1,
+    children: /* @__PURE__ */jsx(Card, {
+      sizing: "border",
+      flex: 1,
+      padding: 2,
+      radius: 2,
+      as: "a",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        position: "relative"
+      },
+      children: /* @__PURE__ */jsxs(Flex, {
+        direction: "column",
+        style: {
+          height: "100%"
+        },
+        children: [posterURL && /* @__PURE__ */jsxs(PosterCard, {
+          marginBottom: 1,
+          children: [/* @__PURE__ */jsx(Poster, {
+            src: posterURL
+          }), showPlayIcon && /* @__PURE__ */jsx(PlayIconBox, {
+            display: "flex",
+            children: /* @__PURE__ */jsx(Text, {
+              align: "center",
+              children: /* @__PURE__ */jsx(PlayIcon, {})
+            })
+          })]
+        }), /* @__PURE__ */jsxs(Flex, {
+          direction: "column",
+          justify: "space-between",
+          paddingY: 2,
+          flex: 1,
+          children: [/* @__PURE__ */jsx(Heading, {
+            as: "h3",
+            size: 1,
+            children: title
+          }), /* @__PURE__ */jsx(Box, {
+            marginTop: 4,
+            children: /* @__PURE__ */jsxs(Stack, {
+              space: 2,
+              flex: 1,
+              children: [/* @__PURE__ */jsx(Text, {
+                size: 1,
+                children: presenterName
+              }), /* @__PURE__ */jsx(Text, {
+                size: 0,
+                style: {
+                  opacity: 0.7
+                },
+                children: presenterSubtitle
+              })]
+            })
+          })]
+        })]
+      })
+    })
+  });
+}
+const tutorialsProjectConfig = {
+  projectId: "3do82whm",
+  dataset: "next"
+};
+function useDataAdapter() {
+  const versionedClient = useVersionedClient();
+  return useMemo(() => ({
+    getFeed: templateRepoId => {
+      const uri = templateRepoId ? "/addons/dashboard?templateRepoId=".concat(templateRepoId) : "/addons/dashboard";
+      return versionedClient.observable.request({
+        uri,
+        withCredentials: false
+      });
+    },
+    urlBuilder: imageUrlBuilder(tutorialsProjectConfig)
+  }), [versionedClient]);
+}
+function createUrl(slug, type) {
+  if (type === "tutorial") {
+    return "https://www.sanity.io/docs/tutorials/".concat(slug.current);
+  } else if (type === "guide") {
+    return "https://www.sanity.io/docs/guides/".concat(slug.current);
+  }
+  return false;
+}
+function SanityTutorials(props) {
+  const {
+    templateRepoId
+  } = props;
+  const [feedItems, setFeedItems] = useState([]);
+  const {
+    getFeed,
+    urlBuilder
+  } = useDataAdapter();
+  useEffect(() => {
+    const subscription = getFeed(templateRepoId).subscribe(response => {
+      setFeedItems(response.items);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [setFeedItems, getFeed, templateRepoId]);
+  const title = "Learn about Sanity";
+  return /* @__PURE__ */jsx(DashboardWidgetContainer, {
+    header: title,
+    children: /* @__PURE__ */jsx(Flex, {
+      as: "ul",
+      overflow: "auto",
+      align: "stretch",
+      paddingY: 2,
+      children: feedItems == null ? void 0 : feedItems.map((feedItem, index) => {
+        var _a;
+        if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink) {
+          return null;
+        }
+        const presenter = feedItem.presenter || ((_a = feedItem.guideOrTutorial) == null ? void 0 : _a.presenter) || {};
+        const subtitle = feedItem.category;
+        const {
+          guideOrTutorial = {}
+        } = feedItem;
+        const href = (guideOrTutorial.slug ? createUrl(guideOrTutorial.slug, guideOrTutorial._type) : feedItem.externalLink) || feedItem.externalLink;
+        return /* @__PURE__ */jsx(Flex, {
+          as: "li",
+          paddingRight: index < (feedItems == null ? void 0 : feedItems.length) - 1 ? 1 : 3,
+          paddingLeft: index === 0 ? 3 : 0,
+          align: "stretch",
+          style: {
+            minWidth: 272,
+            width: "30%"
+          },
+          children: /* @__PURE__ */jsx(Tutorial, {
+            title: feedItem.title,
+            href: href != null ? href : "",
+            presenterName: presenter.name,
+            presenterSubtitle: subtitle,
+            showPlayIcon: feedItem.hasVideo,
+            posterURL: feedItem.poster ? urlBuilder.image(feedItem.poster).height(360).url() : void 0
+          })
+        }, feedItem._id);
+      })
+    })
+  });
+}
+function sanityTutorialsWidget(config) {
+  var _a;
+  return {
+    name: "sanity-tutorials",
+    component: SanityTutorials,
+    layout: (_a = config == null ? void 0 : config.layout) != null ? _a : {
+      width: "full"
+    }
+  };
+}
+function DashboardLayout(props) {
+  return /* @__PURE__ */jsx(Container, {
+    width: 4,
+    padding: 4,
+    sizing: "border",
+    style: {
+      height: "100%",
+      overflowY: "auto"
+    },
+    children: props.children
+  });
+}
+const media = {
+  small: function () {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      @media (min-width: ", "px) {\n        ", "\n      }\n    "])), _ref4 => {
+      let {
+        theme
+      } = _ref4;
+      return theme.sanity.media[0];
+    }, css(...arguments));
+  },
+  medium: function () {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      @media (min-width: ", "px) {\n        ", "\n      }\n    "])), _ref5 => {
+      let {
+        theme
+      } = _ref5;
+      return theme.sanity.media[2];
+    }, css(...arguments));
+  }
+};
+const Root = styled(Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n\n  & > div {\n    overflow: hidden;\n  }\n\n  & > div[data-width='medium'] {\n    ", "\n  }\n\n  & > div[data-width='large'] {\n    ", "\n\n    ", "\n  }\n\n  & > div[data-width='full'] {\n    ", "\n  }\n\n  & > div[data-height='medium'] {\n    ", "\n  }\n\n  & > div[data-height='large'] {\n    ", "\n\n    ", "\n  }\n\n  & > div[data-height='full'] {\n    ", "\n  }\n"])), media.small(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      grid-column: span 2;\n    "]))), media.small(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      grid-column: span 2;\n    "]))), media.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      grid-column: span 3;\n    "]))), media.small(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      grid-column: 1 / -1;\n    "]))), media.small(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      grid-row: span 2;\n    "]))), media.small(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      grid-row: span 2;\n    "]))), media.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      grid-row: span 3;\n    "]))), media.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      grid-row: 1 / -1;\n    "]))));
+const NO_WIDGETS = [];
+const NO_LAYOUT = {};
+function WidgetGroup(props) {
+  const {
+    config: {
+      layout = NO_LAYOUT,
+      widgets = NO_WIDGETS
+    }
+  } = props;
+  return /* @__PURE__ */jsxs(Root, {
+    autoFlow: "row dense",
+    "data-width": layout.width || "auto",
+    "data-height": layout.height || "auto",
+    gap: 4,
+    children: [widgets.length ? null : /* @__PURE__ */jsx(Card, {
+      padding: 4,
+      shadow: 1,
+      tone: "primary",
+      children: /* @__PURE__ */jsx(Text, {
+        align: "center",
+        children: "Add some widgets to populate this space."
+      })
+    }), widgets.map((widgetConfig, index) => {
+      if (widgetConfig.type === "__experimental_group") {
+        return /* @__PURE__ */jsx(WidgetGroup, {
+          config: widgetConfig
+        }, index);
+      }
+      if (widgetConfig.component) {
+        return /* @__PURE__ */jsx(WidgetContainer, _objectSpread({}, widgetConfig), index);
+      }
+      return /* @__PURE__ */jsxs(Box, {
+        children: [widgetConfig.name, " is missing widget component"]
+      }, index);
+    })]
+  });
+}
+function Dashboard(_ref6) {
+  let {
+    config
+  } = _ref6;
+  if (!config) {
+    return null;
+  }
+  return /* @__PURE__ */jsx(DashboardContext.Provider, {
+    value: config,
+    children: /* @__PURE__ */jsx(DashboardLayout, {
+      children: /* @__PURE__ */jsx(WidgetGroup, {
+        config
+      })
+    })
+  });
+}
+const strokeStyle = {
+  stroke: "currentColor",
+  strokeWidth: 1.2
+};
+const DashboardIcon = () => /* @__PURE__ */jsxs("svg", {
+  "data-sanity-icon": true,
+  viewBox: "0 0 25 25",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid",
+  width: "1em",
+  height: "1em",
+  children: [/* @__PURE__ */jsx("path", {
+    d: "M19.5 19.5H5.5V5.5H19.5V19.5Z",
+    style: strokeStyle
+  }), /* @__PURE__ */jsx("path", {
+    d: "M5.5 12.5H19.5",
+    style: strokeStyle
+  }), /* @__PURE__ */jsx("path", {
+    d: "M14.5 19.5V12.5M10.5 12.5V5.5",
+    style: strokeStyle
+  })]
+});
+const dashboardTool = definePlugin(function () {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _a, _b, _c, _d, _e;
+  const pluginConfig = {
+    layout: (_a = config.defaultLayout) != null ? _a : {},
+    widgets: (_b = config.widgets) != null ? _b : []
+  };
+  const title = (_c = config.title) != null ? _c : "Dashboard";
+  const name = (_d = config.name) != null ? _d : "dashboard";
+  const icon = (_e = config.icon) != null ? _e : DashboardIcon;
+  return {
+    name: "dashboard",
+    tools: (prev, context) => {
+      return [...prev, {
+        title,
+        name,
+        icon,
+        component: () => /* @__PURE__ */jsx(Dashboard, {
+          config: pluginConfig
+        })
+      }];
+    }
+  };
+});
+export { DashboardWidgetContainer, dashboardTool, projectInfoWidget, projectUsersWidget, sanityTutorialsWidget };
 //# sourceMappingURL=index.esm.js.map