@sanity/runtime-cli 12.3.0 → 13.0.0

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

@@ -2,17 +2,11 @@ export type { FunctionAddOptions } from './add.js';
 export { functionAddCore } from './add.js';
 export type { FunctionDevOptions } from './dev.js';
 export { functionDevCore } from './dev.js';
-export type { FunctionEnvAddOptions, 
-/** @deprecated Use `FunctionEnvAddOptions` instead. */
-FunctionEnvAddOptions as EnvAddOptions, } from './env/add.js';
+export type { FunctionEnvAddOptions } from './env/add.js';
 export { functionEnvAddCore } from './env/add.js';
-export type { FunctionEnvListOptions, 
-/** @deprecated Use `FunctionEnvListOptions` instead. */
-FunctionEnvListOptions as EnvListOptions, } from './env/list.js';
+export type { FunctionEnvListOptions } from './env/list.js';
 export { functionEnvListCore } from './env/list.js';
-export type { FunctionEnvRemoveOptions, 
-/** @deprecated Use `FunctionEnvRemoveOptions` instead. */
-FunctionEnvRemoveOptions as EnvRemoveOptions, } from './env/remove.js';
+export type { FunctionEnvRemoveOptions } from './env/remove.js';
 export { functionEnvRemoveCore } from './env/remove.js';
 export type { FunctionLogsOptions } from './logs.js';
 export { functionLogsCore } from './logs.js';

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

