@sanity/runtime-cli 9.1.1 → 9.2.0

package/README.md

@@ -20,7 +20,7 @@ $ npm install -g @sanity/runtime-cli
 $ sanity-run COMMAND
 running command...
 $ sanity-run (--version)
-@sanity/runtime-cli/9.1.1 linux-x64 node-v22.16.0
+@sanity/runtime-cli/9.2.0 linux-x64 node-v22.17.0
 $ sanity-run --help [COMMAND]
 USAGE
   $ sanity-run COMMAND
@@ -86,7 +86,7 @@ EXAMPLES
   $ sanity-run blueprints add function --name my-function --fn-type document-publish --lang js
 ```
 
-_See code: [src/commands/blueprints/add.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/add.ts)_
+_See code: [src/commands/blueprints/add.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/add.ts)_
 
 ## `sanity-run blueprints config`
 
@@ -117,7 +117,7 @@ EXAMPLES
   $ sanity-run blueprints config --edit --project-id <projectId> --stack-id <stackId>
 ```
 
-_See code: [src/commands/blueprints/config.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/config.ts)_
+_See code: [src/commands/blueprints/config.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/config.ts)_
 
 ## `sanity-run blueprints deploy`
 
@@ -139,7 +139,7 @@ EXAMPLES
   $ sanity-run blueprints deploy --no-wait
 ```
 
-_See code: [src/commands/blueprints/deploy.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/deploy.ts)_
+_See code: [src/commands/blueprints/deploy.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/deploy.ts)_
 
 ## `sanity-run blueprints destroy`
 
@@ -164,7 +164,7 @@ EXAMPLES
   $ sanity-run blueprints destroy --stack-id <stackId> --project-id <projectId> --force --no-wait
 ```
 
-_See code: [src/commands/blueprints/destroy.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/destroy.ts)_
+_See code: [src/commands/blueprints/destroy.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/destroy.ts)_
 
 ## `sanity-run blueprints info`
 
@@ -186,7 +186,7 @@ EXAMPLES
   $ sanity-run blueprints info --stack-id <stackId>
 ```
 
-_See code: [src/commands/blueprints/info.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/info.ts)_
+_See code: [src/commands/blueprints/info.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/info.ts)_
 
 ## `sanity-run blueprints init [DIR]`
 
@@ -224,7 +224,7 @@ EXAMPLES
   $ sanity-run blueprints init --blueprint-type <json|js|ts> --stack-name <stackName>
 ```
 
-_See code: [src/commands/blueprints/init.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/init.ts)_
+_See code: [src/commands/blueprints/init.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/init.ts)_
 
 ## `sanity-run blueprints logs`
 
@@ -246,7 +246,7 @@ EXAMPLES
   $ sanity-run blueprints logs --watch
 ```
 
-_See code: [src/commands/blueprints/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/logs.ts)_
+_See code: [src/commands/blueprints/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/logs.ts)_
 
 ## `sanity-run blueprints plan`
 
@@ -263,7 +263,7 @@ EXAMPLES
   $ sanity-run blueprints plan
 ```
 
-_See code: [src/commands/blueprints/plan.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/plan.ts)_
+_See code: [src/commands/blueprints/plan.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/plan.ts)_
 
 ## `sanity-run blueprints stacks`
 
@@ -285,7 +285,7 @@ EXAMPLES
   $ sanity-run blueprints stacks --project-id <projectId>
 ```
 
-_See code: [src/commands/blueprints/stacks.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/blueprints/stacks.ts)_
+_See code: [src/commands/blueprints/stacks.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/blueprints/stacks.ts)_
 
 ## `sanity-run functions dev`
 
@@ -305,7 +305,7 @@ EXAMPLES
   $ sanity-run functions dev --port 8974
 ```
 
-_See code: [src/commands/functions/dev.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/functions/dev.ts)_
+_See code: [src/commands/functions/dev.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/functions/dev.ts)_
 
 ## `sanity-run functions env add NAME KEY VALUE`
 
@@ -327,7 +327,7 @@ EXAMPLES
   $ sanity-run functions env add MyFunction API_URL https://api.example.com/
 ```
 
-_See code: [src/commands/functions/env/add.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/functions/env/add.ts)_
+_See code: [src/commands/functions/env/add.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/functions/env/add.ts)_
 
 ## `sanity-run functions env list NAME`
 
@@ -347,7 +347,7 @@ EXAMPLES
   $ sanity-run functions env list MyFunction
 ```
 
-_See code: [src/commands/functions/env/list.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/functions/env/list.ts)_
+_See code: [src/commands/functions/env/list.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/functions/env/list.ts)_
 
 ## `sanity-run functions env remove NAME KEY`
 
@@ -368,7 +368,7 @@ EXAMPLES
   $ sanity-run functions env remove MyFunction API_URL
 ```
 
-_See code: [src/commands/functions/env/remove.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/functions/env/remove.ts)_
+_See code: [src/commands/functions/env/remove.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/functions/env/remove.ts)_
 
 ## `sanity-run functions logs NAME`
 
@@ -402,7 +402,7 @@ EXAMPLES
   $ sanity-run functions logs <name> --delete
 ```
 
