@sanity/runtime-cli 12.3.0 → 12.4.0

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

@@ -11,8 +11,28 @@ import {
 } from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-const template = `<div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+:host {
+  grid-area: response;
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+
+@media (max-width: 40rem) {
+  :host {
+    max-height: none;
+    min-height: 200px;
+    overflow: auto;
+  }
+}
+</style>
+<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 class="y-scroll min-h-0">
             <div class="pad-b-12">
@@ -32,7 +52,12 @@ const template = `<div class="border-left border-top border-top-none-l h-100 gut
       </div>
 </div>
 `
+
 class ResponsePanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   updateResponse = ({result}) => {
     if (!result) return
 
@@ -72,11 +97,13 @@ class ResponsePanel extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.response = this.querySelector('#response')
-    this.size = this.querySelector('#size')
-    this.time = this.querySelector('#time')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.response = this.shadowRoot.querySelector('#response')
+    this.size = this.shadowRoot.querySelector('#size')
+    this.time = this.shadowRoot.querySelector('#time')
     if (this.api) {
       this.api.subscribe(this.updateResponse, ['result'])
       if (this.api.store.result) {

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

@@ -4,8 +4,10 @@
 import {basicSetup, EditorState, EditorView, json} from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-const template = `<div class="border-left y-scroll min-h-0">
+const template = document.createElement('template')
+template.innerHTML = `<div class="border-left y-scroll min-h-0">
   <div>
     <h3 class="config-label mar-t-0 hidden">Filter/Projection</h3>
     <header class='flex space-between'>
@@ -17,7 +19,12 @@ const template = `<div class="border-left y-scroll min-h-0">
   </div>
 </div>
 `
+
 class RulePanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   updateRule = () => {
     const {functions, rule, selectedIndex} = this.api.store
     const func = functions.find((func) => func.name === selectedIndex)
@@ -34,9 +41,11 @@ class RulePanel extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.rule = this.querySelector('#rule')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.rule = this.shadowRoot.querySelector('#rule')
 
     if (this.api) {
       this.api.subscribe(this.updateRule, ['selectedIndex', 'functions'])

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

@@ -1,10 +1,12 @@
 /* globals customElements document */
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.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 class="pad-3">
+const template = document.createElement('template')
+template.innerHTML = `<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}
@@ -12,7 +14,12 @@ const template = `<div class="pad-3">
     </button>
 </div>
 `
+
 class RunPanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   invoke = () => {
     const selectedEvent = this.api.store.selectedEvent
     const docFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT
@@ -41,7 +48,7 @@ class RunPanel extends ApiBaseElement {
     }
     const context = {
       clientOptions: {
-        apiVersion: document.querySelector('#apiversion').value,
+        apiVersion: this.api.store.apiVersion,
         dataset: this.api.store.selectedDataset,
         projectId: this.api.store.selectedProject,
         token: this.api.store.withToken,
@@ -86,11 +93,11 @@ class RunPanel extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.datasetname = document.querySelector('#datasetname')
-    this.productId = document.querySelector('#project')
-    this.button = this.querySelector('button')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.button = this.shadowRoot.querySelector('button')
     this.buttonText = this.button.querySelector('span')
     this.button.addEventListener('click', this.invoke)
     document.addEventListener('keydown', this.onKeyDown)

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/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)