@@ -1,7 +1,7 @@
 import type { CoreResult, DeployedBlueprintConfig } from '../index.js';
 export interface FunctionLogsOptions extends DeployedBlueprintConfig {
     args: {
-        name: string;
+        name: string | undefined;
     };
     flags: {
         limit: number;
@@ -11,5 +11,7 @@ export interface FunctionLogsOptions extends DeployedBlueprintConfig {
         force?: boolean;
         watch?: boolean;
     };
+    error: (message: string, options: object) => void;
+    helpText: string;
 }
 export declare function functionLogsCore(options: FunctionLogsOptions): Promise<CoreResult>;

package/dist/cores/functions/logs.js

@@ -1,14 +1,22 @@
 import { confirm } from '@inquirer/prompts';
 import chalk from 'chalk';
-import ora from 'ora';
 import { deleteLogs as deleteLogsAction, logs as getLogsAction, streamLogs as streamLogsAction, } from '../../actions/functions/logs.js';
 import { formatTitle } from '../../utils/display/blueprints-formatting.js';
 import { niceId } from '../../utils/display/presenters.js';
-import { findFunctionInStack } from '../../utils/find-function.js';
+import { findFunctionInStack, getFunctionNames } from '../../utils/find-function.js';
 export async function functionLogsCore(options) {
-    const { args, flags, log, auth, deployedStack } = options;
+    const { args, flags, log, error, auth, deployedStack, blueprint, helpText } = options;
     const { name } = args;
     const { delete: shouldDelete, watch: shouldWatch, force, limit, json, utc } = flags;
+    if (!name) {
+        const functionNames = getFunctionNames(blueprint.parsedBlueprint.resources);
+        const validNames = functionNames.length > 0
+            ? `Valid names are: ${functionNames.join(', ')}`
+            : 'No functions are defined in the blueprint.';
+        error(`Missing required argument: name\n${validNames}\n`, { exit: false });
+        log(helpText);
+        return { success: true };
+    }
     const { externalId } = findFunctionInStack(deployedStack, name); // throws if not found
     if (shouldDelete)
         return deleteLogs({ name, externalId, auth, force, log });
@@ -16,7 +24,7 @@ export async function functionLogsCore(options) {
         return streamLogs({ name, externalId, auth, json, utc, log });
     return getLogs({ name, externalId, auth, limit, json, utc, log });
 }
-async function deleteLogs({ name, externalId, auth, force, }) {
+async function deleteLogs({ name, externalId, auth, force, log, }) {
     if (!force) {
         const certain = await confirm({
             message: `Are you sure you want to delete ${chalk.bold('all')} logs for function ${chalk.yellow(name)}?`,
@@ -25,8 +33,8 @@ async function deleteLogs({ name, externalId, auth, force, }) {
         if (!certain)
             return { success: true };
     }
-    const spinner = ora(`Deleting logs for function ${chalk.yellow(name)}`).start();
-    const { ok, error } = await deleteLogsAction(externalId, auth);
+    const spinner = log.ora(`Deleting logs for function ${chalk.yellow(name)}`).start();
+    const { ok, error } = await deleteLogsAction(externalId, auth, log);
     if (!ok) {
         spinner.fail(`${chalk.red('Failed')} to delete logs`);
         return { success: false, error: error || 'Unknown error' };
@@ -35,7 +43,7 @@ async function deleteLogs({ name, externalId, auth, force, }) {
     return { success: true };
 }
 async function streamLogs({ name, externalId, auth, log, }) {
-    const spinner = ora(`Setting up streaming logs session for function ${niceId(name)}`).start();
+    const spinner = log.ora(`Setting up streaming logs session for function ${niceId(name)}`).start();
     try {
         spinner.stop();
         log(`Streaming log session for function ${niceId(name)}`);
@@ -50,7 +58,7 @@ async function streamLogs({ name, externalId, auth, log, }) {
             const { time, level, message } = logEntry;
             log(formatLog(time, level, message, true));
         };
-        streamLogsAction(externalId, auth, renderLog, onOpen, (error) => log(`${chalk.red('Error:')} ${error}`));
+        streamLogsAction(externalId, auth, renderLog, onOpen, (error) => log.error(`${chalk.red('Error:')} ${error}`), log);
         // Return a special key for streaming mode
         return {
             success: true,
@@ -60,13 +68,13 @@ async function streamLogs({ name, externalId, auth, log, }) {
     catch (err) {
         spinner.fail('Failed to retrieve logs');
         const errorMessage = err instanceof Error ? err.message : String(err);
-        log(`Error: ${errorMessage}`);
+        log.error(`Error: ${errorMessage}`);
         return { success: false, error: errorMessage };
     }
 }
 async function getLogs({ name, externalId, auth, limit, json, utc, log, }) {
-    const spinner = ora(`Finding logs for function "${name}"`).start();
-    const { ok, error, logs, total } = await getLogsAction(externalId, { limit }, auth);
+    const spinner = log.ora(`Finding logs for function "${name}"`).start();
+    const { ok, error, logs, total } = await getLogsAction(externalId, { limit }, auth, log);
     if (!ok) {
         spinner.fail(`${chalk.red('Failed')} to retrieve logs`);
         return { success: false, error: error || 'Unknown error' };

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

@@ -3,7 +3,7 @@ import type { CoreConfig, CoreResult } from '../index.js';
 export interface FunctionTestOptions extends CoreConfig {
     blueprint: ReadBlueprintResult;
     args: {
-        name: string;
+        name: string | undefined;
     };
     flags: {
         data?: string;
@@ -24,5 +24,7 @@ export interface FunctionTestOptions extends CoreConfig {
         'document-id-after'?: string;
         'media-library-id'?: string;
     };
+    error: (message: string, options: object) => void;
+    helpText: string;
 }
 export declare function functionTestCore(options: FunctionTestOptions): Promise<CoreResult>;

package/dist/cores/functions/test.js

@@ -1,21 +1,29 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { cwd } from 'node:process';
-import ora from 'ora';
 import { testAction } from '../../actions/functions/test.js';
 import config from '../../config.js';
 import { SANITY_FUNCTION_DOCUMENT, SANITY_FUNCTION_MEDIA_LIBRARY_ASSET } from '../../constants.js';
 import buildPayload from '../../utils/build-payload.js';
-import { findFunctionInBlueprint } from '../../utils/find-function.js';
+import { findFunctionInBlueprint, getFunctionNames } from '../../utils/find-function.js';
 import { fetchAsset, fetchDocument } from '../../utils/functions/fetch-document.js';
 import { parseJsonObject } from '../../utils/parse-json-object.js';
 import { isEventType, isGroqContextOptions, } from '../../utils/types.js';
 export async function functionTestCore(options) {
-    const { blueprint, log, args, flags } = options;
+    const { blueprint, log, error, args, flags, helpText } = options;
     const { name: fnName } = args;
     const { data, event, file, timeout, api, dataset, 'document-id': documentId, 'with-user-token': withUserToken, 'data-before': dataBefore, 'data-after': dataAfter, 'file-before': fileBefore, 'file-after': fileAfter, 'document-id-before': documentIdBefore, 'document-id-after': documentIdAfter, 'media-library-id': mediaLibraryId, } = flags;
     const { parsedBlueprint } = blueprint;
     const { 'project-id': projectId = blueprint?.projectId, 'organization-id': organizationId = blueprint?.organizationId, } = flags;
+    if (!fnName) {
+        const functionNames = getFunctionNames(blueprint.parsedBlueprint.resources);
+        const validNames = functionNames.length > 0
+            ? `Valid names are: ${functionNames.join(', ')}`
+            : 'No functions are defined in the blueprint.';
+        error(`Missing required argument: name\n${validNames}\n`, { exit: false });
+        log(helpText);
+        return { success: true };
+    }
     let eventType;
     if (!event) {
         eventType = 'create';
@@ -70,14 +78,14 @@ export async function functionTestCore(options) {
                 apiVersion: api,
                 apiHost: config.apiUrl,
                 token: config.token || undefined,
-            });
+            }, log);
             after = await fetchDocument(documentIdAfter, {
                 projectId,
                 dataset,
                 apiVersion: api,
                 apiHost: config.apiUrl,
                 token: config.token || undefined,
-            });
+            }, log);
         }
         else if (documentIdBefore && documentIdAfter) {
             before = await fetchAsset(documentIdBefore, {
@@ -85,13 +93,13 @@ export async function functionTestCore(options) {
                 apiVersion: api,
                 apiHost: config.apiUrl,
                 token: config.token || undefined,
-            });
+            }, log);
             after = await fetchAsset(documentIdAfter, {
                 mediaLibraryId,
                 apiVersion: api,
                 apiHost: config.apiUrl,
                 token: config.token || undefined,
-            });
+            }, log);
         }
         let payload;
         if (after) {
@@ -105,7 +113,7 @@ export async function functionTestCore(options) {
                     apiVersion: api,
                     apiHost: config.apiUrl,
                     token: config.token || undefined,
-                });
+                }, log);
             }
             else if (documentId) {
                 payload = await fetchAsset(documentId, {
@@ -113,7 +121,7 @@ export async function functionTestCore(options) {
                     apiVersion: api,
                     apiHost: config.apiUrl,
                     token: config.token || undefined,
-                });
+                }, log);
             }
             else {
                 payload = buildPayload({ data, file });
@@ -129,7 +137,7 @@ export async function functionTestCore(options) {
             : {
                 event: 'schedule',
             };
-        const spinner = ora('Executing function...').start();
+        const spinner = log.ora('Executing function...').start();
         const { json, logs, error } = await testAction(resource, invokeOptions, contextOptions, {
             timeout: timeout ? timeout : resource.timeout,
         });

package/dist/cores/index.d.ts

@@ -1,4 +1,5 @@
 import { type ReadBlueprintResult } from '../actions/blueprints/blueprint.js';
+import type { Logger } from '../utils/logger.js';
 import type { AuthParams, Result, ScopeType, Stack } from '../utils/types.js';
 export * as blueprintsCores from './blueprints/index.js';
 export * as functionsCores from './functions/index.js';
@@ -6,7 +7,7 @@ export interface CoreConfig {
     /** The CLI binary name. */
     bin: string;
     /** The log output function. */
-    log: (message: string) => void;
+    log: ReturnType<typeof Logger>;
 }
 export interface BlueprintConfig extends CoreConfig {
     token: string;
@@ -35,17 +36,13 @@ export type CoreResult = {
     streaming?: Promise<void>;
     error?: never;
 });
-type InitBlueprintConfigParams = {
-    bin: string;
-    log: (msg: string) => void;
+type InitBlueprintConfigParams = CoreConfig & ({
     validateToken: true;
     token: string;
 } | {
-    bin: string;
-    log: (msg: string) => void;
     validateToken?: false;
     token?: string;
-};
+});
 export declare function initBlueprintConfig({ bin, log, token, validateToken, }: InitBlueprintConfigParams): Promise<Result<BlueprintConfig>>;
 export declare function initDeployedBlueprintConfig(config: Partial<BlueprintConfig> & Pick<BlueprintConfig, 'bin' | 'log' | 'token'> & {
     validateToken?: boolean;

package/dist/cores/index.js

@@ -8,7 +8,7 @@ export * as functionsCores from './functions/index.js';
 export async function initBlueprintConfig({ bin, log, token, validateToken = true, }) {
     let checkedToken = token;
     if (!token || (token && validateToken)) {
-        const tokenCheck = await validTokenOrErrorMessage(token);
+        const tokenCheck = await validTokenOrErrorMessage(log, token);
         if (!tokenCheck.ok) {
             return { ok: false, error: tokenCheck.error.message };
         }
@@ -17,7 +17,7 @@ export async function initBlueprintConfig({ bin, log, token, validateToken = tru
     if (!checkedToken) {
         return { ok: false, error: 'A valid token is required but was not provided.' };
     }
-    const blueprint = await readLocalBlueprint();
+    const blueprint = await readLocalBlueprint(log);
     if (blueprint.errors.length > 0) {
         log(presentBlueprintParserErrors(blueprint.errors));
         return { ok: false, error: 'Blueprint file contains errors.' };
@@ -49,7 +49,7 @@ export async function initDeployedBlueprintConfig(config) {
             return { ok: false, error: 'Missing Stack deployment configuration for Blueprint' };
     }
     const auth = { token: config.token, scopeType, scopeId };
-    const stackResponse = await getStack({ stackId, auth });
+    const stackResponse = await getStack({ stackId, auth, logger: config.log });
     if (!stackResponse.ok) {
         config.log(`Could not retrieve Stack deployment info for ${niceId(stackId)}.`);
         config.log(`Run \`${config.bin} blueprints doctor\` for diagnostics.`);

package/dist/index.d.ts

@@ -1,2 +1 @@
-import { run } from '@oclif/core';
-export { run };
+export { run } from '@oclif/core';

package/dist/index.js

@@ -1,2 +1 @@
-import { run } from '@oclif/core';
-export { run };
+export { run } from '@oclif/core';

package/dist/server/app.d.ts

@@ -1,5 +1,6 @@
+import type { Logger } from '../utils/logger.js';
 import { type InvokeExecutionOptions } from '../utils/types.js';
-declare const app: (host: string, port: number, executionOptions?: Partial<InvokeExecutionOptions>) => void;
+declare const app: (host: string, port: number, logger: ReturnType<typeof Logger>, executionOptions?: Partial<InvokeExecutionOptions>) => void;
 declare function parseDocumentUrl(url: string): {
     projectId: string;
     dataset: string;

package/dist/server/app.js

@@ -7,13 +7,13 @@ import config from '../config.js';
 import { isRecord } from '../utils/is-record.js';
 import { isEventType, isGroqContextOptions, } from '../utils/types.js';
 import { handleInvokeRequest } from './handlers/invoke.js';
-const app = (host, port, executionOptions) => {
+const app = (host, port, logger, executionOptions) => {
     const requestListener = async (req, res) => {
         res.setHeader('Content-Type', 'application/json');
         switch (true) {
             case req.url === '/blueprint': {
                 try {
-                    const { parsedBlueprint, projectId, organizationId } = await readLocalBlueprint();
+                    const { parsedBlueprint, projectId, organizationId } = await readLocalBlueprint(logger);
                     res.setHeader('Content-Type', 'application/json');
                     res.writeHead(200);
                     res.end(JSON.stringify({ parsedBlueprint, projectId, organizationId })); // Use blueprint directly
@@ -42,7 +42,7 @@ const app = (host, port, executionOptions) => {
                                     delete context.clientOptions.token;
                                 }
                             }
-                            const result = await handleInvokeRequest(functionName, event, metadata, context, executionOptions);
+                            const result = await handleInvokeRequest(functionName, event, metadata, context, logger, executionOptions);
                             // Add Server-Timing header
                             const timingHeaders = [];
                             for (const [key, value] of Object.entries(result.timings)) {
@@ -230,7 +230,7 @@ const app = (host, port, executionOptions) => {
     const wss = new WebSocketServer({ port: 8974 });
     wss.on('connection', async function connection(ws) {
         ws.on('error', console.error);
-        const { fileInfo } = await readLocalBlueprint();
+        const { fileInfo } = await readLocalBlueprint(logger);
         watchFile(fileInfo.blueprintFilePath, { interval: 2007 }, async () => {
             ws.send('reload-blueprint');
         });

package/dist/server/handlers/invoke.d.ts

@@ -1,4 +1,5 @@
+import type { Logger } from '../../utils/logger.js';
 import type { InvocationResponse, InvokeContextOptions, InvokeExecutionOptions, InvokePayloadMetadata } from '../../utils/types.js';
-export declare function handleInvokeRequest(functionName: string, event: Record<string, unknown>, metadata: InvokePayloadMetadata, context: InvokeContextOptions, executionOptions?: Partial<InvokeExecutionOptions>): Promise<InvocationResponse & {
+export declare function handleInvokeRequest(functionName: string, event: Record<string, unknown>, metadata: InvokePayloadMetadata, context: InvokeContextOptions, logger: ReturnType<typeof Logger>, executionOptions?: Partial<InvokeExecutionOptions>): Promise<InvocationResponse & {
     timings: Record<string, number>;
 }>;

package/dist/server/handlers/invoke.js

@@ -1,9 +1,9 @@
 import { readLocalBlueprint } from '../../actions/blueprints/blueprint.js';
 import { findFunctionInBlueprint } from '../../utils/find-function.js';
 import invoke from '../../utils/invoke-local.js';
-export async function handleInvokeRequest(functionName, event, metadata, context, executionOptions) {
+export async function handleInvokeRequest(functionName, event, metadata, context, logger, executionOptions) {
     const start = performance.now();
-    const { parsedBlueprint } = await readLocalBlueprint();
+    const { parsedBlueprint } = await readLocalBlueprint(logger);
     const resource = findFunctionInBlueprint(parsedBlueprint, functionName);
     const readBlueprintTime = performance.now() - start;
     const payload = {

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

@@ -747,9 +747,6 @@ body {
 header {
   grid-area: header;
 }
-filters-component {
-  grid-area: filters;
-}
 nav {
   grid-area: left-sidebar;
 }
@@ -763,36 +760,6 @@ footer {
   grid-area: footer;
 }
 
-/* Add styles for filters-component form */
-/* Default (Mobile) Styles */
-filters-component form {
-  display: block; /* Stack direct children */
-  padding: var(--m-space-3); /* Consistent padding */
-  border-bottom: 1px solid var(--card-border-color);
-}
-
-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(--m-space-3); /* Add space below each item when stacked */
-}
-
-filters-component form > *:last-child {
-  margin-bottom: 0; /* Remove margin from the last stacked item */
-}
-
-filters-component form label {
-  display: block; /* Ensure label stacks above input if needed */
-  margin-bottom: var(--m-space-1); /* Small space between label and input */
-}
-
-filters-component form input {
-  width: 100%; /* Make input fill its container */
-  box-sizing: border-box; /* Include padding/border in width calculation */
-}
-/* End of Mobile Styles */
-
 /* Apply grid styles to main#main-content */
 #main-content {
   display: grid;
@@ -808,26 +775,6 @@ filters-component form input {
   min-height: 0; /* Important for nested overflow/height */
 }
 
-payload-panel {
-  grid-area: payload;
-  max-height: 100%; /* Fit within allocated grid row space */
-  overflow: hidden; /* Let internal elements scroll */
-  min-height: 0; /* Allow shrinking */
-}
-
-response-panel {
-  grid-area: response;
-  max-height: 100%;
-  overflow: hidden;
-  min-height: 0;
-}
-
-/* Target console-panel for grid area and height constraints */
-console-panel {
-  grid-area: console;
-  overflow: hidden; /* The inner div handles scrolling */
-}
-
 @media (max-width: 40rem) {
   /* Mobile layout: stack elements vertically */
   #main-content {
@@ -843,20 +790,6 @@ console-panel {
     overflow-y: auto; /* Allow scrolling for the whole main area */
   }
 
-  /* Reset max-heights on mobile if they cause layout issues */
-  payload-panel,
-  response-panel,
-  console-panel {
-    max-height: none;
-    min-height: 200px; /* Give some minimum space on mobile */
-    overflow: auto; /* Allow individual scrolling if content is large */
-  }
-
-  /* Ensure console has reasonable height on mobile */
-  console-panel {
-    max-height: 400px; /* Allow more console height on mobile maybe */
-  }
-
   .block-lg {
     display: block !important;
   }
@@ -878,27 +811,6 @@ console-panel {
   .border-top-none-l {
     border-top: 0;
   }
-
-  /* Revert filters-component form to horizontal layout on larger screens */
-  filters-component form {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end; /* Align form elements along their bottom edge */
-    gap: var(--m-space-3); /* Space between elements */
-    padding-left: var(--m-space-3);
-    padding-bottom: var(--m-space-3);
-  }
-
-  filters-component form > * {
-    width: auto; /* Allow elements to size based on content/flex rules */
-    margin-bottom: 0; /* Remove stacking margin */
-  }
-
-  /* Optional: Give API version input a specific width or allow growth */
-  filters-component form fieldset {
-    min-width: 150px; /* Example minimum width */
-    /* flex-grow: 1; */ /* Uncomment to allow it to fill space */
-  }
 }
 
 header {
@@ -1088,34 +1000,6 @@ time {
   font-family: var(--font-family-mono);
 }
 
-response-panel,
-payload-panel {
-  max-height: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-toggle-switch {
-  display: inline-block;
-  cursor: pointer;
-}
-
-toggle-switch::part(track) {
-  padding: 0.125em;
-  border-radius: 1em;
-  background-color: hsl(0, 0%, 67%);
-}
-
-toggle-switch::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);
-}
-
-toggle-switch[checked]::part(track) {
-  background-color: var(--color-interactive-primary-active-bg);
-}
-
 /* Default sidebar */
 #sidebar {
   transition:

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

@@ -36,10 +36,10 @@ export class ClearButton extends ApiBaseElement {
   }
 
   clear = () => {
-    // this.api.store.result = {logs: '', timings: {bundle: 0, execute: 0}}
     this.dispatchEvent(
       new CustomEvent('clear-console', {
         bubbles: true,
+        composed: true,
       }),
     )
   }

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

@@ -1,8 +1,24 @@
 /* globals customElements document */
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
 // Template for the console panel
-const template = `
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+:host {
+  grid-area: console;
+  overflow: hidden;
+}
+
+@media (max-width: 40rem) {
+  :host {
+    max-height: 400px;
+    min-height: 200px;
+    overflow: auto;
+  }
+}
+</style>
 <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">
@@ -17,10 +33,13 @@ const template = `
   </div>
   <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>
-
 `
 
 class ConsolePanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   updateConsole = ({result}) => {
     // Guard against element not being ready or API not injected yet
     if (!this.consoleOutput || !result) return
@@ -45,13 +64,15 @@ class ConsolePanel extends ApiBaseElement {
   clear = () => {
     const backUp = this.api.store.preserveLog
     this.api.store.result = {logs: undefined, error: undefined}
-    this.querySelector('#console-output').innerText = ''
+    this.consoleOutput.innerText = ''
     this.api.store.preserveLog = backUp
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.consoleOutput = this.querySelector('#console-output')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.consoleOutput = this.shadowRoot.querySelector('#console-output')
     this.addEventListener('clear-console', this.clear)
 
     // Subscribe to changes in the result state to update the console

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

@@ -56,7 +56,7 @@ export class FetchButton extends ApiBaseElement {
   }
 
   fetchDoc = async () => {
-    const docId = document.querySelector('#docid').value.trim()
+    const docId = this.api.store.docId.trim()
 
     if (docId) {
       const originalContent = this.button.innerHTML

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

@@ -1,6 +1,9 @@
-class ApiVersionComponent extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+import {ApiBaseElement} from './api-base.js'
+
+import {getSharedStyleSheets} from './shared-styles.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
 <fieldset class="mar-t-2">
     <label class="slab-text">
       <span class="block mar-b-1">API Version</span>
@@ -8,6 +11,39 @@ class ApiVersionComponent extends HTMLElement {
     </label>
 </fieldset>
 `
+
+class ApiVersionComponent extends ApiBaseElement {
+  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;
+      }
+      input {
+        background: transparent !important;
+        color: light-dark(var(--gray-950), var(--gray-300)) !important;
+      }
+    `)
+
+    this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
+
+    this.input = this.shadowRoot.querySelector('input')
+    this.input.addEventListener('input', this.updateApiVersion)
+  }
+
+  updateApiVersion = (event) => {
+    this.api.store.apiVersion = event.target.value
   }
 }