-_See code: [src/commands/functions/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/functions/logs.ts)_
+_See code: [src/commands/functions/logs.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/functions/logs.ts)_
 
 ## `sanity-run functions test NAME`
 
@@ -410,19 +410,21 @@ Invoke a local Sanity Function
 
 ```
 USAGE
-  $ sanity-run functions test NAME [-d <value>] [-f <value>] [-t <value>] [-a <value>] [--dataset <value>]
-    [--project-id <value>]
+  $ sanity-run functions test NAME [-d <value> | -f <value> | --document-id <value>] [-t <value>] [-a <value>]
+    [--dataset <value>] [--project-id <value>] [--with-user-token]
 
 ARGUMENTS
   NAME  The name of the Sanity Function
 
 FLAGS
-  -a, --api=<value>         Sanity API Version to use
-  -d, --data=<value>        Data to send to the function
-  -f, --file=<value>        Read data from file and send to the function
-  -t, --timeout=<value>     Execution timeout value in seconds
-      --dataset=<value>     The Sanity dataset to use
-      --project-id=<value>  Sanity Project ID to use
+  -a, --api=<value>          Sanity API Version to use
+  -d, --data=<value>         Data to send to the function
+  -f, --file=<value>         Read data from file and send to the function
+  -t, --timeout=<value>      Execution timeout value in seconds
+      --dataset=<value>      The Sanity dataset to use
+      --document-id=<value>  Document to fetch and send to function
+      --project-id=<value>   Sanity Project ID to use
+      --with-user-token      Prime access token from CLI config
 
 DESCRIPTION
   Invoke a local Sanity Function
@@ -435,7 +437,7 @@ EXAMPLES
   $ sanity-run functions test <name> --data '{ "id": 1 }' --timeout 60
 ```
 
