@sanity/runtime-cli 12.1.0 → 12.3.0

package/dist/server/static/components/app.css

@@ -498,29 +498,7 @@
   /* ---------------------------------- */
   /* Used for padding, margin, gap, etc. Assumed px units. */
 
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 20px;
-  --space-5: 32px;
-  --space-6: 52px;
   --space-7: 84px;
-  --space-8: 136px;
-  --space-9: 220px;
-
-  /* ---------------------------------- */
-  /* Border Radius (Numerical Scale)    */
-  /* ---------------------------------- */
-  /* Assumed px units. Index 7 is 'pill' shape. */
-  --radius-0: 0px;
-  --radius-1: 1px;
-  --radius-2: 3px;
-  --radius-3: 6px;
-  --radius-4: 9px;
-  --radius-5: 12px;
-  --radius-6: 21px;
-  --radius-7: 9999px; /* Pill / Full round */
 
   /* ---------------------------------- */
   /* Container Widths (Numerical Scale) */
@@ -681,18 +659,15 @@ body {
 .capitalize {
   text-transform: capitalize;
 }
-.flex {
-  display: flex;
-}
-.flex-column {
-  flex-direction: column;
-}
 .items-center {
   align-items: center;
 }
 .space-between {
   justify-content: space-between;
 }
+.flex-end {
+  justify-content: flex-end;
+}
 
 .sticky {
   position: sticky;
@@ -710,13 +685,19 @@ body {
 .left-0 {
   left: 0;
 }
-.bottom-0 {
-  bottom: 0;
-}
 
+.z-10 {
+  z-index: 10;
+}
+.z-32 {
+  z-index: 32;
+}
 .z-100 {
   z-index: 100;
 }
+.w-100 {
+  width: 100%;
+}
 .h-100 {
   height: 100%;
 }
@@ -731,7 +712,7 @@ body {
 }
 
 .border-color {
-  border-color: light-dark(var(--gray-200), var(--gray-800));
+  border-color: var(--card-border-color);
 }
 .border-left {
   border-left-width: 1px;
@@ -754,10 +735,6 @@ body {
   border-top-color: var(--card-border-color);
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .hr-border {
   margin-top: 0;
   margin-bottom: 0;
@@ -790,7 +767,7 @@ footer {
 /* Default (Mobile) Styles */
 filters-component form {
   display: block; /* Stack direct children */
-  padding: var(--space-3); /* Consistent padding */
+  padding: var(--m-space-3); /* Consistent padding */
   border-bottom: 1px solid var(--card-border-color);
 }
 
@@ -798,7 +775,7 @@ filters-component form > * {
   /* Target direct children: dropdowns, fieldset */
   display: block; /* Ensure they are block level */
   width: 100%; /* Make them take full width */
-  margin-bottom: var(--space-3); /* Add space below each item when stacked */
+  margin-bottom: var(--m-space-3); /* Add space below each item when stacked */
 }
 
 filters-component form > *:last-child {
@@ -807,7 +784,7 @@ filters-component form > *:last-child {
 
 filters-component form label {
   display: block; /* Ensure label stacks above input if needed */
-  margin-bottom: var(--space-1); /* Small space between label and input */
+  margin-bottom: var(--m-space-1); /* Small space between label and input */
 }
 
 filters-component form input {
@@ -907,9 +884,9 @@ console-panel {
     display: flex;
     flex-direction: row;
     align-items: flex-end; /* Align form elements along their bottom edge */
-    gap: var(--space-3); /* Space between elements */
-    padding-left: var(--space-3);
-    padding-bottom: var(--space-3);
+    gap: var(--m-space-3); /* Space between elements */
+    padding-left: var(--m-space-3);
+    padding-bottom: var(--m-space-3);
   }
 
   filters-component form > * {
@@ -933,12 +910,6 @@ footer {
   border-top: 1px solid var(--card-border-color);
 }
 
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
 .logo-image {
   height: 25px;
   width: 25px;
@@ -961,7 +932,6 @@ footer {
   appearance: none;
   -webkit-appearance: none;
   display: flex;
-  align-items: center;
   gap: 6px;
   background-color: light-dark(var(--gray-900), white) !important;
   color: light-dark(white, var(--gray-950)) !important;
@@ -969,7 +939,7 @@ footer {
   border-radius: 3px !important;
   outline: 0;
   font-size: 14px !important;
-  line-height: 1;
+  line-height: 1 !important;
   padding: 0px 12px !important;
   height: 24px !important;
   max-width: 160px;
@@ -992,7 +962,6 @@ footer {
 }
 
 .function-list-item {
-  padding: 8px;
   font-size: 0.875rem;
   border-radius: 3px;
   margin: 0 0 1px 0;
@@ -1002,7 +971,7 @@ footer {
 .function-list-item-label {
   color: light-dark(var(--gray-800), var(--gray-400));
   font-weight: var(--font-weight-3);
-  padding-bottom: var(--space-1);
+  padding-bottom: var(--m-space-1);
 }
 
 .function-list-item-type {
@@ -1025,50 +994,12 @@ ol[type='content'] li:hover:not(.selected:not(.selected)) {
   background-color: light-dark(var(--gray-100), var(--gray-800)) !important;
 }
 
-m-box {
-  background-color: var(--card-bg-color) !important;
-  border-color: var(--card-border-color) !important;
-  color: var(--text-color) !important;
-}
-
-m-tabs {
-  font-size: 0.8125rem;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 10px 0 10px 40px;
-}
-
-m-tabs {
-  & > :is(a, button) {
-    padding: 4px 12px !important;
-    color: light-dark(var(--gray-900), var(--gray-300)) !important;
-  }
-}
-
-m-tabs {
-  & > :is(a, button) {
-    &[aria-selected='true'] {
-      background: light-dark(var(--gray-100), var(--gray-800));
-      color: light-dark(var(--gray-800), var(--gray-100)) !important;
-    }
-  }
-}
-
-:is(ul, ol)[type='content'] {
+:is(ol)[type='content'] {
   & > li:not(:last-of-type) {
     border-bottom: 0 !important;
   }
 }
 
-.tab {
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 0.1875rem;
-  padding: 8px;
-  border: 0 !important;
-}
-
 #payload {
   height: 100%;
 }
@@ -1131,11 +1062,7 @@ m-tabs {
 }
 
 .slab-stat {
-  display: flex;
-  align-items: center;
   gap: 0 8px;
-  margin: 0;
-  padding: var(--space-3);
 }
 
 .slab-stat dt {
@@ -1259,3 +1186,101 @@ body:has(#nav-toggle:checked) {
       / 40px 1fr !important;
   }
 }
+
+.bg-base {
+  background-color: var(--base-background-color);
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.break-word {
+  word-wrap: break-word;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.transparent {
+  background: transparent;
+}
+
+.component-color {
+  color: light-dark(var(--gray-950), var(--gray-300));
+}
+
+.component-height {
+  height: 2.5rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.mar-l-specific {
+  margin-left: 31px;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.response-panel-grid {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+}
+
+.gap-25 {
+  gap: 0.25rem;
+}
+
+.appearance-none {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.dropdown-template {
+  padding-right: 2rem;
+  border: 1px solid var(--gray-400);
+  border-radius: var(--m-border-radius-2);
+  height: var(--input-height, 2.5rem);
+}
+
+.dropdown-template-div {
+  position: absolute;
+  top: 50%;
+  right: 0.4rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.nav-min-width {
+  min-width: 200px;
+}
+
+.nav-label {
+  position: absolute;
+  top: var(--m-space-2);
+  right: var(--m-space-3);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 2px;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+}

package/dist/server/static/components/clear-button.js

@@ -7,7 +7,7 @@ template.innerHTML = `
 button {
   background-color: transparent;
   border-color: transparent;
-  margin-left: var(--space-1);
+  margin-left: var(--m-space-1);
   display: flex;
   align-items: center;
   cursor: pointer;

package/dist/server/static/components/console-panel.js

@@ -3,19 +3,19 @@ import {ApiBaseElement} from './api-base.js'
 
 // Template for the console panel
 const template = `
-<div id="console-container" style="position: relative; background: var(--base-background-color); padding: var(--space-0) var(--space-3) var(--space-7) var(--space-4); overflow-y: scroll; border-top: 1px solid var(--card-border-color); height: 100%; max-height: 100%;">
-  <div style=" position: sticky; top: 0; left: 0; right: 0; margin-top: 0; margin-bottom: 0;">
-    <h3 class="config-label mar-t-0 mar-b-0" style="padding-top: var(--space-3); z-index: 32; background: var(--base-background-color);">
+<div id="console-container" class="relative y-scroll h-100 max-h-100 bg-base pad-t-0 pad-r-3 pad-b-7 pad-l-5 border-top">
+  <div class="sticky top-0 left-0 right-0 mar-t-0 mar-b-0">
+    <h3 class="config-label mar-t-0 mar-b-0 pad-t-3 bg-base z-32">
       Console
     </h3>
-    <div style="background: var(--base-background-color); display: flex; justify-content: flex-end; align-items: center; padding: var(--space-0); padding-block-end: var(--space-2)">
+    <div class="bg-base flex items-center pad-0 pad-b-2 flex-end">
       <toggle-switch toggle-key="preserveLog">
-        <span class="slab-text" style="margin-left: var(--space-1);">Preserve Log</span>
+        <span class="slab-text mar-l-1">Preserve Log</span>
       </toggle-switch>
       <clear-button></clear-button>
     </div>
   </div>
-  <pre id="console-output" style="padding: 0; margin: 0 0 var(--space-4) 0; white-space: pre-wrap; word-wrap: break-word;"></pre>
+  <pre id="console-output" class="pad-0 mar-t-0 mar-r-0 mar-b-5 mar-l-0 pre-wrap break-word"></pre>
 </div>
 
 `

package/dist/server/static/components/fetch-button.js

@@ -64,7 +64,7 @@ export class FetchButton extends ApiBaseElement {
 
       try {
         // TODO: This assumes only two functions types for the sake of releasing today
-        if (this.api.store.selectedFunctionType === 'sanity.function.document') {
+        if (this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT) {
           await this.api.document({
             projectId: this.api.store.selectedProject,
             dataset: this.api.store.selectedDataset,

package/dist/server/static/components/filter-api-version.js

@@ -1,10 +1,10 @@
 class ApiVersionComponent extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-<fieldset class="mar-t-sm">
+<fieldset class="mar-t-2">
     <label class="slab-text">
-      <span style="display: block; margin-bottom: var(--space-1);">API Version</span>
-      <input name="apiVersion" id="apiversion" style="background: transparent; border-color: light-dark(var(--gray-200), var(--gray-700)); height: 2.5rem; color: light-dark(var(--gray-950), var(--gray-300));">
+      <span class="block mar-b-1">API Version</span>
+      <input name="apiVersion" id="apiversion" class="transparent border-color component-color component-height">
     </label>
 </fieldset>
 `

package/dist/server/static/components/filter-document-id.js

@@ -1,10 +1,10 @@
 class DocumentIdFilter extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-<fieldset class="mar-t-sm" style="margin-top: 12px !important;">
+<fieldset class="mar-t-2">
     <label class="slab-text">
-      <span style="display: block; margin-bottom: var(--space-1);">
-        <span style="display: flex; align-items: center;">
+      <span class="block mar-b-1">
+        <span class="flex items-center">
           Document ID
           <help-button>
             <p>Fill out "Document ID" text field and then click the "Fetch Document" button to pre-populate the Document panel.</p>
@@ -13,8 +13,8 @@ class DocumentIdFilter extends HTMLElement {
           </help-button>
         </span>
       </span>
-      <div style="display: flex; flex-direction: row; gap: var(--space-2);">
-        <input name="docid" id="docid" style="background: transparent; border-color: light-dark(var(--gray-200), var(--gray-700)); height: 2.5rem; color: light-dark(var(--gray-950), var(--gray-300));">
+      <div class="flex flex-direction-row gap-2">
+        <input name="docid" id="docid" class="transparent component-color border-color component-height">
         <fetch-button></fetch-button>
       </div>
     </label>

package/dist/server/static/components/filter-with-token.js

@@ -1,9 +1,9 @@
 class WithTokenComponent extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-<fieldset class="mar-t-sm" style="display: flex; flex-direction: column; margin-top: 12px !important;">
-    <span class="slab-text" style="display: block; margin-bottom: var(--space-1);">
-        <span style="display: flex; align-items: center;">
+<fieldset class="mar-t-2" class="flex flex-col">
+    <span class="slab-text block mar-b-1">
+        <span class="flex items-center">
         With Token
         <help-button>
             <p><strong>With Token</strong> controls whether your function runs with or without authentication.</p>
@@ -12,7 +12,7 @@ class WithTokenComponent extends HTMLElement {
         </help-button>
         </span>
     </span>
-    <toggle-switch toggle-key="withToken" style="display: flex; height: 2.5rem;"></toggle-switch>
+    <toggle-switch toggle-key="withToken" class="flex component-height"></toggle-switch>
 </fieldset>
 `
   }

package/dist/server/static/components/filters.js

@@ -8,8 +8,8 @@ class FiltersComponent extends ApiBaseElement {
     )
 
     this.innerHTML = `
-        <form style="gap: 8px; padding-left: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border-color);">
-          <fieldset style="display: flex; gap: var(--space-2);">
+        <form class="gap-2 pad-l-3 pad-b-3 border-bottom">
+          <fieldset class="flex gap-2">
             <legend class="config-label">Client Options</legend>
             ${
               docFunction

package/dist/server/static/components/function-list.js

@@ -1,8 +1,8 @@
 /* globals customElements */
 import {ApiBaseElement} from './api-base.js'
 
-const template = `<ol class="hidden-lg" type="content" style="padding:0 16px;"></ol>
-<fieldset class="hidden block-lg" style="padding:0 var(--space-3); margin-bottom: var(--space-3);"><select class="dropdown-select"></select></fieldset>
+const template = `<ol class="hidden-lg pad-t-0 pad-b-0 pad-r-4 pad-l-4" type="content"></ol>
+<fieldset class="hidden block-lg pad-t-0 pad-b-0 pad-r-3 pad-l-3 mar-b-3"><select class="dropdown-select"></select></fieldset>
 `
 
 class FunctionList extends ApiBaseElement {
@@ -17,13 +17,22 @@ class FunctionList extends ApiBaseElement {
   }
   renderListItem = (func) => {
     const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
-    return `<li data-name="${func.name}" class="function-list-item ${selected} flex flex-column" style="padding: 16px 24px;">
+    return `<li data-name="${func.name}" class="function-list-item ${selected} flex flex-col pad-t-4 pad-b-4 pad-r-6 pad-l-6">
 <span class="function-list-item-label">${func.name}</span>
 <span class="function-list-item-type capitalize">${this.renderType(func.type)}</span>
 </li>`
   }
   renderType = (type) => {
-    return type.split('.').pop().replaceAll('-', ' ')
+    switch (type) {
+      case this.SANITY_FUNCTION_DOCUMENT:
+        return 'Document'
+      case this.SANITY_FUNCTION_MEDIA_LIBRARY_ASSET:
+        return 'Media Library'
+      case this.SANITY_FUNCTION_SCHEDULE:
+        return 'Schedule'
+      default:
+        return type.split('.').pop().replaceAll('-', ' ')
+    }
   }
   renderFunctions = () => {
     if (this.api.store.functions.length > 0) {
@@ -39,7 +48,7 @@ class FunctionList extends ApiBaseElement {
         })
         .join('')
     } else {
-      this.list.innerHTML = '<option class="pad-sm">No Blueprint found</li>'
+      this.list.innerHTML = '<option class="pad-2">No Blueprint found</li>'
       this.select.innerHTML = '<option>No blueprint.json file found</option>'
     }
   }

package/dist/server/static/components/help-button.js

@@ -36,12 +36,15 @@ div[popover] {
   opacity: 1;
   visibility: visible;
 }
+.help-button-padding {
+  padding: 0.75rem;
+}
 </style>
 <button title="Info" popovertarget="popover-el">
     <svg data-sanity-icon="help-circle" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 13C12.5 11 14 11.5 14 10C14 9.34375 13.5 8.5 12.5 8.5C11.5 8.5 11 9 10.5 9.5M12.5 16V14.5M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
 </button>
 <div popover="" id="popover-el">
-  <div style="padding: 0.75rem;">
+  <div class="help-button-padding">
     <slot>
     </slot>
   </div>

package/dist/server/static/components/payload-panel.js

@@ -5,31 +5,31 @@ import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
 
 function template({selectedEvent}) {
-  const singleModeStyle = selectedEvent === 'update' ? ' style="display: none;"' : ''
-  const deltaModeStyle = selectedEvent !== 'update' ? '' : ' style="display: none;"'
+  const singleModeStyle = selectedEvent === 'update' ? ' class="hidden"' : ''
+  const deltaModeStyle = selectedEvent !== 'update' ? '' : ' class="hidden"'
   return `<div id="payloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"${singleModeStyle}>
   <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
-    <div class="flex items-center space-between" style="padding: 8px 20px 8px 48px;">
+    <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
       <h2 class="config-label mar-t-0 mar-b-0">Document</h2>
     </div>
-    <hr class='hr-border' style='margin-left: 31px; ' />
+    <hr class='hr-border mar-l-specific' />
   </div>
   <div id="payload" name="payload" class='max-h-100 min-h-0'></div>
 </div>
 <div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"${deltaModeStyle}>
   <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
-    <div class="flex items-center space-between" style="padding: 8px 20px 8px 48px;">
+    <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
       <h2 class="config-label mar-t-0 mar-b-0">Before Document</h2>
     </div>
-    <hr class='hr-border' style='margin-left: 31px; ' />
+    <hr class='hr-border' class="mar-l-specific" />
   </div>
   <div id="beforePayload" name="beforePayload" class='max-h-50 min-h-0'></div>
   <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
-    <hr class='hr-border' style='margin-left: 31px; ' />
-    <div class="flex items-center space-between" style="padding: 8px 20px 8px 48px;">
+    <hr class='hr-border mar-l-specific' />
+    <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
       <h2 class="config-label mar-t-0 mar-b-0">After Document</h2>
     </div>
-    <hr class='hr-border' style='margin-left: 31px; ' />
+    <hr class='hr-border mar-l-specific' />
   </div>
   <div id="afterPayload" name="afterPayload" class='max-h-50 min-h-0'></div>
 </div>

package/dist/server/static/components/response-panel.js

@@ -12,17 +12,17 @@ import {
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
 
-const template = `<div class="border-left border-top border-top-none-l h-100 gutter-gradient" style='height: 100%; max-height: 100%; overflow: hidden; display:grid;grid-template-rows: auto 1fr; grid-template-columns: 1fr;' >
+const template = `<div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
     <!-- Response Section -->
-        <div style='overflow-y:scroll; min-height: 0;'>
-            <div style='padding-bottom: var(--space-6)'>
-            <h3 class="config-label" style='display: none; margin-top: 0;'>Response</h3>
+        <div class="y-scroll min-h-0">
+            <div class="pad-b-12">
+            <h3 class="config-label mar-t-0 hidden">Response</h3>
             <header class='flex space-between'>
-              <dl class='slab-stat'>
-                <dt style='white-space:nowrap;'>Response size</dt>
-                <dd id="size" style='white-space:nowrap;'></dd>
+              <dl class='flex items-center margin-0 pad-3 slab-stat'>
+                <dt class='nowrap'>Response size</dt>
+                <dd id="size" class='nowrap'></dd>
               </dl>
-              <dl class='slab-stat'>
+              <dl class='flex items-center margin-0 pad-3 slab-stat'>
                 <dt>Time</dt>
                 <dd><time id="time" datetime=""></time></dd>
               </dl>

package/dist/server/static/components/rule-panel.js

@@ -5,12 +5,12 @@ import {basicSetup, EditorState, EditorView, json} from '../vendor/vendor.bundle
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
 
-const template = `<div class="border-left" style='overflow-y:scroll; min-height: 0;'>
+const template = `<div class="border-left y-scroll min-h-0">
   <div>
-    <h3 class="config-label" style='display: none; margin-top: 0;'>Filter/Projection</h3>
+    <h3 class="config-label mar-t-0 hidden">Filter/Projection</h3>
     <header class='flex space-between'>
-        <dl class='slab-stat'>
-          <dt style='white-space:nowrap;'>Filter/Projection</dt>
+        <dl class='flex items-center margin-0 pad-3 slab-stat'>
+          <dt class='nowrap'>Filter/Projection</dt>
         </dl>
     </header>
     <div id="rule" name="rule" class="cm-s-dracula"></div>

package/dist/server/static/components/run-panel.js

@@ -4,9 +4,9 @@ import {ApiBaseElement} from './api-base.js'
 const runTemplate = `<svg data-sanity-icon="play" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 18.5V6.5L17.5 12.5L7.5 18.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
 <span title="Type CTRL + Enter to Run">Run</span>`
 
-const template = `<div style="padding: var(--space-3);">
-    <button ord="primary" class="sanity-button">
-        <span style="padding: var(--space-3); display: flex; gap: 0.25rem; justify-content: center; flex-direction: row;">
+const template = `<div class="pad-3">
+    <button ord="primary" class="items-center sanity-button">
+        <span class="flex pad-3 gap-25 justify-content-center flex-row">
             ${runTemplate}
         </span>
     </button>
@@ -15,7 +15,7 @@ const template = `<div style="padding: var(--space-3);">
 class RunPanel extends ApiBaseElement {
   invoke = () => {
     const selectedEvent = this.api.store.selectedEvent
-    const docFunction = this.api.store.selectedFunctionType === 'sanity.function.document'
+    const docFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT
 
     this.api.store.result = {logs: '', time: 0}
     let event = {}