@sanity/runtime-cli 12.3.0 → 13.0.0

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

@@ -1,10 +1,12 @@
 /* globals customElements */
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-const dropdownTemplate = ({label}) => `
+const template = document.createElement('template')
+template.innerHTML = `
 <fieldset class="mar-t-2">
   <label class="slab-text">
-    <span class="block mar-b-1">${label}</span>
+    <span class="block mar-b-1"><slot name="label"></slot></span>
     <div data-ui="Select" class="relative inline-block w-100">
       <select
         data-ui="Select"
@@ -37,7 +39,31 @@ const dropdownTemplate = ({label}) => `
 `
 
 class SelectDropdown extends ApiBaseElement {
-  connectedCallback() {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+
+    // Create a component-specific stylesheet that will be applied after shared styles
+    const componentSheet = new CSSStyleSheet()
+    await componentSheet.replace(`
+      :host {
+        align-self: flex-end;
+      }
+      fieldset {
+        margin-top: 0 !important;
+      }
+      select {
+        background: transparent !important;
+        color: light-dark(var(--gray-950), var(--gray-300)) !important;
+      }
+    `)
+
+    this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
+
     this.label = this.getAttribute('label') || 'Select'
     this.storeKey = this.getAttribute('store-key')
     this.selectedKey = this.getAttribute('selected-key')
@@ -45,8 +71,11 @@ class SelectDropdown extends ApiBaseElement {
     this.labelProp = this.getAttribute('label-prop') || 'displayName'
     this.subscribeTo = this.getAttribute('subscribe-to')
 
-    this.innerHTML = dropdownTemplate({label: this.label})
-    this.select = this.querySelector('select')
+    // Set label text in slot
+    const labelSlot = this.shadowRoot.querySelector('slot[name="label"]')
+    labelSlot.textContent = this.label
+
+    this.select = this.shadowRoot.querySelector('select')
     this.select.addEventListener('change', this.handleSelect)
 
     this.api.subscribe(this.renderOptions, [this.storeKey])

package/dist/server/static/components/shared-styles.js

@@ -0,0 +1,31 @@
+/* globals fetch */
+
+let cachedStyleSheets = null
+
+export async function getSharedStyleSheets() {
+  if (cachedStyleSheets) {
+    return cachedStyleSheets
+  }
+
+  try {
+    // Fetch both stylesheets
+    const [mCssResponse, appCssResponse] = await Promise.all([
+      fetch('./vendor/m-.css'),
+      fetch('./components/app.css'),
+    ])
+
+    const [mCssText, appCssText] = await Promise.all([mCssResponse.text(), appCssResponse.text()])
+
+    // Create CSSStyleSheet objects
+    const mSheet = new CSSStyleSheet()
+    const appSheet = new CSSStyleSheet()
+
+    await Promise.all([mSheet.replace(mCssText), appSheet.replace(appCssText)])
+
+    cachedStyleSheets = [mSheet, appSheet]
+    return cachedStyleSheets
+  } catch (error) {
+    console.error('Failed to load shared stylesheets:', error)
+    return []
+  }
+}

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

@@ -6,6 +6,7 @@ template.innerHTML = `
   <style>
   :host {
     display: inline-block;
+    cursor: pointer;
   }
 
   .switch-container {
@@ -14,9 +15,11 @@ template.innerHTML = `
   }
 
   [part="track"] {
+    padding: 0.125em;
+    border-radius: 1em;
+    background-color: hsl(0, 0%, 67%);
     width: 1.5rem;
     height: 0.75rem;
-    background-color: #dddddd;
     text-align: left;
     border-radius: 10px;
     overflow: hidden;
@@ -24,9 +27,11 @@ template.innerHTML = `
   }
 
   [part="slider"] {
+    border-radius: 1em;
+    background-color: hsl(0, 0%, 100%);
+    box-shadow: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
     width: 50%;
     height: 100%;
-    background-color: #777777;
     transition: all 256ms;
     position: absolute;
     top: 0;
@@ -37,6 +42,10 @@ template.innerHTML = `
   :host([checked]) [part="slider"] {
     transform: translateX(100%);
   }
+
+  :host([checked])::part(track) {
+    background-color: var(--color-interactive-primary-active-bg);
+  }
 </style>
 
 

package/dist/utils/display/blueprints-formatting.d.ts

@@ -1,8 +1,8 @@
 import type { Blueprint, Resource } from '@sanity/blueprints-parser';
 import { type DeployedResource, type Stack } from '../types.js';
 export declare function formatTitle(title: string, name: string): string;
-export declare function formatDeployedResourceTree(resources: DeployedResource[] | undefined): string;
-export declare function formatResourceTree(resources: Resource[] | undefined): string;
+export declare function formatDeployedResourceTree(resources: DeployedResource[] | undefined, verbose?: boolean): string;
+export declare function formatResourceTree(resources: Resource[] | undefined, verbose?: boolean): string;
 export declare function formatStackInfo(stack: Stack | Blueprint, isCurrentStack?: boolean): string;
 export declare function formatStacksListing(stacks: Stack[], currentStackId?: string): string;
 export declare function stackDeployDiff(localBlueprint: Blueprint, deployedStack: Stack): string | null;

package/dist/utils/display/blueprints-formatting.js

@@ -47,28 +47,35 @@ const categoryByLabel = Object.values(RESOURCE_CATEGORIES).reduce((acc, curr) =>
     return acc;
 }, {});
 function resourceName(res, displayNameAttribute) {
+    const nameParts = [chalk.bold.green(res.name)];
     const displayName = displayNameAttribute &&
         displayNameAttribute in res &&
         typeof res[displayNameAttribute] === 'string' &&
         res[displayNameAttribute];
-    const name = displayName || res.name || 'unnamed';
-    return chalk.bold.green(name);
+    if (displayName && displayName !== res.name)
+        nameParts.push(chalk.green(`"${displayName}"`));
+    return nameParts.join(' ');
 }
-function deployedResourceName(res, displayNameAttribute) {
+function deployedResourceName(res, displayNameAttribute, _verbose = false) {
+    const nameParts = [chalk.bold.green(res.name)];
     const displayName = displayNameAttribute &&
         typeof res.parameters[displayNameAttribute] === 'string' &&
         res.parameters[displayNameAttribute];
-    const name = displayName || res.name || 'unnamed';
-    const ids = idList(res).join(' ');
-    return `${chalk.bold.green(name)} ${ids}`;
+    if (displayName && displayName !== res.name)
+        nameParts.push(chalk.green(`"${displayName}"`));
+    // if (verbose)
+    nameParts.push(idList(res));
+    return nameParts.join(' ');
 }
 function idList(res) {
-    return [
-        'id' in res && typeof res.id === 'string' && res.id ? `${niceId(res.id)}` : '',
-        'externalId' in res && typeof res.externalId === 'string' && res.externalId
-            ? `<${niceId(res.externalId)}>`
-            : '',
-    ];
+    const ids = [];
+    if ('id' in res && typeof res.id === 'string' && res.id) {
+        ids.push(niceId(res.id));
+    }
+    if ('externalId' in res && typeof res.externalId === 'string' && res.externalId) {
+        ids.push(`<${niceId(res.externalId)}>`);
+    }
+    return ids.length > 0 ? ids.join(' ') : '';
 }
 export function formatTitle(title, name) {
     return `${chalk.bold.blue(title)} ${chalk.bold(`"${name}"`)}`;
@@ -93,46 +100,44 @@ function categorizeResources(resources) {
     }
     return categorized;
 }
-function buildOutputTree(resources, name, mapToResource) {
+function buildOutputTree(resources, createName, mapToResource, verbose = false) {
     const output = [`${chalk.bold.underline('Resources')} [${resources.length}]`];
+    const children = [];
     const categorized = categorizeResources(resources);
     for (const category of Object.values(categoryByLabel)) {
         const catResources = categorized[category.label];
         if (catResources && catResources.length > 0) {
-            const catOutput = [`${chalk.bold(category.label)} [${catResources.length}]`];
+            children.push(`${chalk.bold(category.label)} [${catResources.length}]`);
             const details = [];
             for (const res of catResources) {
-                details.push(name(category, res));
+                details.push(createName(category, res, verbose));
                 if (category.formatDetails) {
                     details.push(category.formatDetails(mapToResource(res)));
                 }
             }
-            catOutput.push(details);
-            output.push(catOutput);
+            children.push(details);
         }
     }
     if (categorized['Other Resources'] && categorized['Other Resources'].length > 0) {
-        const otherOutput = [
-            `${chalk.bold('Other Resources')} [${categorized['Other Resources'].length}]`,
-        ];
+        children.push(`${chalk.bold('Other Resources')} [${categorized['Other Resources'].length}]`);
         const otherResourcesOutput = categorized['Other Resources'].map((other) => {
             return `${chalk.yellow(other.name ?? 'unnamed')} ${chalk.dim(other.type)}`;
         });
-        otherOutput.push(otherResourcesOutput);
-        output.push(otherOutput);
+        children.push(otherResourcesOutput);
     }
+    output.push(children);
     return output;
 }
-export function formatDeployedResourceTree(resources) {
+export function formatDeployedResourceTree(resources, verbose = false) {
     if (!resources || resources.length === 0)
         return '  Zero deployed resources';
-    const output = buildOutputTree(resources, (category, res) => deployedResourceName(res, category.displayNameAttribute), (res) => ({ name: res.name, type: res.type, ...res.parameters }));
+    const output = buildOutputTree(resources, (category, res, v) => deployedResourceName(res, category.displayNameAttribute, v), (res) => ({ name: res.name, type: res.type, ...res.parameters }), verbose);
     return `${treeify(output)}\n`;
 }
-export function formatResourceTree(resources) {
+export function formatResourceTree(resources, verbose = false) {
     if (!resources || resources.length === 0)
         return '  Zero resources';
-    const output = buildOutputTree(resources, (category, res) => resourceName(res, category.displayNameAttribute), (res) => res);
+    const output = buildOutputTree(resources, (category, res) => resourceName(res, category.displayNameAttribute), (res) => res, verbose);
     return `${treeify(output)}\n`;
 }
 export function formatStackInfo(stack, isCurrentStack = false) {

package/dist/utils/display/prompt.d.ts

@@ -1,3 +1,4 @@
+import type { Logger } from '../logger.js';
 export declare function promptForBlueprintType(): Promise<string>;
 /**
  * Prompt the user for a Project after selecting an Organization.
@@ -5,10 +6,11 @@ export declare function promptForBlueprintType(): Promise<string>;
  * @returns The selected project, with the projectId and displayName
  * @throws {Error} If the user does not have any projects or if the API call fails
  */
-export declare function promptForProject({ token, knownOrganizationId, knownProjectId, }: {
+export declare function promptForProject({ token, knownOrganizationId, knownProjectId, logger, }: {
     token: string;
     knownOrganizationId?: string;
     knownProjectId?: string;
+    logger: ReturnType<typeof Logger>;
 }): Promise<{
     projectId: string;
     displayName: string;
@@ -21,9 +23,10 @@ export declare function promptForProject({ token, knownOrganizationId, knownProj
  * @returns The selected Stack ID
  * @throws {Error} If the user does not have any Stacks or if the API call fails
  */
-export declare function promptForStack({ projectId, token, }: {
+export declare function promptForStack({ projectId, token, logger, }: {
     projectId: string;
     token: string;
+    logger: ReturnType<typeof Logger>;
 }): Promise<{
     stackId: string;
     name: string;

package/dist/utils/display/prompt.js

@@ -20,8 +20,8 @@ export async function promptForBlueprintType() {
  * @returns The selected project, with the projectId and displayName
  * @throws {Error} If the user does not have any projects or if the API call fails
  */
-export async function promptForProject({ token, knownOrganizationId, knownProjectId, }) {
-    const { ok, error, organizations } = await groupProjectsByOrganization({ token });
+export async function promptForProject({ token, knownOrganizationId, knownProjectId, logger, }) {
+    const { ok, error, organizations } = await groupProjectsByOrganization({ token, logger });
     if (!ok) {
         throw new Error(error ?? 'Unknown error listing projects');
     }
@@ -78,8 +78,8 @@ export async function promptForProject({ token, knownOrganizationId, knownProjec
  * @returns The selected Stack ID
  * @throws {Error} If the user does not have any Stacks or if the API call fails
  */
-export async function promptForStack({ projectId, token, }) {
-    const { ok: stacksOk, error: stacksErr, stacks, } = await listStacks({ token, scopeType: 'project', scopeId: projectId });
+export async function promptForStack({ projectId, token, logger, }) {
+    const { ok: stacksOk, error: stacksErr, stacks, } = await listStacks({ token, scopeType: 'project', scopeId: projectId }, logger);
     if (!stacksOk) {
         throw new Error(stacksErr || 'Failed to list Stacks');
     }
@@ -110,6 +110,7 @@ export async function promptForStack({ projectId, token, }) {
             scopeType: 'project',
             scopeId: projectId,
             name: stackName,
+            logger,
         });
         return { stackId: stack.id, name: stackName };
     }

package/dist/utils/find-function.d.ts

@@ -1,4 +1,8 @@
 import type { Blueprint } from '@sanity/blueprints-parser';
 import type { DeployedResource, FunctionResource, Stack } from './types.js';
+export declare function getFunctionNames(resources: Array<{
+    type?: string;
+    name?: string;
+}> | undefined): string[];
 export declare function findFunctionInBlueprint(blueprint: Blueprint, name: string): FunctionResource;
 export declare function findFunctionInStack(stack: Stack, name: string): DeployedResource;

package/dist/utils/find-function.js

@@ -1,3 +1,9 @@
+export function getFunctionNames(resources) {
+    return (resources
+        ?.filter((r) => r?.type?.startsWith('sanity.function.'))
+        .map((r) => r.name)
+        .filter((name) => typeof name === 'string') ?? []);
+}
 export function findFunctionInBlueprint(blueprint, name) {
     const func = blueprint?.resources?.find((r) => r?.type?.startsWith('sanity.function.') && r.name === name);
     if (!func)

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

@@ -1,4 +1,5 @@
 import { type ClientConfig } from '@sanity/client';
+import type { Logger } from '../logger.js';
 import type { FetchConfig } from '../types.js';
-export declare function fetchDocument(documentId: string, { projectId, dataset, useCdn, apiVersion, apiHost, token }: ClientConfig): Promise<Record<string, unknown>>;
-export declare function fetchAsset(documentId: string, { mediaLibraryId, apiVersion, apiHost, token }: FetchConfig): Promise<Record<string, unknown>>;
+export declare function fetchDocument(documentId: string, { projectId, dataset, useCdn, apiVersion, apiHost, token }: ClientConfig, logger: ReturnType<typeof Logger>): Promise<Record<string, unknown>>;
+export declare function fetchAsset(documentId: string, { mediaLibraryId, apiVersion, apiHost, token }: FetchConfig, logger: ReturnType<typeof Logger>): Promise<Record<string, unknown>>;

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

@@ -1,7 +1,7 @@
 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();
+import { createTracedFetch } from '../traced-fetch.js';
+export async function fetchDocument(documentId, { projectId, dataset, useCdn = true, apiVersion = '2025-02-06', apiHost, token }, logger) {
+    const spinner = logger.ora(`Fetching document ID ${documentId}...`).start();
     const client = createClient({ projectId, dataset, useCdn, apiVersion, apiHost, token });
     const data = await client.fetch(`*[_id == "${documentId}"]`);
     spinner.stop();
@@ -10,10 +10,11 @@ export async function fetchDocument(documentId, { projectId, dataset, useCdn = t
     }
     return data[0];
 }
-export async function fetchAsset(documentId, { mediaLibraryId, apiVersion = '2025-03-24', apiHost, token }) {
-    const spinner = ora(`Fetching document ID ${documentId}...`).start();
+export async function fetchAsset(documentId, { mediaLibraryId, apiVersion = '2025-03-24', apiHost, token }, logger) {
+    const spinner = logger.ora(`Fetching document ID ${documentId}...`).start();
+    const fetchFn = createTracedFetch(logger);
     const url = `${apiHost}/v${apiVersion}/media-libraries/${mediaLibraryId}/doc/${documentId}`;
-    const response = await fetch(url, {
+    const response = await fetchFn(url, {
         headers: {
             Authorization: `Bearer ${token}`,
         },

package/dist/utils/index.d.ts

@@ -1,6 +1,8 @@
 export * as display from './display/index.js';
 export * as findFunction from './find-function.js';
 export * as invokeLocal from './invoke-local.js';
+export * as logger from './logger.js';
+export * as tracedFetch from './traced-fetch.js';
 export * as types from './types.js';
 export * as validate from './validate/index.js';
 export * as validatedToken from './validated-token.js';

package/dist/utils/index.js

@@ -1,6 +1,8 @@
 export * as display from './display/index.js';
 export * as findFunction from './find-function.js';
 export * as invokeLocal from './invoke-local.js';
+export * as logger from './logger.js';
+export * as tracedFetch from './traced-fetch.js';
 export * as types from './types.js';
 export * as validate from './validate/index.js';
 export * as validatedToken from './validated-token.js';

package/dist/utils/logger.d.ts

@@ -0,0 +1,13 @@
+import ora from 'ora';
+export declare function Logger(log: (msg: string) => void, flags?: {
+    verbose?: boolean;
+    trace?: boolean;
+}): {
+    (msg: string): void;
+    trace(formatter: unknown, ...args: unknown[]): false | void;
+    verbose(formatter: unknown, ...args: unknown[]): false | void;
+    info(formatter: unknown, ...args: unknown[]): false | void;
+    warn(formatter: unknown, ...args: unknown[]): false | void;
+    error(formatter: unknown, ...args: unknown[]): false | void;
+    ora: typeof ora;
+};

package/dist/utils/logger.js

@@ -0,0 +1,61 @@
+import { format } from 'node:util';
+import ora from 'ora';
+var LogLevel;
+(function (LogLevel) {
+    LogLevel[LogLevel["TRACE"] = 0] = "TRACE";
+    LogLevel[LogLevel["VERBOSE"] = 1] = "VERBOSE";
+    LogLevel[LogLevel["INFO"] = 2] = "INFO";
+    LogLevel[LogLevel["WARN"] = 3] = "WARN";
+    LogLevel[LogLevel["ERROR"] = 4] = "ERROR";
+})(LogLevel || (LogLevel = {}));
+export function Logger(log, flags = {}) {
+    const logger = (msg) => {
+        log(msg);
+    };
+    const level = flags.verbose ? LogLevel.VERBOSE : flags.trace ? LogLevel.TRACE : LogLevel.INFO;
+    logger.trace = (formatter, ...args) => level <= LogLevel.TRACE && logger(format(formatter, ...args));
+    logger.verbose = (formatter, ...args) => level <= LogLevel.VERBOSE && logger(format(formatter, ...args));
+    logger.info = (formatter, ...args) => level <= LogLevel.INFO && logger(format(formatter, ...args));
+    logger.warn = (formatter, ...args) => level <= LogLevel.WARN && logger(format(formatter, ...args));
+    logger.error = (formatter, ...args) => level <= LogLevel.ERROR && logger(format(formatter, ...args));
+    const oraWrapper = (opts) => {
+        if (level >= LogLevel.INFO)
+            return ora(opts);
+        return createOraLineLoggingWrapper(opts, logger);
+    };
+    logger.ora = oraWrapper;
+    return logger;
+}
+/**
+ * An ora-like wrapper that uses standard line output logging instead of rendering a spinner; used in verbose and trace modes.
+ */
+function createOraLineLoggingWrapper(opts, logger) {
+    const text = typeof opts === 'string' ? opts : (typeof opts === 'object' ? opts.text : '') || '';
+    const wrapper = {
+        clear() {
+            logger('');
+            return wrapper;
+        },
+        fail(subtext) {
+            logger.error(subtext);
+            return wrapper;
+        },
+        info(subtext) {
+            logger(subtext || wrapper.text);
+            return wrapper;
+        },
+        start(subtext) {
+            logger(subtext || wrapper.text);
+            return wrapper;
+        },
+        stop() {
+            return wrapper;
+        },
+        succeed(subtext) {
+            logger(subtext || wrapper.text);
+            return wrapper;
+        },
+        text,
+    };
+    return wrapper;
+}

package/dist/utils/other/github.d.ts

@@ -1,2 +1,3 @@
+import type { Logger } from '../logger.js';
 export declare const GITHUB_API_URL = "https://api.github.com";
-export declare function gitHubRequest(path: string): Promise<Response>;
+export declare function gitHubRequest(path: string, logger: ReturnType<typeof Logger>): Promise<Response>;

package/dist/utils/other/github.js

@@ -1,8 +1,10 @@
 // ! Making requests to the GitHub API will be rate limited at 60 requests per hour per IP address
 // https://docs.github.com/en/rest/using-the-rest-api/rate-limits-for-the-rest-api?apiVersion=2022-11-28#primary-rate-limit-for-unauthenticated-users
+import { createTracedFetch } from '../traced-fetch.js';
 export const GITHUB_API_URL = 'https://api.github.com';
-export async function gitHubRequest(path) {
-    const response = await fetch(`${GITHUB_API_URL}${path}`, {
+export async function gitHubRequest(path, logger) {
+    const fetchFn = createTracedFetch(logger);
+    const response = await fetchFn(`${GITHUB_API_URL}${path}`, {
         headers: { Accept: 'application/vnd.github.v3+json' },
     });
     if (response.ok) {

package/dist/utils/other/npmjs.d.ts

@@ -1 +1,2 @@
-export declare function getLatestNpmVersion(pkg: string): Promise<string>;
+import type { Logger } from '../logger.js';
+export declare function getLatestNpmVersion(pkg: string, logger: ReturnType<typeof Logger>): Promise<string>;

package/dist/utils/other/npmjs.js

@@ -1,7 +1,9 @@
-export async function getLatestNpmVersion(pkg) {
+import { createTracedFetch } from '../traced-fetch.js';
+export async function getLatestNpmVersion(pkg, logger) {
+    const fetchFn = createTracedFetch(logger);
     const url = `https://registry.npmjs.org/${pkg}/latest`;
     try {
-        const res = await fetch(url);
+        const res = await fetchFn(url);
         if (!res.ok)
             throw new Error(`Failed to fetch version for ${pkg}`);
         const data = await res.json();

package/dist/utils/traced-fetch.d.ts

@@ -0,0 +1,35 @@
+import type { Logger } from './logger.js';
+/**
+ * Configuration options for traced fetch
+ */
+export interface TracedFetchOptions {
+    /** Whether to log request headers. Default: true */
+    logRequestHeaders?: boolean;
+    /** Whether to log response headers. Default: true */
+    logResponseHeaders?: boolean;
+    /** Whether to log request body. Default: true */
+    logRequestBody?: boolean;
+    /** Whether to log response body. Default: true */
+    logResponseBody?: boolean;
+    /** Maximum length for body preview. Default: 500 */
+    maxBodyLength?: number;
+    /** Headers to redact (case-insensitive). Default: ['authorization', 'cookie', 'set-cookie', 'x-api-key', 'x-auth-token', 'proxy-authorization'] */
+    redactedHeaders?: string[];
+}
+/**
+ * Creates a traced fetch function with HTTP request/response introspection.
+ * Logs HTTP details to the provided logger when set to TRACE log level.
+ * Includes request timing, headers, and optional body previews.
+ * Headers containing sensitive data are redacted by default.
+ * @param logger - Logger instance from Logger() factory
+ * @param options - Configuration options for logging behavior
+ * @returns A fetch-compatible function with tracing capabilities
+ *
+ * @example
+ * ```typescript
+ * const logger = Logger(console.log, {trace: true})
+ * const tracedFetch = createTracedFetch(logger)
+ * const response = await tracedFetch('https://api.example.com/data')
+ * ```
+ */
+export declare function createTracedFetch(logger: ReturnType<typeof Logger>, options?: TracedFetchOptions): typeof fetch;