-_See code: [src/commands/functions/test.ts](https://github.com/sanity-io/runtime-cli/blob/v9.1.1/src/commands/functions/test.ts)_
+_See code: [src/commands/functions/test.ts](https://github.com/sanity-io/runtime-cli/blob/v9.2.0/src/commands/functions/test.ts)_
 
 ## `sanity-run help [COMMAND]`
 

package/dist/actions/functions/dev.js

@@ -1,4 +1,4 @@
-import app from '../../server/app.js';
+import { app } from '../../server/app.js';
 export async function dev(port) {
     app(Number(port));
 }

package/dist/commands/functions/test.d.ts

@@ -12,6 +12,8 @@ export default class TestCommand extends BlueprintCommand<typeof TestCommand> {
         api: import("@oclif/core/interfaces").OptionFlag<string | undefined, import("@oclif/core/interfaces").CustomOptions>;
         dataset: import("@oclif/core/interfaces").OptionFlag<string | undefined, import("@oclif/core/interfaces").CustomOptions>;
         'project-id': import("@oclif/core/interfaces").OptionFlag<string | undefined, import("@oclif/core/interfaces").CustomOptions>;
+        'document-id': import("@oclif/core/interfaces").OptionFlag<string | undefined, import("@oclif/core/interfaces").CustomOptions>;
+        'with-user-token': import("@oclif/core/interfaces").BooleanFlag<boolean>;
     };
     run(): Promise<void>;
 }

package/dist/commands/functions/test.js

@@ -12,10 +12,16 @@ export default class TestCommand extends BlueprintCommand {
         `<%= config.bin %> <%= command.id %> <name> --data '{ "id": 1 }' --timeout 60`,
     ];
     static flags = {
-        data: Flags.string({ char: 'd', description: 'Data to send to the function', required: false }),
+        data: Flags.string({
+            char: 'd',
+            description: 'Data to send to the function',
+            exclusive: ['file', 'document-id'],
+            required: false,
+        }),
         file: Flags.string({
             char: 'f',
             description: 'Read data from file and send to the function',
+            exclusive: ['data', 'document-id'],
             required: false,
         }),
         timeout: Flags.integer({
@@ -37,6 +43,16 @@ export default class TestCommand extends BlueprintCommand {
             aliases: ['project', 'projectId'],
             required: false,
         }),
+        'document-id': Flags.string({
+            description: 'Document to fetch and send to function',
+            aliases: ['doc', 'documentId'],
+            exclusive: ['data', 'file'],
+            required: false,
+        }),
+        'with-user-token': Flags.boolean({
+            description: 'Prime access token from CLI config',
+            default: false,
+        }),
     };
     async run() {
         const { success, error } = await functionTestCore({

package/dist/cores/functions/test.d.ts

@@ -12,6 +12,8 @@ export interface FunctionTestOptions extends CoreConfig {
         api?: string;
         dataset?: string;
         'project-id'?: string;
+        'document-id'?: string;
+        'with-user-token'?: boolean;
     };
 }
 export declare function functionTestCore(options: FunctionTestOptions): Promise<CoreResult>;

package/dist/cores/functions/test.js

@@ -1,10 +1,13 @@
+import ora from 'ora';
 import { testAction } from '../../actions/functions/test.js';
+import config from '../../config.js';
 import buildPayload from '../../utils/build-payload.js';
 import { findFunctionByName } from '../../utils/find-function.js';
+import { fetchDocument } from '../../utils/functions/fetch-document.js';
 export async function functionTestCore(options) {
     const { blueprint, log, args, flags } = options;
     const { name: fnName } = args;
-    const { data, file, timeout, api, dataset } = flags;
+    const { data, file, timeout, api, dataset, 'document-id': documentId, 'with-user-token': withUserToken, } = flags;
     let { 'project-id': projectId } = flags;
     const { parsedBlueprint } = blueprint;
     if (!projectId && blueprint?.projectId) {
@@ -12,10 +15,6 @@ export async function functionTestCore(options) {
     }
     try {
         const resource = findFunctionByName(parsedBlueprint, fnName); // throws if not found
-        const invokeOptions = {
-            payload: buildPayload({ data, file }),
-            timeout: timeout ? timeout : resource.timeout,
-        };
         const contextOptions = {
             clientOptions: {
                 apiVersion: api,
@@ -23,13 +22,33 @@ export async function functionTestCore(options) {
                 projectId,
             },
         };
+        // If the user sets the flag to use the real token set it in our options
+        if (withUserToken) {
+            contextOptions.clientOptions.token = config.token || undefined;
+        }
+        const payload = documentId
+            ? await fetchDocument(documentId, {
+                projectId,
+                dataset,
+                apiVersion: api,
+                apiHost: config.apiUrl,
+                token: config.token || undefined,
+            })
+            : buildPayload({ data, file });
+        const invokeOptions = {
+            payload,
+            timeout: timeout ? timeout : resource.timeout,
+        };
+        const spinner = ora('Executing function...').start();
         const { json, logs, error } = await testAction(resource, invokeOptions, contextOptions);
         if (error) {
+            spinner.fail('Function execution failed.');
             return {
                 success: false,
                 error: error.toString(),
             };
         }
+        spinner.succeed('Function execution succeeded.');
         log('Logs:');
         log(logs || '');
         if (json) {

package/dist/server/app.d.ts

@@ -1,2 +1,8 @@
 declare const app: (port: number) => void;
-export default app;
+declare function parseDocumentUrl(url: string): {
+    projectId: string;
+    dataset: string;
+    docId: string;
+} | null;
+declare function buildApiUrl(projectId: string, dataset: string, docId: string, apiUrl: string): string;
+export { app, parseDocumentUrl, buildApiUrl };

package/dist/server/app.js

@@ -34,6 +34,14 @@ const app = (port) => {
                         try {
                             const { data, func: functionName } = parseInvokeRequest(Buffer.concat(body));
                             const { context, event } = data;
+                            // replace user token if required
+                            if (context.clientOptions.token) {
+                                context.clientOptions.token = config.token || undefined;
+                            }
+                            else {
+                                // biome-ignore lint/performance/noDelete:
+                                delete context.clientOptions.token;
+                            }
                             const start = performance.now();
                             const { parsedBlueprint } = await readLocalBlueprint();
                             const resource = findFunctionByName(parsedBlueprint, functionName);
@@ -104,6 +112,36 @@ const app = (port) => {
                 }
                 break;
             }
+            case req.url?.startsWith('/document'): {
+                const url = req.url || '';
+                const parsed = parseDocumentUrl(url);
+                if (parsed) {
+                    const { projectId, dataset, docId } = parsed;
+                    res.setHeader('Content-Type', 'application/json');
+                    try {
+                        let json = {};
+                        const url = buildApiUrl(projectId, dataset, docId, config.apiUrl);
+                        if (docId) {
+                            const response = await fetch(url, {
+                                headers: {
+                                    Authorization: `Bearer ${config.token}`,
+                                },
+                            });
+                            const queryResponse = await response.json();
+                            if (queryResponse?.result[0]) {
+                                json = queryResponse?.result[0];
+                            }
+                        }
+                        res.writeHead(200);
+                        res.end(JSON.stringify(json));
+                    }
+                    catch (error) {
+                        res.writeHead(200);
+                        res.end(JSON.stringify([]));
+                    }
+                }
+                break;
+            }
             default: {
                 const requestPath = req.url?.endsWith('/') ? `${req.url}index.html` : req.url;
                 const filePath = new URL(`./static${requestPath}`, import.meta.url).pathname;
@@ -133,6 +171,26 @@ const app = (port) => {
         });
     });
 };
+// Helper function to test URL parsing and document fetching logic
+function parseDocumentUrl(url) {
+    const matches = url.match(/[?&]project=([^&]+).*?[&]dataset=([^&]+).*?[&]doc=([^&]+)/) || [];
+    if (matches && matches.length === 4) {
+        const [, projectId, dataset, docId] = matches;
+        // Ensure all parameters are present and non-empty
+        if (projectId && dataset && docId) {
+            return { projectId, dataset, docId };
+        }
+    }
+    return null;
+}
+// Helper function to build expected API URL
+function buildApiUrl(projectId, dataset, docId, apiUrl) {
+    const encodedQuery = encodeURIComponent(`*[_id == "${docId}"]`);
+    const baseUrl = apiUrl === 'https://api.sanity.io/'
+        ? `https://${projectId}.api.sanity.io/`
+        : `https://${projectId}.api.sanity.work/`;
+    return `${baseUrl}v1/data/query/${dataset}?query=${encodedQuery}`;
+}
 function parseInvokeRequest(body) {
     let json;
     try {
@@ -189,4 +247,4 @@ function parseInvokeRequest(body) {
     };
     return { func, data: { context: { ...context, clientOptions }, event } };
 }
-export default app;
+export { app, parseDocumentUrl, buildApiUrl };

package/dist/server/static/api.d.ts

@@ -1,5 +1,6 @@
 export default function API(): {
     blueprint: typeof blueprint;
+    document: typeof document;
     invoke: typeof invoke;
     projects: typeof projects;
     datasets: typeof datasets;
@@ -8,6 +9,11 @@ export default function API(): {
     unsubscribe: any;
 };
 declare function blueprint(): void;
+declare function document({ projectId, dataset, docId }: {
+    projectId: any;
+    dataset: any;
+    docId: any;
+}): Promise<void>;
 declare function invoke(payloadText?: string): void;
 declare function projects(): void;
 declare function datasets(selectedProject: any): void;

package/dist/server/static/api.js

@@ -7,6 +7,7 @@ const store = Store()
 export default function API() {
   return {
     blueprint,
+    document,
     invoke,
     projects,
     datasets,
@@ -85,6 +86,17 @@ function datasets(selectedProject) {
     })
 }
 
+function document({projectId, dataset, docId}) {
+  return fetch(`/document?project=${projectId}&dataset=${dataset}&doc=${docId}`)
+    .then((response) => response.json())
+    .then((doc) => {
+      store.document = doc
+    })
+    .catch(() => {
+      store.document = {}
+    })
+}
+
 function getServerTimings(response) {
   const timings = {}
   const serverTiming = response.headers.get('Server-Timing')

package/dist/server/static/components/api-base.d.ts

@@ -1,6 +1,11 @@
 export class ApiBaseElement extends HTMLElement {
     api: {
         blueprint: () => void;
+        document: ({ projectId, dataset, docId }: {
+            projectId: any;
+            dataset: any;
+            docId: any;
+        }) => Promise<void>;
         invoke: (payloadText?: string) => void;
         projects: () => void;
         datasets: (selectedProject: any) => void;

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

@@ -1155,8 +1155,6 @@ payload-panel {
 
 toggle-switch {
   display: inline-block;
-  width: 2em;
-  height: 1em;
   cursor: pointer;
 }
 

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

@@ -9,8 +9,9 @@ const template = `
       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)">
-      <toggle-switch></toggle-switch>
-      <span class="slab-text" style="margin-left: var(--space-2);">Preserve Log</span>
+      <toggle-switch toggle-key="preserveLog">
+        <span class="slab-text" style="margin-left: var(--space-1);">Preserve Log</span>
+      </toggle-switch>
       <clear-button></clear-button>
     </div>
   </div>

package/dist/server/static/components/fetch-button.d.ts

@@ -0,0 +1,7 @@
+export class FetchButton extends ApiBaseElement {
+    connectedCallback(): void;
+    button: HTMLButtonElement | null | undefined;
+    disconnectedCallback(): void;
+    fetchDoc: () => Promise<void>;
+}
+import { ApiBaseElement } from './api-base.js';

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

@@ -0,0 +1,80 @@
+/* globals customElements document */
+import {ApiBaseElement} from './api-base.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+button {
+  height: 2.5rem;
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  border: 1px solid light-dark(var(--gray-200), var(--gray-800));
+  color: var(--text-color);
+}
+
+button:hover {
+  color: light-dark(var(--gray-950), var(--gray-200));
+  background-color: light-dark(var(--gray-50), var(--gray-900));
+}
+
+button svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+}
+
+</style>
+<button aria-label="Fetch Document" title="Fetch Document" type="button">
+  <svg width="800px" height="800px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 2)">
+      <path d="m4.5 1.5h-2.00245461c-1.1045695 0-2 .8954305-2 2v10c0 1.1045695.8954305 2 2 2h8.00000001c1.1043778-.000491 1.9997288-.8956223 2.0004909-2l.0019637-8-4-4"/>
+      <path d="m9.5 8.586-3 2.914-3-2.914"/>
+      <path d="m6.5.5v11"/>
+    </g>
+  </svg>
+</button>
+`
+
+export class FetchButton extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  connectedCallback() {
+    this.button = this.shadowRoot.querySelector('button')
+    this.addEventListener('click', this.fetchDoc)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.fetchDoc)
+  }
+
+  fetchDoc = async () => {
+    const docId = document.querySelector('#docid').value.trim()
+
+    if (docId) {
+      const originalContent = this.button.innerHTML
+      this.button.innerHTML = '<network-spinner></network-spinner>'
+
+      try {
+        await this.api.document({
+          projectId: this.api.store.selectedProject,
+          dataset: this.api.store.selectedDataset,
+          docId,
+        })
+      } catch (err) {
+        console.error('Error fetching document:', err)
+      } finally {
+        this.button.innerHTML = originalContent
+      }
+    }
+  }
+}
+
+customElements.define('fetch-button', FetchButton)

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

@@ -1,17 +1,48 @@
 class FiltersComponent extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-        <form style="gap: 8px;padding-left: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border-color);">
-          <projects-dropdown></projects-dropdown>    
-          <dataset-dropdown></dataset-dropdown>
+        <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);">
+            <legend class="config-label">Client Options</legend>
+            <select-dropdown
+              label="Project"
+              store-key="projects"
+              selected-key="selectedProject"
+              value-prop="id"
+              label-prop="displayName"
+              trigger-fetch
+            ></select-dropdown>
+            <select-dropdown
+              label="Dataset"
+              store-key="datasets"
+              selected-key="selectedDataset"
+              value-prop="name"
+              label-prop="name"
+              subscribe-to="selectedProject"
+            ></select-dropdown>
             <fieldset class="mar-t-sm">
-                <label class="config-label">
-                <span>API Version</span>
+                <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));">
+                </label>
+            </fieldset>
+
+            <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);">With Token</span>
+                <toggle-switch toggle-key="withToken" style="display: flex; height: 2.5rem;"></toggle-switch>
+            </fieldset>
 
-                <input name="apiVersion" id="apiversion" style="background: transparent; border-color: light-dark(var(--gray-200), var(--gray-700))">
+            <fieldset class="mar-t-sm" style="margin-top: 12px !important;">
+                <label class="slab-text">
+                  <span style="display: block; margin-bottom: var(--space-1);">
+                    <span style="display: flex; align-items: center;">Document ID <help-button></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));">
+                    <fetch-button></fetch-button>
+                  </div>
                 </label>
             </fieldset>
-            
 
           </form>
         `

package/dist/server/static/components/help-button.d.ts

@@ -0,0 +1,3 @@
+export class HelpButton extends ApiBaseElement {
+}
+import { ApiBaseElement } from './api-base.js';

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

@@ -0,0 +1,59 @@
+/* globals customElements document */
+import {ApiBaseElement} from './api-base.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+button {
+  anchor-name: --button;
+  background-color: transparent;
+  border-color: transparent;
+  display: flex;
+  align-items: center;
+}
+div[popover] {
+  position-anchor: --button;
+  max-width: 15rem;
+  left: anchor(left);
+  top: anchor(bottom);
+  display: block;
+  margin: 0;
+  opacity: 0;
+  transform: scale(0.95);
+  transform-origin: top left;
+  visibility: hidden;
+  transition:
+    opacity 500ms,
+    transform 500ms,
+    visibility 500ms;
+  border-width: var(--gutter-border-width);
+  border-color: light-dark(var(--gray-200), var(--gray-800));
+  border-radius: 0.375rem;
+}
+
+[popover]:popover-open {
+  transform: scale(1);
+  opacity: 1;
+  visibility: visible;
+}
+</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;">
+    <p>Fill out "Document ID" text field and then click the "Fetch Document" button to pre-populate the Document panel.</p>
+    <p>The Document panel is an editable text field so you can edit the fetched document or replace it with any JSON data you want.</p>
+    <p>When you click the "Run" button the contents of the Document panel will be evaluated against your filter/projection and sent to your function as the event part of the payload.</p>
+  <div>
+</div>
+`
+
+export class HelpButton extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+}
+
+customElements.define('help-button', HelpButton)

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

@@ -7,7 +7,7 @@ import {ApiBaseElement} from './api-base.js'
 const template = `<div class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l">
     <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;">
-      <h2 class="config-label mar-t-0 mar-b-0">Event</h2>
+      <h2 class="config-label mar-t-0 mar-b-0">Document</h2>
   </div>
     <hr class='hr-border' style='margin-left: 31px; ' />
     </div>
@@ -15,6 +15,18 @@ const template = `<div class="gutter-gradient relative h-100 max-h-100 y-scroll
 </div>
 `
 class PayloadPanel extends ApiBaseElement {
+  updatePayload = ({document}) => {
+    if (!document) return
+
+    const transaction = this.api.store.payload.state.update({
+      changes: {
+        from: 0,
+        insert: JSON.stringify(document, null, 2),
+        to: this.api.store.payload.state.doc.length,
+      },
+    })
+    this.api.store.payload.dispatch(transaction)
+  }
   connectedCallback() {
     this.innerHTML = template
     this.payload = this.querySelector('#payload')
@@ -24,6 +36,13 @@ class PayloadPanel extends ApiBaseElement {
       extensions: [basicSetup, json(), sanityCodeMirrorTheme],
       parent: this.payload,
     })
+
+    this.api.subscribe(this.updatePayload, ['document'])
+  }
+  disconnectedCallback() {
+    if (this.api) {
+      this.api.unsubscribe(this.updatePayload)
+    }
   }
 }
 

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

@@ -22,6 +22,7 @@ class RunPanel extends ApiBaseElement {
         apiVersion: this.apiVersion.value,
         dataset: this.api.store.selectedDataset,
         projectId: this.api.store.selectedProject,
+        token: this.api.store.withToken,
       },
     }
     this.api.invoke({context, event})

package/dist/server/static/components/select-dropdown.js

@@ -0,0 +1,118 @@
+/* globals customElements */
+import {ApiBaseElement} from './api-base.js'
+
+const dropdownTemplate = ({label}) => `
+<fieldset class="mar-t-sm">
+  <label class="slab-text">
+    <span style="display: block; margin-bottom: var(--space-1);">${label}</span>
+    <div data-ui="Select" style="position: relative; display: inline-block; width: 100%;">
+      <select
+        data-ui="Select"
+        style="
+          width: 100%;
+          appearance: none;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          background: transparent;
+          color: light-dark(var(--gray-950), var(--gray-300));
+          padding-right: 2rem;
+          border: 1px solid var(--gray-400);
+          border-radius: var(--radius-2);
+          height: var(--input-height, 2.5rem);
+        "
+      ></select>
+      <div
+        data-as="div"
+        data-ui="Box"
+        style="
+          position: absolute;
+          top: 50%;
+          right: 0.4rem;
+          transform: translateY(-50%);
+          pointer-events: none;
+          display: flex;
+          align-items: center;
+          height: 100%;
+        "
+      >
+        <svg
+          data-sanity-icon="chevron-down"
+          width="1.5rem"
+          height="1.5rem"
+          viewBox="0 0 25 25"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17 10L12.5 14.5L8 10"
+            stroke="currentColor"
+            stroke-width="1.2"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </label>
+</fieldset>
+`
+
+class SelectDropdown extends ApiBaseElement {
+  connectedCallback() {
+    this.label = this.getAttribute('label') || 'Select'
+    this.storeKey = this.getAttribute('store-key')
+    this.selectedKey = this.getAttribute('selected-key')
+    this.valueProp = this.getAttribute('value-prop') || 'id'
+    this.labelProp = this.getAttribute('label-prop') || 'displayName'
+    this.subscribeTo = this.getAttribute('subscribe-to')
+
+    this.innerHTML = dropdownTemplate({label: this.label})
+    this.select = this.querySelector('select')
+    this.select.addEventListener('change', this.handleSelect)
+
+    this.api.subscribe(this.renderOptions, [this.storeKey])
+
+    if (this.hasAttribute('trigger-fetch')) {
+      // e.g. this.api.projects()
+      this.api[this.storeKey]?.()
+    }
+
+    if (this.subscribeTo) {
+      this.api.subscribe(this.refreshOnChange, [this.subscribeTo])
+    }
+  }
+
+  disconnectedCallback() {
+    this.select.removeEventListener('change', this.handleSelect)
+    this.api.unsubscribe(this.renderOptions)
+    if (this.subscribeTo) {
+      this.api.unsubscribe(this.refreshOnChange)
+    }
+  }
+
+  handleSelect = (event) => {
+    this.api.store[this.selectedKey] = event.target.value
+  }
+
+  renderOptions = () => {
+    const items = this.api.store?.[this.storeKey] || []
+    const selectedVal = this.api.store?.[this.selectedKey]
+    if (items.length === 0) {
+      this.select.innerHTML = `<option>No ${this.label}s found</option>`
+      return
+    }
+    this.select.innerHTML = items
+      .map((item) => {
+        const val = item[this.valueProp]
+        const label = item[this.labelProp] ?? val
+        const selected = selectedVal === val ? 'selected' : ''
+        return `<option value="${val}" ${selected}>${label}</option>`
+      })
+      .join('')
+  }
+
+  refreshOnChange = () => {
+    this.api[this.storeKey]?.(this.api.store[this.subscribeTo])
+  }
+}
+
+customElements.define('select-dropdown', SelectDropdown)

package/dist/server/static/components/toggle-switch.d.ts

@@ -1,8 +1,9 @@
 export class ToggleSwitch extends ApiBaseElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
+    toggleKey: string | null | undefined;
     disconnectedCallback(): void;
-    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    attributeChangedCallback(name: any): void;
     set checked(value: boolean);
     get checked(): boolean;
     toggle: () => void;

package/dist/server/static/components/toggle-switch.js

@@ -4,38 +4,48 @@ import {ApiBaseElement} from './api-base.js'
 const template = document.createElement('template')
 template.innerHTML = `
   <style>
-    span {
-      box-sizing: border-box;
-      display: inline-block;
-      line-height: 1;
-    }
+  :host {
+    display: inline-block;
+  }
 
-    [part="track"] {
-      width: 100%;
-      height: 100%;
-      background-color: #dddddd;
-      text-align: left;
-    }
+  .switch-container {
+    display: flex;
+    align-items: center;
+  }
 
-    [part="slider"] {
-      width: 50%;
-      height: 100%;
-      background-color: #777777;
-      vertical-align: text-top;
-    }
+  [part="track"] {
+    width: 1.5rem;
+    height: 0.75rem;
+    background-color: #dddddd;
+    text-align: left;
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+  }
 
-    [part="track"], [part="slider"] {
-      transition: all 256ms;
-    }
+  [part="slider"] {
+    width: 50%;
+    height: 100%;
+    background-color: #777777;
+    transition: all 256ms;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 10px;
+  }
+
+  :host([checked]) [part="slider"] {
+    transform: translateX(100%);
+  }
+</style>
 
-    :host([checked]) [part="slider"] {
-      transform: translateX(100%);
-    }
-  </style>
 
-  <span part="track">
-    <span part="slider"></span>
-  </span>
+  <div class="switch-container">
+    <span part="track">
+      <span part="slider"></span>
+    </span>
+    <slot></slot>
+  </div>
 `
 
 export class ToggleSwitch extends ApiBaseElement {
@@ -51,6 +61,7 @@ export class ToggleSwitch extends ApiBaseElement {
   connectedCallback() {
     this.setAttribute('role', 'switch')
     this.setAttribute('tabindex', '0')
+    this.toggleKey = this.getAttribute('toggle-key')
     this.addEventListener('click', this.toggle)
   }
 
@@ -58,7 +69,7 @@ export class ToggleSwitch extends ApiBaseElement {
     this.removeEventListener('click', this.toggle)
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(name) {
     if (name === 'checked') {
       this.setAttribute('aria-checked', this.checked.toString())
     }
@@ -73,7 +84,7 @@ export class ToggleSwitch extends ApiBaseElement {
 
   toggle = () => {
     this.checked = !this.checked
-    this.api.store.preserveLog = this.checked
+    this.api.store[this.toggleKey] = this.checked
   }
 }
 

package/dist/server/static/index.html

@@ -46,8 +46,7 @@
 
 
         <script src="./components/filters.js" type="module"></script>
-        <script src="./components/dataset-dropdown.js" type="module"></script>
-        <script src="./components/projects-dropdown.js" type="module"></script>
+        <script src="./components/select-dropdown.js" type="module"></script>
         <script src="./components/function-list.js" type="module"></script>
         <script src="./components/network-spinner.js" type="module"></script>
         <script src="./components/payload-panel.js" type="module"></script>
@@ -57,6 +56,8 @@
         <script src="./components/run-panel.js" type="module"></script>
         <script src="./components/toggle-switch.js" type="module"></script>
         <script src="./components/clear-button.js" type="module"></script>
+        <script src="./components/help-button.js" type="module"></script>
+        <script src="./components/fetch-button.js" type="module"></script>
         <script src="./hot-reload.js" type="module"></script>
     </body>
 </html>

package/dist/utils/functions/fetch-document.d.ts

@@ -0,0 +1,2 @@
+import { type ClientConfig } from '@sanity/client';
+export declare function fetchDocument(documentId: string, { projectId, dataset, useCdn, apiVersion, apiHost, token }: ClientConfig): Promise<Record<string, unknown> | undefined>;

package/dist/utils/functions/fetch-document.js

@@ -0,0 +1,9 @@
+import { createClient } from '@sanity/client';
+import ora from 'ora';
+export async function fetchDocument(documentId, { projectId, dataset, useCdn = true, apiVersion = '2025-02-06', apiHost, token }) {
+    const spinner = ora(`Fetching document ID ${documentId}...`).start();
+    const client = createClient({ projectId, dataset, useCdn, apiVersion, apiHost, token });
+    const data = await client.fetch(`*[_id == "${documentId}"]`);
+    spinner.stop();
+    return data[0] ? data[0] : undefined;
+}

package/dist/utils/invoke-local.js

@@ -149,7 +149,6 @@ export default async function invoke(resource, data, context, options) {
                     clientOptions: {
                         ...context.clientOptions,
                         apiHost: config.apiUrl,
-                        token: config.token,
                     },
                 },
             };

package/dist/utils/types.d.ts

@@ -122,6 +122,7 @@ export interface InvokeContextOptions {
         apiVersion?: string;
         dataset?: string;
         projectId?: string;
+        token?: string;
     };
 }
 /** @internal */

package/oclif.manifest.json

@@ -696,6 +696,10 @@
         "data": {
           "char": "d",
           "description": "Data to send to the function",
+          "exclusive": [
+            "file",
+            "document-id"
+          ],
           "name": "data",
           "required": false,
           "hasDynamicHelp": false,
@@ -705,6 +709,10 @@
         "file": {
           "char": "f",
           "description": "Read data from file and send to the function",
+          "exclusive": [
+            "data",
+            "document-id"
+          ],
           "name": "file",
           "required": false,
           "hasDynamicHelp": false,
@@ -748,6 +756,28 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "type": "option"
+        },
+        "document-id": {
+          "aliases": [
+            "doc",
+            "documentId"
+          ],
+          "description": "Document to fetch and send to function",
+          "exclusive": [
+            "data",
+            "file"
+          ],
+          "name": "document-id",
+          "required": false,
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "with-user-token": {
+          "description": "Prime access token from CLI config",
+          "name": "with-user-token",
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -871,5 +901,5 @@
       ]
     }
   },
-  "version": "9.1.1"
+  "version": "9.2.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sanity/runtime-cli",
   "description": "Sanity's Runtime CLI for Blueprints and Functions",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "author": "Sanity Runtime Team",
   "type": "module",
   "license": "MIT",
@@ -79,6 +79,7 @@
     "@architect/inventory": "^4.0.9",
     "@oclif/core": "^4.3.0",
     "@oclif/plugin-help": "^6.2.28",
+    "@sanity/client": "^7.3.0",
     "adm-zip": "^0.5.16",
     "array-treeify": "^0.1.5",
     "cardinal": "^2.1.1",
@@ -106,7 +107,6 @@
     "@playwright/test": "^1.52.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@sanity/blueprints": "^0.1.0",
-    "@sanity/client": "^7.3.0",
     "@sanity/functions": "^1.0.3",
     "@types/adm-zip": "^0.5.7",
     "@types/cardinal": "^2.1.1",

package/dist/server/static/components/dataset-dropdown.js

@@ -1,47 +0,0 @@
-/* globals customElements */
-import {ApiBaseElement} from './api-base.js'
-
-const template = `<fieldset class="mar-t-sm">
-    <label class="config-label">
-        <span>Dataset</span>
-        <select id="datasetname" style="background: transparent; color: light-dark(var(--gray-950), var(--gray-300));">
-        </select>
-    </label>
-</fieldset>
-`
-
-class DatasetDropdown extends ApiBaseElement {
-  datasetSelected = (event) => {
-    this.api.store.selectedDataset = event.srcElement.value
-  }
-  renderDatasets = () => {
-    if (this.api.store?.datasets?.length > 0) {
-      this.select.innerHTML = this.api.store.datasets
-        .map((dataset) => {
-          const selected = this.api.store.selectedDataset === dataset.name ? 'selected' : ''
-          return `<option value="${dataset.name}" ${selected}>${dataset.name}</option>`
-        })
-        .join('')
-    } else {
-      this.select.innerHTML = '<option>No Datasets found</option>'
-    }
-  }
-  queryDatasets = () => {
-    this.api.datasets(this.api.store.selectedProject)
-  }
-
-  connectedCallback() {
-    this.innerHTML = template
-    this.select = this.querySelector('select')
-    this.select.addEventListener('change', this.datasetSelected)
-    this.api.subscribe(this.renderDatasets, ['datasets'])
-    this.api.subscribe(this.queryDatasets, ['selectedProject'])
-  }
-
-  disconnectedCallback() {
-    this.select.removeEventListener('change', this.datasetSelected)
-    this.api.unsubscribe(this.renderProjects)
-  }
-}
-
-customElements.define('dataset-dropdown', DatasetDropdown)

package/dist/server/static/components/projects-dropdown.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/server/static/components/projects-dropdown.js

@@ -1,44 +0,0 @@
-/* globals customElements */
-import {ApiBaseElement} from './api-base.js'
-
-const template = `<fieldset class="mar-t-sm">
-    <label class='config-label'>
-      <span>Project</span>
-        <select id="project" style="background: transparent; color: light-dark(var(--gray-950), var(--gray-300));">
-      </select>
-    </label>
-</fieldset>
-`
-
-class ProjectsDropdown extends ApiBaseElement {
-  projectSelected = (event) => {
-    this.api.store.selectedProject = event.srcElement.value
-  }
-  renderProjects = () => {
-    if (this.api.store.projects.length > 0) {
-      this.select.innerHTML = this.api.store.projects
-        .map((proj) => {
-          const selected = this.api.store.selectedProject === proj.id ? 'selected' : ''
-          return `<option value="${proj.id}" ${selected}>${proj.displayName}</option>`
-        })
-        .join('')
-    } else {
-      this.select.innerHTML = '<option>No Projects found</option>'
-    }
-  }
-
-  connectedCallback() {
-    this.innerHTML = template
-    this.select = this.querySelector('select')
-    this.select.addEventListener('change', this.projectSelected)
-    this.api.subscribe(this.renderProjects, ['projects'])
-    this.api.projects()
-  }
-
-  disconnectedCallback() {
-    this.select.removeEventListener('change', this.projectSelected)
-    this.api.unsubscribe(this.renderProjects)
-  }
-}
-
-customElements.define('projects-dropdown', ProjectsDropdown)