@scalar/api-client 2.42.0 → 3.0.0

package/dist/v2/blocks/scalar-auth-selector-block/helpers/oauth.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/helpers/oauth.ts"],"sourcesContent":["import { replaceEnvVariables, replacePathVariables } from '@scalar/helpers/regex/replace-variables'\nimport { isRelativePath } from '@scalar/helpers/url/is-relative-path'\nimport { makeUrlAbsolute } from '@scalar/helpers/url/make-url-absolute'\nimport { shouldUseProxy } from '@scalar/helpers/url/redirect-to-proxy'\nimport type { OAuthFlowsObjectSecret } from '@scalar/workspace-store/request-example'\nimport { getServerVariables } from '@scalar/workspace-store/request-example'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { encode, fromUint8Array } from 'js-base64'\n\nimport type { ErrorResponse } from '@/libs/errors'\n\n/** Oauth2 security schemes which are not implicit */\ntype NonImplicitFlows = Omit<OAuthFlowsObjectSecret, 'implicit'>\n\ntype PKCEState = {\n  codeVerifier: string\n  codeChallenge: string\n  codeChallengeMethod: string\n}\n\nexport type OAuth2Tokens = {\n  accessToken: string\n  refreshToken?: string\n}\n\nconst getServerUrl = (activeServer: ServerObject | null, environmentVariables: Record<string, string> = {}) => {\n  return replaceEnvVariables(\n    replacePathVariables(activeServer?.url ?? '', getServerVariables(activeServer)),\n    environmentVariables,\n  )\n}\n\nconst getActiveServerBase = (activeServer: ServerObject | null, environmentVariables: Record<string, string> = {}) => {\n  const serverUrl = getServerUrl(activeServer, environmentVariables)\n\n  if (!serverUrl) {\n    return {}\n  }\n\n  if (isRelativePath(serverUrl)) {\n    return typeof window === 'undefined' ? {} : { basePath: serverUrl }\n  }\n\n  return { baseUrl: serverUrl }\n}\n\n/**\n * Generates a random string for PKCE code verifier\n *\n * @see https://www.rfc-editor.org/rfc/rfc7636#page-8\n */\nconst generateCodeVerifier = (): string => {\n  // Generate 32 random bytes\n  const buffer = new Uint8Array(32)\n  crypto.getRandomValues(buffer)\n\n  // Base64URL encode the bytes\n  return fromUint8Array(buffer, true)\n}\n\n/**\n * Creates a code challenge from the code verifier\n */\nconst generateCodeChallenge = async (verifier: string, encoding: 'SHA-256' | 'plain'): Promise<string> => {\n  if (encoding === 'plain') {\n    return verifier\n  }\n\n  // If crypto.subtle.digest is not a function, we cannot use SHA-256\n  if (typeof crypto?.subtle?.digest !== 'function') {\n    console.warn('SHA-256 is only supported when using https, using a plain text code challenge instead.')\n    return verifier\n  }\n\n  // ASCII encoding is just taking the lower 8 bits of each character\n  const encoder = new TextEncoder()\n  const data = encoder.encode(verifier)\n  const digest = await crypto.subtle.digest('SHA-256', data)\n\n  // Base64URL encode the bytes\n  return fromUint8Array(new Uint8Array(digest), true)\n}\n\n/**\n * Authorize oauth2 flow\n *\n * @returns the resolved oauth2 tokens\n */\nexport const authorizeOauth2 = async (\n  flows: OAuthFlowsObjectSecret,\n  type: keyof OAuthFlowsObjectSecret,\n  selectedScopes: string[],\n  /** We use the active server to set a base for relative redirect uris */\n  activeServer: ServerObject | null,\n  /** If we want to use the proxy */\n  proxyUrl: string,\n  /** Flattened environment variables used to resolve server URL templates like `{protocol}` */\n  environmentVariables: Record<string, string> = {},\n): Promise<ErrorResponse<OAuth2Tokens>> => {\n  const flow = flows[type]\n\n  try {\n    if (!flow) {\n      return [new Error('Flow not found'), null]\n    }\n\n    const scopes = selectedScopes.join(' ')\n\n    // Client Credentials or Password Flow\n    if (type === 'clientCredentials' || type === 'password') {\n      return authorizeServers(\n        flows,\n        type,\n        scopes,\n        {\n          proxyUrl,\n        },\n        activeServer,\n        environmentVariables,\n      )\n    }\n\n    // Generate a random state string with the length of 8 characters\n    const state = (Math.random() + 1).toString(36).substring(2, 10)\n\n    const authorizationUrl = makeUrlAbsolute(\n      flows[type]!['x-scalar-secret-auth-url'] ?? flows[type]!.authorizationUrl,\n      getActiveServerBase(activeServer, environmentVariables),\n    )\n\n    const url = new URL(authorizationUrl)\n\n    /** Special PKCE state */\n    let pkce: PKCEState | null = null\n\n    // Params unique to the flows\n    if (type === 'implicit') {\n      url.searchParams.set('response_type', 'token')\n    } else if (type === 'authorizationCode') {\n      const typedFlow = flows[type]! // Safe to assert due to earlier check\n\n      url.searchParams.set('response_type', 'code')\n\n      // PKCE\n      if (typedFlow['x-usePkce'] !== 'no') {\n        const codeVerifier = generateCodeVerifier()\n        const codeChallenge = await generateCodeChallenge(codeVerifier, typedFlow['x-usePkce'])\n\n        // Set state for later verification\n        pkce = {\n          codeVerifier,\n          codeChallenge,\n          codeChallengeMethod: typedFlow['x-usePkce'] === 'SHA-256' ? 'S256' : 'plain',\n        }\n\n        // Set the code challenge and method on the url\n        url.searchParams.set('code_challenge', codeChallenge)\n        url.searchParams.set('code_challenge_method', pkce.codeChallengeMethod)\n      }\n    }\n\n    const typedFlow = flows[type]! // Safe to assert due to earlier check\n\n    // Handle relative redirect uris\n    if (typedFlow['x-scalar-secret-redirect-uri'].startsWith('/')) {\n      const baseUrl =\n        getServerUrl(activeServer, environmentVariables) || window.location.origin + window.location.pathname\n      const redirectUri = new URL(typedFlow['x-scalar-secret-redirect-uri'], baseUrl).toString()\n\n      url.searchParams.set('redirect_uri', redirectUri)\n    } else {\n      url.searchParams.set('redirect_uri', typedFlow['x-scalar-secret-redirect-uri'])\n    }\n\n    if (flow['x-scalar-security-query']) {\n      Object.keys(flow['x-scalar-security-query']).forEach((key: string): void => {\n        const value = flow['x-scalar-security-query']?.[key]\n        if (!value) {\n          return\n        }\n        url.searchParams.set(key, value)\n      })\n    }\n\n    // Common to all flows\n    url.searchParams.set('client_id', flow['x-scalar-secret-client-id'])\n    url.searchParams.set('state', state)\n    if (scopes) {\n      url.searchParams.set('scope', scopes)\n    }\n\n    const windowFeatures = 'left=100,top=100,width=800,height=600'\n    const authWindow = window.open(url, 'openAuth2Window', windowFeatures)\n\n    // Open up a window and poll until closed or we have the data we want\n    if (authWindow) {\n      // We need to return a promise here due to the setInterval\n      return new Promise<ErrorResponse<OAuth2Tokens>>((resolve) => {\n        const checkWindowClosed = setInterval(() => {\n          let accessToken: string | null = null\n          let refreshToken: string | null = null\n          let code: string | null = null\n          let error: string | null = null\n          let errorDescription: string | null = null\n\n          try {\n            const urlParams = new URL(authWindow.location.href).searchParams\n            const tokenName = flow['x-tokenName'] || 'access_token'\n            accessToken = urlParams.get(tokenName)\n            refreshToken = urlParams.get('refresh_token')\n            code = urlParams.get('code')\n\n            error = urlParams.get('error')\n            errorDescription = urlParams.get('error_description')\n\n            // We may get the properties in a hash\n            const hashParams = new URLSearchParams(authWindow.location.href.split('#')[1])\n            accessToken ||= hashParams.get(tokenName)\n            refreshToken ||= hashParams.get('refresh_token')\n            code ||= hashParams.get('code')\n            error ||= hashParams.get('error')\n            errorDescription ||= hashParams.get('error_description')\n          } catch (_e) {\n            // Ignore CORS error from popup\n          }\n\n          // The window has closed OR we have what we are looking for so we stop polling\n          if (authWindow.closed || accessToken || code || error) {\n            clearInterval(checkWindowClosed)\n            authWindow.close()\n\n            if (error) {\n              resolve([new Error(`OAuth error: ${error}${errorDescription ? ` (${errorDescription})` : ''}`), null])\n            }\n\n            // Implicit Flow\n            else if (accessToken) {\n              // State is a hash fragment and cannot be found through search params\n              const _state = authWindow.location.href.match(/state=([^&]*)/)?.[1]\n\n              if (_state === state) {\n                resolve([null, { accessToken, ...(refreshToken ? { refreshToken } : {}) }])\n              } else {\n                resolve([new Error('State mismatch'), null])\n              }\n            }\n\n            // Authorization Code Server Flow\n            else if (code && type === 'authorizationCode') {\n              const _state = new URL(authWindow.location.href).searchParams.get('state')\n\n              if (_state === state) {\n                // biome-ignore lint/nursery/noFloatingPromises: output of authorizeServers must be returned\n                authorizeServers(\n                  flows,\n                  type,\n                  scopes,\n                  {\n                    code,\n                    pkce,\n                    proxyUrl,\n                  },\n                  activeServer,\n                  environmentVariables,\n                ).then(resolve)\n              } else {\n                resolve([new Error('State mismatch'), null])\n              }\n            }\n            // User closed window without authorizing\n            else {\n              clearInterval(checkWindowClosed)\n              resolve([new Error('Window was closed without granting authorization'), null])\n            }\n          }\n        }, 200)\n      })\n    }\n    return [new Error('Failed to open auth window'), null]\n  } catch (_) {\n    return [new Error('Failed to authorize oauth2 flow'), null]\n  }\n}\n\n/**\n * Makes the BE authorization call to grab the token server to server\n * Used for clientCredentials and authorizationCode\n */\nconst authorizeServers = async (\n  flows: NonImplicitFlows,\n  type: keyof NonImplicitFlows,\n  scopes: string,\n  {\n    code,\n    pkce,\n    proxyUrl,\n  }: {\n    code?: string\n    pkce?: PKCEState | null\n    proxyUrl?: string\n  } = {},\n  activeServer: ServerObject | null,\n  environmentVariables: Record<string, string> = {},\n): Promise<ErrorResponse<OAuth2Tokens>> => {\n  const flow = flows[type]\n\n  if (!flow) {\n    return [new Error('OAuth2 flow was not defined'), null]\n  }\n\n  const formData = new URLSearchParams()\n\n  // Only client credentials and password flows support scopes in the token request\n  if (scopes && (type === 'clientCredentials' || type === 'password')) {\n    formData.set('scope', scopes)\n  }\n\n  /** Where to add the credentials */\n  const addCredentialsToBody = flow['x-scalar-credentials-location'] === 'body'\n  const hasClientSecret = Boolean(flow['x-scalar-secret-client-secret'])\n  /**\n   * Public authorization-code clients still need client_id in the token body.\n   * We only send it implicitly for that case to avoid conflicting with Basic auth.\n   */\n  const shouldSendClientIdInBody = addCredentialsToBody || (type === 'authorizationCode' && !hasClientSecret)\n\n  if (shouldSendClientIdInBody) {\n    formData.set('client_id', flow['x-scalar-secret-client-id'])\n  }\n  if (addCredentialsToBody && hasClientSecret) {\n    formData.set('client_secret', flow['x-scalar-secret-client-secret'])\n  }\n  if ('x-scalar-secret-redirect-uri' in flow && flow['x-scalar-secret-redirect-uri']) {\n    formData.set('redirect_uri', flow['x-scalar-secret-redirect-uri'])\n  }\n\n  // Authorization Code\n  if (code) {\n    formData.set('code', code)\n    formData.set('grant_type', 'authorization_code')\n\n    // PKCE\n    if (pkce) {\n      formData.set('code_verifier', pkce.codeVerifier)\n    }\n  }\n  // Password\n  else if (type === 'password') {\n    const typedFlow = flows[type]! // Safe to assert due to earlier check\n    formData.set('grant_type', 'password')\n    formData.set('username', typedFlow['x-scalar-secret-username'])\n    formData.set('password', typedFlow['x-scalar-secret-password'])\n  }\n  // Client Credentials\n  else {\n    formData.set('grant_type', 'client_credentials')\n  }\n\n  // Additional request body parameters\n  if (flow['x-scalar-security-body']) {\n    Object.entries(flow['x-scalar-security-body']).forEach(([key, value]) => {\n      if (value !== undefined && value !== null) {\n        formData.set(key, String(value))\n      }\n    })\n  }\n\n  try {\n    const headers: Record<string, string> = {\n      'Content-Type': 'application/x-www-form-urlencoded',\n    }\n\n    // Add client id + secret to headers for confidential clients.\n    if (!addCredentialsToBody && hasClientSecret) {\n      headers.Authorization = `Basic ${encode(`${flow['x-scalar-secret-client-id']}:${flow['x-scalar-secret-client-secret']}`)}`\n    }\n\n    // Check if we should use the proxy\n    const tokenUrl = makeUrlAbsolute(\n      flow['x-scalar-secret-token-url'] ?? flow.tokenUrl,\n      getActiveServerBase(activeServer, environmentVariables),\n    )\n    const url = shouldUseProxy(proxyUrl, tokenUrl)\n      ? `${proxyUrl}?${new URLSearchParams([['scalar_url', tokenUrl]]).toString()}`\n      : tokenUrl\n\n    // Make the call\n    const resp = await fetch(url, {\n      method: 'POST',\n      headers,\n      body: formData,\n    })\n    const responseData = await resp.json()\n\n    // Use custom token name if specified, otherwise default to access_token\n    const tokenName = flow['x-tokenName'] || 'access_token'\n    const accessToken = responseData[tokenName]\n    const refreshToken = responseData.refresh_token\n\n    return [null, { accessToken, ...(typeof refreshToken === 'string' ? { refreshToken } : {}) }]\n  } catch {\n    return [new Error('Failed to get an access token. Please check your credentials.'), null]\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"oauth.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/helpers/oauth.ts"],"sourcesContent":["import type { ErrorResponse } from '@scalar/helpers/errors/normalize-error'\nimport { replaceEnvVariables, replacePathVariables } from '@scalar/helpers/regex/replace-variables'\nimport { isRelativePath } from '@scalar/helpers/url/is-relative-path'\nimport { makeUrlAbsolute } from '@scalar/helpers/url/make-url-absolute'\nimport { shouldUseProxy } from '@scalar/helpers/url/redirect-to-proxy'\nimport type { OAuthFlowsObjectSecret } from '@scalar/workspace-store/request-example'\nimport { getServerVariables } from '@scalar/workspace-store/request-example'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { encode, fromUint8Array } from 'js-base64'\n\n/** Oauth2 security schemes which are not implicit */\ntype NonImplicitFlows = Omit<OAuthFlowsObjectSecret, 'implicit'>\n\ntype PKCEState = {\n  codeVerifier: string\n  codeChallenge: string\n  codeChallengeMethod: string\n}\n\nexport type OAuth2Tokens = {\n  accessToken: string\n  refreshToken?: string\n}\n\nconst getServerUrl = (activeServer: ServerObject | null, environmentVariables: Record<string, string> = {}) => {\n  return replaceEnvVariables(\n    replacePathVariables(activeServer?.url ?? '', getServerVariables(activeServer)),\n    environmentVariables,\n  )\n}\n\nconst getActiveServerBase = (activeServer: ServerObject | null, environmentVariables: Record<string, string> = {}) => {\n  const serverUrl = getServerUrl(activeServer, environmentVariables)\n\n  if (!serverUrl) {\n    return {}\n  }\n\n  if (isRelativePath(serverUrl)) {\n    return typeof window === 'undefined' ? {} : { basePath: serverUrl }\n  }\n\n  return { baseUrl: serverUrl }\n}\n\n/**\n * Generates a random string for PKCE code verifier\n *\n * @see https://www.rfc-editor.org/rfc/rfc7636#page-8\n */\nconst generateCodeVerifier = (): string => {\n  // Generate 32 random bytes\n  const buffer = new Uint8Array(32)\n  crypto.getRandomValues(buffer)\n\n  // Base64URL encode the bytes\n  return fromUint8Array(buffer, true)\n}\n\n/**\n * Creates a code challenge from the code verifier\n */\nconst generateCodeChallenge = async (verifier: string, encoding: 'SHA-256' | 'plain'): Promise<string> => {\n  if (encoding === 'plain') {\n    return verifier\n  }\n\n  // If crypto.subtle.digest is not a function, we cannot use SHA-256\n  if (typeof crypto?.subtle?.digest !== 'function') {\n    console.warn('SHA-256 is only supported when using https, using a plain text code challenge instead.')\n    return verifier\n  }\n\n  // ASCII encoding is just taking the lower 8 bits of each character\n  const encoder = new TextEncoder()\n  const data = encoder.encode(verifier)\n  const digest = await crypto.subtle.digest('SHA-256', data)\n\n  // Base64URL encode the bytes\n  return fromUint8Array(new Uint8Array(digest), true)\n}\n\n/**\n * Authorize oauth2 flow\n *\n * @returns the resolved oauth2 tokens\n */\nexport const authorizeOauth2 = async (\n  flows: OAuthFlowsObjectSecret,\n  type: keyof OAuthFlowsObjectSecret,\n  selectedScopes: string[],\n  /** We use the active server to set a base for relative redirect uris */\n  activeServer: ServerObject | null,\n  /** If we want to use the proxy */\n  proxyUrl: string,\n  /** Flattened environment variables used to resolve server URL templates like `{protocol}` */\n  environmentVariables: Record<string, string> = {},\n): Promise<ErrorResponse<OAuth2Tokens>> => {\n  const flow = flows[type]\n\n  try {\n    if (!flow) {\n      return [new Error('Flow not found'), null]\n    }\n\n    const scopes = selectedScopes.join(' ')\n\n    // Client Credentials or Password Flow\n    if (type === 'clientCredentials' || type === 'password') {\n      return authorizeServers(\n        flows,\n        type,\n        scopes,\n        {\n          proxyUrl,\n        },\n        activeServer,\n        environmentVariables,\n      )\n    }\n\n    // Generate a random state string with the length of 8 characters\n    const state = (Math.random() + 1).toString(36).substring(2, 10)\n\n    const authorizationUrl = makeUrlAbsolute(\n      flows[type]!['x-scalar-secret-auth-url'] ?? flows[type]!.authorizationUrl,\n      getActiveServerBase(activeServer, environmentVariables),\n    )\n\n    const url = new URL(authorizationUrl)\n\n    /** Special PKCE state */\n    let pkce: PKCEState | null = null\n\n    // Params unique to the flows\n    if (type === 'implicit') {\n      url.searchParams.set('response_type', 'token')\n    } else if (type === 'authorizationCode') {\n      const typedFlow = flows[type]! // Safe to assert due to earlier check\n\n      url.searchParams.set('response_type', 'code')\n\n      // PKCE\n      if (typedFlow['x-usePkce'] !== 'no') {\n        const codeVerifier = generateCodeVerifier()\n        const codeChallenge = await generateCodeChallenge(codeVerifier, typedFlow['x-usePkce'])\n\n        // Set state for later verification\n        pkce = {\n          codeVerifier,\n          codeChallenge,\n          codeChallengeMethod: typedFlow['x-usePkce'] === 'SHA-256' ? 'S256' : 'plain',\n        }\n\n        // Set the code challenge and method on the url\n        url.searchParams.set('code_challenge', codeChallenge)\n        url.searchParams.set('code_challenge_method', pkce.codeChallengeMethod)\n      }\n    }\n\n    const typedFlow = flows[type]! // Safe to assert due to earlier check\n\n    // Handle relative redirect uris\n    if (typedFlow['x-scalar-secret-redirect-uri'].startsWith('/')) {\n      const baseUrl =\n        getServerUrl(activeServer, environmentVariables) || window.location.origin + window.location.pathname\n      const redirectUri = new URL(typedFlow['x-scalar-secret-redirect-uri'], baseUrl).toString()\n\n      url.searchParams.set('redirect_uri', redirectUri)\n    } else {\n      url.searchParams.set('redirect_uri', typedFlow['x-scalar-secret-redirect-uri'])\n    }\n\n    if (flow['x-scalar-security-query']) {\n      Object.keys(flow['x-scalar-security-query']).forEach((key: string): void => {\n        const value = flow['x-scalar-security-query']?.[key]\n        if (!value) {\n          return\n        }\n        url.searchParams.set(key, value)\n      })\n    }\n\n    // Common to all flows\n    url.searchParams.set('client_id', flow['x-scalar-secret-client-id'])\n    url.searchParams.set('state', state)\n    if (scopes) {\n      url.searchParams.set('scope', scopes)\n    }\n\n    const windowFeatures = 'left=100,top=100,width=800,height=600'\n    const authWindow = window.open(url, 'openAuth2Window', windowFeatures)\n\n    // Open up a window and poll until closed or we have the data we want\n    if (authWindow) {\n      // We need to return a promise here due to the setInterval\n      return new Promise<ErrorResponse<OAuth2Tokens>>((resolve) => {\n        const checkWindowClosed = setInterval(() => {\n          let accessToken: string | null = null\n          let refreshToken: string | null = null\n          let code: string | null = null\n          let error: string | null = null\n          let errorDescription: string | null = null\n\n          try {\n            const urlParams = new URL(authWindow.location.href).searchParams\n            const tokenName = flow['x-tokenName'] || 'access_token'\n            accessToken = urlParams.get(tokenName)\n            refreshToken = urlParams.get('refresh_token')\n            code = urlParams.get('code')\n\n            error = urlParams.get('error')\n            errorDescription = urlParams.get('error_description')\n\n            // We may get the properties in a hash\n            const hashParams = new URLSearchParams(authWindow.location.href.split('#')[1])\n            accessToken ||= hashParams.get(tokenName)\n            refreshToken ||= hashParams.get('refresh_token')\n            code ||= hashParams.get('code')\n            error ||= hashParams.get('error')\n            errorDescription ||= hashParams.get('error_description')\n          } catch (_e) {\n            // Ignore CORS error from popup\n          }\n\n          // The window has closed OR we have what we are looking for so we stop polling\n          if (authWindow.closed || accessToken || code || error) {\n            clearInterval(checkWindowClosed)\n            authWindow.close()\n\n            if (error) {\n              resolve([new Error(`OAuth error: ${error}${errorDescription ? ` (${errorDescription})` : ''}`), null])\n            }\n\n            // Implicit Flow\n            else if (accessToken) {\n              // State is a hash fragment and cannot be found through search params\n              const _state = authWindow.location.href.match(/state=([^&]*)/)?.[1]\n\n              if (_state === state) {\n                resolve([null, { accessToken, ...(refreshToken ? { refreshToken } : {}) }])\n              } else {\n                resolve([new Error('State mismatch'), null])\n              }\n            }\n\n            // Authorization Code Server Flow\n            else if (code && type === 'authorizationCode') {\n              const _state = new URL(authWindow.location.href).searchParams.get('state')\n\n              if (_state === state) {\n                // biome-ignore lint/nursery/noFloatingPromises: output of authorizeServers must be returned\n                authorizeServers(\n                  flows,\n                  type,\n                  scopes,\n                  {\n                    code,\n                    pkce,\n                    proxyUrl,\n                  },\n                  activeServer,\n                  environmentVariables,\n                ).then(resolve)\n              } else {\n                resolve([new Error('State mismatch'), null])\n              }\n            }\n            // User closed window without authorizing\n            else {\n              clearInterval(checkWindowClosed)\n              resolve([new Error('Window was closed without granting authorization'), null])\n            }\n          }\n        }, 200)\n      })\n    }\n    return [new Error('Failed to open auth window'), null]\n  } catch (_) {\n    return [new Error('Failed to authorize oauth2 flow'), null]\n  }\n}\n\n/**\n * Makes the BE authorization call to grab the token server to server\n * Used for clientCredentials and authorizationCode\n */\nconst authorizeServers = async (\n  flows: NonImplicitFlows,\n  type: keyof NonImplicitFlows,\n  scopes: string,\n  {\n    code,\n    pkce,\n    proxyUrl,\n  }: {\n    code?: string\n    pkce?: PKCEState | null\n    proxyUrl?: string\n  } = {},\n  activeServer: ServerObject | null,\n  environmentVariables: Record<string, string> = {},\n): Promise<ErrorResponse<OAuth2Tokens>> => {\n  const flow = flows[type]\n\n  if (!flow) {\n    return [new Error('OAuth2 flow was not defined'), null]\n  }\n\n  const formData = new URLSearchParams()\n\n  // Only client credentials and password flows support scopes in the token request\n  if (scopes && (type === 'clientCredentials' || type === 'password')) {\n    formData.set('scope', scopes)\n  }\n\n  /** Where to add the credentials */\n  const addCredentialsToBody = flow['x-scalar-credentials-location'] === 'body'\n  const hasClientSecret = Boolean(flow['x-scalar-secret-client-secret'])\n  /**\n   * Public authorization-code clients still need client_id in the token body.\n   * We only send it implicitly for that case to avoid conflicting with Basic auth.\n   */\n  const shouldSendClientIdInBody = addCredentialsToBody || (type === 'authorizationCode' && !hasClientSecret)\n\n  if (shouldSendClientIdInBody) {\n    formData.set('client_id', flow['x-scalar-secret-client-id'])\n  }\n  if (addCredentialsToBody && hasClientSecret) {\n    formData.set('client_secret', flow['x-scalar-secret-client-secret'])\n  }\n  if ('x-scalar-secret-redirect-uri' in flow && flow['x-scalar-secret-redirect-uri']) {\n    formData.set('redirect_uri', flow['x-scalar-secret-redirect-uri'])\n  }\n\n  // Authorization Code\n  if (code) {\n    formData.set('code', code)\n    formData.set('grant_type', 'authorization_code')\n\n    // PKCE\n    if (pkce) {\n      formData.set('code_verifier', pkce.codeVerifier)\n    }\n  }\n  // Password\n  else if (type === 'password') {\n    const typedFlow = flows[type]! // Safe to assert due to earlier check\n    formData.set('grant_type', 'password')\n    formData.set('username', typedFlow['x-scalar-secret-username'])\n    formData.set('password', typedFlow['x-scalar-secret-password'])\n  }\n  // Client Credentials\n  else {\n    formData.set('grant_type', 'client_credentials')\n  }\n\n  // Additional request body parameters\n  if (flow['x-scalar-security-body']) {\n    Object.entries(flow['x-scalar-security-body']).forEach(([key, value]) => {\n      if (value !== undefined && value !== null) {\n        formData.set(key, String(value))\n      }\n    })\n  }\n\n  try {\n    const headers: Record<string, string> = {\n      'Content-Type': 'application/x-www-form-urlencoded',\n    }\n\n    // Add client id + secret to headers for confidential clients.\n    if (!addCredentialsToBody && hasClientSecret) {\n      headers.Authorization = `Basic ${encode(`${flow['x-scalar-secret-client-id']}:${flow['x-scalar-secret-client-secret']}`)}`\n    }\n\n    // Check if we should use the proxy\n    const tokenUrl = makeUrlAbsolute(\n      flow['x-scalar-secret-token-url'] ?? flow.tokenUrl,\n      getActiveServerBase(activeServer, environmentVariables),\n    )\n    const url = shouldUseProxy(proxyUrl, tokenUrl)\n      ? `${proxyUrl}?${new URLSearchParams([['scalar_url', tokenUrl]]).toString()}`\n      : tokenUrl\n\n    // Make the call\n    const resp = await fetch(url, {\n      method: 'POST',\n      headers,\n      body: formData,\n    })\n    const responseData = await resp.json()\n\n    // Use custom token name if specified, otherwise default to access_token\n    const tokenName = flow['x-tokenName'] || 'access_token'\n    const accessToken = responseData[tokenName]\n    const refreshToken = responseData.refresh_token\n\n    return [null, { accessToken, ...(typeof refreshToken === 'string' ? { refreshToken } : {}) }]\n  } catch {\n    return [new Error('Failed to get an access token. Please check your credentials.'), null]\n  }\n}\n"],"mappings":"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"}

package/dist/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.d.ts

@@ -0,0 +1,11 @@
+import type { ApiClientConfiguration } from '@scalar/types/api-reference';
+/**
+ * Resolve the default OAuth2 redirect URI.
+ *
+ * Priority:
+ * 1. Explicit oauth2RedirectUri config override.
+ * 2. Empty string in non-browser and file:// contexts.
+ * 3. Browser origin + pathname fallback.
+ */
+export declare const resolveDefaultOAuth2RedirectUri: (config: Pick<ApiClientConfiguration, "oauth2RedirectUri">) => string;
+//# sourceMappingURL=resolve-default-oauth2-redirect-url.d.ts.map

package/dist/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-default-oauth2-redirect-url.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEzE;;;;;;;GAOG;AACH,eAAO,MAAM,+BAA+B,GAAI,QAAQ,IAAI,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,KAAG,MAU3G,CAAA"}

package/dist/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.js

@@ -0,0 +1,18 @@
+//#region src/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.ts
+/**
+* Resolve the default OAuth2 redirect URI.
+*
+* Priority:
+* 1. Explicit oauth2RedirectUri config override.
+* 2. Empty string in non-browser and file:// contexts.
+* 3. Browser origin + pathname fallback.
+*/
+var resolveDefaultOAuth2RedirectUri = (config) => {
+	if (config.oauth2RedirectUri) return config.oauth2RedirectUri;
+	if (typeof window === "undefined" || window.location.protocol === "file:") return "";
+	return window.location.origin + window.location.pathname;
+};
+//#endregion
+export { resolveDefaultOAuth2RedirectUri };
+
+//# sourceMappingURL=resolve-default-oauth2-redirect-url.js.map

package/dist/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-default-oauth2-redirect-url.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/helpers/resolve-default-oauth2-redirect-url.ts"],"sourcesContent":["import type { ApiClientConfiguration } from '@scalar/types/api-reference'\n\n/**\n * Resolve the default OAuth2 redirect URI.\n *\n * Priority:\n * 1. Explicit oauth2RedirectUri config override.\n * 2. Empty string in non-browser and file:// contexts.\n * 3. Browser origin + pathname fallback.\n */\nexport const resolveDefaultOAuth2RedirectUri = (config: Pick<ApiClientConfiguration, 'oauth2RedirectUri'>): string => {\n  if (config.oauth2RedirectUri) {\n    return config.oauth2RedirectUri\n  }\n\n  if (typeof window === 'undefined' || window.location.protocol === 'file:') {\n    return ''\n  }\n\n  return window.location.origin + window.location.pathname\n}\n"],"mappings":";;;;;;;;;AAUA,IAAa,mCAAmC,WAAsE;AACpH,KAAI,OAAO,kBACT,QAAO,OAAO;AAGhB,KAAI,OAAO,WAAW,eAAe,OAAO,SAAS,aAAa,QAChE,QAAO;AAGT,QAAO,OAAO,SAAS,SAAS,OAAO,SAAS"}

package/dist/v2/components/code-input/CodeInput.vue.d.ts

@@ -11,7 +11,8 @@ export type CodeInputModelValue = string | number | boolean | Array<string | num
  * - Select mode: Dropdown for enums, booleans, or examples
  * - Editor mode: CodeMirror with environment variable support
  *
- * Type `{{` to trigger environment variable autocomplete when an environment is provided.
+ * Type `{{` to trigger autocomplete for environment variables and runtime context functions
+ * (for example `{{$guid}}`) when an environment is provided.
  * It takes in any data but always will emit a string value,
  * this string should then be parsed in accordance to the schema or content type.
  *
@@ -102,7 +103,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     cursorPosition: () => number | undefined;
     serializeValue: (value: CodeInputModelValue) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (value: string, event: KeyboardEvent | FocusEvent) => any;
+    submit: (value: string, event: FocusEvent | KeyboardEvent) => any;
     "update:modelValue": (value: string) => any;
     blur: (value: string, event: FocusEvent) => any;
     navigate: (route: {
@@ -164,7 +165,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** Put a linethrough on the input text */
     linethrough?: boolean;
 }> & Readonly<{
-    onSubmit?: ((value: string, event: KeyboardEvent | FocusEvent) => any) | undefined;
+    onSubmit?: ((value: string, event: FocusEvent | KeyboardEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onBlur?: ((value: string, event: FocusEvent) => any) | undefined;
     onNavigate?: ((route: {

package/dist/v2/components/code-input/CodeInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"names":[],"mappings":"AAiqBA,OAAO,EAIL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACf,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAEnH,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKrD,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GACN,MAAM,GACN,OAAO,GACP,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;gBAEJ,mBAAmB;IAC/B,6FAA6F;iBAChF,kBAAkB,GAAG,SAAS;IAC3C,mEAAmE;WAC5D,MAAM,GAAG,MAAM,EAAE;IACxB,sCAAsC;eAC3B,OAAO;IAClB,yBAAyB;YACjB,OAAO;IACf,kDAAkD;aACzC,YAAY;IACrB,mDAAmD;WAC5C,MAAM,EAAE;IACf,2CAA2C;eAChC,MAAM,EAAE;IACnB,2CAA2C;;IAE3C,2CAA2C;eAChC,OAAO;IAClB,uCAAuC;kBACzB,MAAM;IACpB,8BAA8B;eACnB,OAAO;IAClB,oCAAoC;kBACtB,OAAO;IACrB,kCAAkC;kBACpB,OAAO;IACrB,qBAAqB;WACd,OAAO;IACd,2BAA2B;mBACZ,OAAO;IACtB,+BAA+B;eACpB,kBAAkB;IAC7B,uCAAuC;iBAC1B,SAAS,EAAE;IACxB,sCAAsC;uBACnB,OAAO;IAC1B,wBAAwB;mBACT,OAAO;IACtB,wCAAwC;2BACjB,OAAO;IAC9B,gCAAgC;iBACnB,OAAO;IACpB,wCAAwC;oBACxB,OAAO;IACvB,sDAAsD;uBACnC,OAAO;IAC1B,mDAAmD;wBAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAC3C,mDAAmD;wBAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAC3C,0CAA0C;kBAC5B,OAAO;;IA4QrB;;;;OAIG;uBACgB,OAAO,GAAG,KAAK,GAAG,MAAM;;0BA3LhB,MAAM,KAAG,IAAI;0BAiBjC,MAAM,SACN,aAAa,GAAG,UAAU,KAChC,IAAI;wBAWoB,MAAM,SAAS,UAAU,KAAG,IAAI;;;;;;;4BAuD5B,mBAAmB,KAAG,MAAM;;;;;;cAtI7B,UAAU;cAAQ,aAAa;;;gBAzF/C,mBAAmB;IAC/B,6FAA6F;iBAChF,kBAAkB,GAAG,SAAS;IAC3C,mEAAmE;WAC5D,MAAM,GAAG,MAAM,EAAE;IACxB,sCAAsC;eAC3B,OAAO;IAClB,yBAAyB;YACjB,OAAO;IACf,kDAAkD;aACzC,YAAY;IACrB,mDAAmD;WAC5C,MAAM,EAAE;IACf,2CAA2C;eAChC,MAAM,EAAE;IACnB,2CAA2C;;IAE3C,2CAA2C;eAChC,OAAO;IAClB,uCAAuC;kBACzB,MAAM;IACpB,8BAA8B;eACnB,OAAO;IAClB,oCAAoC;kBACtB,OAAO;IACrB,kCAAkC;kBACpB,OAAO;IACrB,qBAAqB;WACd,OAAO;IACd,2BAA2B;mBACZ,OAAO;IACtB,+BAA+B;eACpB,kBAAkB;IAC7B,uCAAuC;iBAC1B,SAAS,EAAE;IACxB,sCAAsC;uBACnB,OAAO;IAC1B,wBAAwB;mBACT,OAAO;IACtB,wCAAwC;2BACjB,OAAO;IAC9B,gCAAgC;iBACnB,OAAO;IACpB,wCAAwC;oBACxB,OAAO;IACvB,sDAAsD;uBACnC,OAAO;IAC1B,mDAAmD;wBAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAC3C,mDAAmD;wBAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAC3C,0CAA0C;kBAC5B,OAAO;;;;;;cAqCO,UAAU;cAAQ,aAAa;;;cA0mB/C,CAAC,KAAK,IAAiB,KAAK,GAAG;;WAClC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAYtC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"names":[],"mappings":"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"}

package/dist/v2/components/code-input/CodeInput.vue.js

@@ -3,7 +3,7 @@ import CodeInput_vue_vue_type_script_setup_true_lang_default from "./CodeInput.v
 /* empty css                        */
 /* empty css                          */
 //#region src/v2/components/code-input/CodeInput.vue
-var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CodeInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3ac22ad4"]]);
+var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CodeInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-167b1bd5"]]);
 //#endregion
 export { CodeInput_default as default };
 

package/dist/v2/components/code-input/CodeInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.vue.js","names":[],"sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeInputModelValue =\n  | string\n  | number\n  | boolean\n  | Array<string | number | boolean>\n  | Record<string, unknown>\n\n/**\n * CodeInput\n *\n * A versatile input component that adapts its rendering based on props:\n * - Disabled mode: Read-only text display\n * - Select mode: Dropdown for enums, booleans, or examples\n * - Editor mode: CodeMirror with environment variable support\n *\n * Type `{{` to trigger environment variable autocomplete when an environment is provided.\n * It takes in any data but always will emit a string value,\n * this string should then be parsed in accordance to the schema or content type.\n *\n * @example\n * ```vue\n * <!-- Basic input with environment variables -->\n * <CodeInput v-model=\"value\" :environment=\"env\" />\n *\n * <!-- Boolean select -->\n * <CodeInput v-model=\"flag\" type=\"boolean\" />\n *\n * <!-- JSON editor with linting -->\n * <CodeInput v-model=\"data\" language=\"json\" :lint=\"true\" />\n * ```\n */\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport DataTableInputSelect from '@/v2/components/data-table/DataTableInputSelect.vue'\nimport EnvironmentVariableDropdown from '@/v2/features/environments/components/EnvironmentVariablesDropdown.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { backspaceCommand, pillPlugin } from './code-variable-widget'\n\ntype Props = {\n  modelValue: CodeInputModelValue\n  /** Environment for variable substitution. Pass undefined to disable environment variables */\n  environment: XScalarEnvironment | undefined\n  /** Type of the input value, affects rendering mode for booleans */\n  type?: string | string[]\n  /** Render as disabled text display */\n  disabled?: boolean\n  /** Show error styling */\n  error?: boolean\n  /** Layout context affects styling and behavior */\n  layout?: ClientLayout\n  /** Predefined enum values, triggers select mode */\n  enum?: string[]\n  /** Example values, triggers select mode */\n  examples?: string[]\n  /** Default value to show in select mode */\n  default?: Props['modelValue']\n  /** Allow null in boolean select options */\n  nullable?: boolean\n  /** Placeholder text for empty input */\n  placeholder?: string\n  /** Show required indicator */\n  required?: boolean\n  /** Enable color picker extension */\n  colorPicker?: boolean\n  /** Show line numbers in editor */\n  lineNumbers?: boolean\n  /** Enable linting */\n  lint?: boolean\n  /** Enable line wrapping */\n  lineWrapping?: boolean\n  /** CodeMirror language mode */\n  language?: CodeMirrorLanguage\n  /** Additional CodeMirror extensions */\n  extensions?: Extension[]\n  /** Disable tab key for indentation */\n  disableTabIndent?: boolean\n  /** Disable enter key */\n  disableEnter?: boolean\n  /** Disable automatic bracket closing */\n  disableCloseBrackets?: boolean\n  /** Emit submit event on blur */\n  emitOnBlur?: boolean\n  /** Enable environment variable pills */\n  withVariables?: boolean\n  /** Emit change event even if the value is the same */\n  alwaysEmitChange?: boolean\n  /** Custom change handler, prevents default emit */\n  handleFieldChange?: (value: string) => void\n  /** Custom submit handler, prevents default emit */\n  handleFieldSubmit?: (value: string) => void\n  /** Put a linethrough on the input text */\n  linethrough?: boolean\n}\n\nconst {\n  modelValue,\n  environment,\n  type,\n  disabled = false,\n  error = false,\n  layout = 'desktop',\n  enum: enumProp,\n  examples,\n  default: defaultProp,\n  nullable = false,\n  placeholder,\n  required,\n  colorPicker = false,\n  lineNumbers = false,\n  lint = false,\n  lineWrapping = false,\n  language,\n  extensions = [],\n  disableTabIndent = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  emitOnBlur = true,\n  alwaysEmitChange = false,\n  withVariables = true,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\n}>()\n\n// ---------------------------------------------------------------------------\n// Component identity and focus state\n\nconst attrs = useAttrs() as { id?: string }\nconst componentId = attrs.id || `id-${nanoid()}`\nconst isFocused = ref(false)\n\n// ---------------------------------------------------------------------------\n// Rendering mode detection\n\n/**\n * Determines if we should render a select dropdown for boolean types.\n */\nconst isBooleanMode = computed((): boolean => {\n  if (enumProp?.length) {\n    return false\n  }\n  return type === 'boolean' || (Array.isArray(type) && type.includes('boolean'))\n})\n\n/**\n * Options for boolean select mode.\n */\nconst booleanOptions = computed((): string[] =>\n  nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\n/**\n * Default type when dealing with type arrays.\n * Finds the first non-null type.\n */\nconst defaultType = computed((): string | undefined => {\n  if (Array.isArray(type)) {\n    return type.find((t) => t !== 'null') ?? 'string'\n  }\n  return type\n})\n\n// ---------------------------------------------------------------------------\n// Event handlers\n\n/**\n * Handles value changes during typing.\n */\nconst handleChange = (value: string): void => {\n  if (!alwaysEmitChange && value === serializeValue(modelValue)) {\n    return\n  }\n\n  // Use custom handler or emit update\n  if (handleFieldChange) {\n    handleFieldChange(value)\n  } else {\n    emit('update:modelValue', value)\n  }\n}\n\n/**\n * Handles form submission (enter key or blur with emitOnBlur).\n */\nconst handleSubmit = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\n}\n\n/**\n * Handles model value updates from select components.\n */\nconst handleSelectChange = (value: string): void =>\n  emit('update:modelValue', value)\n\n// ---------------------------------------------------------------------------\n// CodeMirror setup\n\n/**\n * Build extensions array.\n * Note: Extensions are not reactive after initialization.\n */\nconst buildExtensions = (): Extension[] => {\n  const extensionsList: Extension[] = [...extensions]\n\n  if (colorPicker) {\n    extensionsList.push(colorPickerExtension)\n  }\n\n  return extensionsList\n}\n\n/**\n * Reactive pill plugin for environment variable visualization.\n */\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n/**\n * Combined extensions for CodeMirror.\n */\nconst codeMirrorExtensions = computed((): Extension[] => [\n  ...buildExtensions(),\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\n/** Converts the model value to a string for CodeMirror */\nconst serializeValue = (value: CodeInputModelValue): string => {\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\nconst { codeMirror, setCodeMirrorContent } = useCodeMirror({\n  content: toRef(() => serializeValue(modelValue)),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => {\n    isFocused.value = true\n  },\n  onBlur: handleBlur,\n  codeMirrorRef,\n  disableTabIndent: toRef(() => disableTabIndent),\n  disableEnter: toRef(() => disableEnter),\n  disableCloseBrackets: toRef(() => disableCloseBrackets),\n  lineNumbers: toRef(() => lineNumbers),\n  language: toRef(() => language),\n  lint: toRef(() => lint),\n  extensions: codeMirrorExtensions,\n  placeholder: toRef(() => placeholder),\n})\n\n/**\n * Handle autofocus attribute.\n */\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\n// ---------------------------------------------------------------------------\n// Environment variable dropdown\n\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n/**\n * Determines if the environment variable dropdown should be visible.\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    Boolean(environment)\n  )\n})\n\n// ---------------------------------------------------------------------------\n// Keyboard event handling\n\n/**\n * Handles keyboard navigation for dropdown and form submission.\n */\nconst handleKeyDown = (key: string, event: KeyboardEvent): void => {\n  if (showDropdown.value) {\n    if (key === 'down' || key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey(key)\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n    return\n  }\n\n  if (key === 'escape' && !disableTabIndent) {\n    event.stopPropagation()\n  }\n\n  if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '', event)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n\ndefineExpose({\n  /**\n   * Focus the codemirror element\n   *\n   * @param cursorAtEnd boolean place the cursor at the end of the input\n   */\n  focus: (position?: 'start' | 'end' | number) => {\n    if (!codeMirror.value) {\n      return\n    }\n    codeMirror.value.focus()\n\n    if (!isDefined(position)) {\n      return\n    }\n\n    const anchor = (() => {\n      if (position === 'start') {\n        return 0\n      }\n      if (position === 'end') {\n        return codeMirror.value.state.doc.length\n      }\n      return position\n    })()\n\n    // Move the cursor to the specified position\n    codeMirror.value.dispatch({\n      selection: { anchor },\n      scrollIntoView: true,\n    })\n  },\n  isFocused,\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\n  cursorPosition: () => codeMirror.value?.state.selection.main.head,\n  serializeValue,\n})\n</script>\n\n<template>\n  <!-- Disabled mode: read-only text display -->\n  <div\n    v-if=\"disabled\"\n    class=\"text-c-2 flex cursor-default items-center justify-center\"\n    :class=\"{\n      'font-code pr-2 pl-1 text-base': layout === 'modal',\n      'px-2': layout !== 'modal',\n      'line-through': linethrough,\n    }\"\n    data-testid=\"code-input-disabled\">\n    <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n  </div>\n\n  <!-- Enum mode: select dropdown with predefined values -->\n  <DataTableInputSelect\n    v-else-if=\"enumProp?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :type=\"defaultType\"\n    :value=\"enumProp\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Boolean mode: select dropdown with true/false (and optionally null) -->\n  <DataTableInputSelect\n    v-else-if=\"isBooleanMode\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"booleanOptions\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Examples mode: select dropdown with example values -->\n  <DataTableInputSelect\n    v-else-if=\"examples?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"examples\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Editor mode: CodeMirror with environment variable support -->\n  <div\n    v-else\n    :id=\"componentId\"\n    v-bind=\"$attrs\"\n    ref=\"codeMirrorRef\"\n    class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n    :class=\"{\n      'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n        lineWrapping,\n      'flow-code-input--error': error,\n      'line-through': linethrough,\n    }\"\n    @keydown.down.stop=\"handleKeyDown('down', $event)\"\n    @keydown.enter=\"handleKeyDown('enter', $event)\"\n    @keydown.escape=\"handleKeyDown('escape', $event)\"\n    @keydown.up.stop=\"handleKeyDown('up', $event)\">\n    <!-- Tab exit hint (shown when focused) -->\n    <div\n      v-if=\"!disableTabIndent\"\n      class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n      role=\"alert\">\n      Press\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n    </div>\n  </div>\n\n  <!-- Warning slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n\n  <!-- Icon slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n\n  <!-- Required indicator -->\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n\n  <!-- Environment variable autocomplete dropdown -->\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown && environment\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n   Deep styling for customizing Codemirror\n  */\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  color: var(--scalar-color-1) !important;\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n}\n.light-mode .cm-pill {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"CodeInput.vue.js","names":[],"sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeInputModelValue =\n  | string\n  | number\n  | boolean\n  | Array<string | number | boolean>\n  | Record<string, unknown>\n\n/**\n * CodeInput\n *\n * A versatile input component that adapts its rendering based on props:\n * - Disabled mode: Read-only text display\n * - Select mode: Dropdown for enums, booleans, or examples\n * - Editor mode: CodeMirror with environment variable support\n *\n * Type `{{` to trigger autocomplete for environment variables and runtime context functions\n * (for example `{{$guid}}`) when an environment is provided.\n * It takes in any data but always will emit a string value,\n * this string should then be parsed in accordance to the schema or content type.\n *\n * @example\n * ```vue\n * <!-- Basic input with environment variables -->\n * <CodeInput v-model=\"value\" :environment=\"env\" />\n *\n * <!-- Boolean select -->\n * <CodeInput v-model=\"flag\" type=\"boolean\" />\n *\n * <!-- JSON editor with linting -->\n * <CodeInput v-model=\"data\" language=\"json\" :lint=\"true\" />\n * ```\n */\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport {\n  CONTEXT_FUNCTION_NAMES,\n  getContextFunctionComment,\n  isContextFunctionName,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport DataTableInputSelect from '@/v2/components/data-table/DataTableInputSelect.vue'\nimport EnvironmentVariableDropdown from '@/v2/features/environments/components/EnvironmentVariablesDropdown.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { backspaceCommand, pillPlugin } from './code-variable-widget'\n\ntype Props = {\n  modelValue: CodeInputModelValue\n  /** Environment for variable substitution. Pass undefined to disable environment variables */\n  environment: XScalarEnvironment | undefined\n  /** Type of the input value, affects rendering mode for booleans */\n  type?: string | string[]\n  /** Render as disabled text display */\n  disabled?: boolean\n  /** Show error styling */\n  error?: boolean\n  /** Layout context affects styling and behavior */\n  layout?: ClientLayout\n  /** Predefined enum values, triggers select mode */\n  enum?: string[]\n  /** Example values, triggers select mode */\n  examples?: string[]\n  /** Default value to show in select mode */\n  default?: Props['modelValue']\n  /** Allow null in boolean select options */\n  nullable?: boolean\n  /** Placeholder text for empty input */\n  placeholder?: string\n  /** Show required indicator */\n  required?: boolean\n  /** Enable color picker extension */\n  colorPicker?: boolean\n  /** Show line numbers in editor */\n  lineNumbers?: boolean\n  /** Enable linting */\n  lint?: boolean\n  /** Enable line wrapping */\n  lineWrapping?: boolean\n  /** CodeMirror language mode */\n  language?: CodeMirrorLanguage\n  /** Additional CodeMirror extensions */\n  extensions?: Extension[]\n  /** Disable tab key for indentation */\n  disableTabIndent?: boolean\n  /** Disable enter key */\n  disableEnter?: boolean\n  /** Disable automatic bracket closing */\n  disableCloseBrackets?: boolean\n  /** Emit submit event on blur */\n  emitOnBlur?: boolean\n  /** Enable environment variable pills */\n  withVariables?: boolean\n  /** Emit change event even if the value is the same */\n  alwaysEmitChange?: boolean\n  /** Custom change handler, prevents default emit */\n  handleFieldChange?: (value: string) => void\n  /** Custom submit handler, prevents default emit */\n  handleFieldSubmit?: (value: string) => void\n  /** Put a linethrough on the input text */\n  linethrough?: boolean\n}\n\nconst {\n  modelValue,\n  environment,\n  type,\n  disabled = false,\n  error = false,\n  layout = 'desktop',\n  enum: enumProp,\n  examples,\n  default: defaultProp,\n  nullable = false,\n  placeholder,\n  required,\n  colorPicker = false,\n  lineNumbers = false,\n  lint = false,\n  lineWrapping = false,\n  language,\n  extensions = [],\n  disableTabIndent = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  emitOnBlur = true,\n  alwaysEmitChange = false,\n  withVariables = true,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\n}>()\n\n// ---------------------------------------------------------------------------\n// Component identity and focus state\n\nconst attrs = useAttrs() as { id?: string }\nconst componentId = attrs.id || `id-${nanoid()}`\nconst isFocused = ref(false)\n\n// ---------------------------------------------------------------------------\n// Rendering mode detection\n\n/**\n * Determines if we should render a select dropdown for boolean types.\n */\nconst isBooleanMode = computed((): boolean => {\n  if (enumProp?.length) {\n    return false\n  }\n  return type === 'boolean' || (Array.isArray(type) && type.includes('boolean'))\n})\n\n/**\n * Options for boolean select mode.\n */\nconst booleanOptions = computed((): string[] =>\n  nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\n/**\n * Default type when dealing with type arrays.\n * Finds the first non-null type.\n */\nconst defaultType = computed((): string | undefined => {\n  if (Array.isArray(type)) {\n    return type.find((t) => t !== 'null') ?? 'string'\n  }\n  return type\n})\n\n// ---------------------------------------------------------------------------\n// Event handlers\n\n/**\n * Handles value changes during typing.\n */\nconst handleChange = (value: string): void => {\n  if (!alwaysEmitChange && value === serializeValue(modelValue)) {\n    return\n  }\n\n  // Use custom handler or emit update\n  if (handleFieldChange) {\n    handleFieldChange(value)\n  } else {\n    emit('update:modelValue', value)\n  }\n}\n\n/**\n * Handles form submission (enter key or blur with emitOnBlur).\n */\nconst handleSubmit = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\n}\n\n/**\n * Handles model value updates from select components.\n */\nconst handleSelectChange = (value: string): void =>\n  emit('update:modelValue', value)\n\n// ---------------------------------------------------------------------------\n// CodeMirror setup\n\n/**\n * Build extensions array.\n * Note: Extensions are not reactive after initialization.\n */\nconst buildExtensions = (): Extension[] => {\n  const extensionsList: Extension[] = [...extensions]\n\n  if (colorPicker) {\n    extensionsList.push(colorPickerExtension)\n  }\n\n  return extensionsList\n}\n\n/**\n * Reactive pill plugin for environment variable visualization.\n */\nconst contextFunctionDropdownItems = computed(() =>\n  CONTEXT_FUNCTION_NAMES.map((key) => ({\n    key,\n    description: getContextFunctionComment(key),\n  })),\n)\n\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isContextFunctionName,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n/**\n * Combined extensions for CodeMirror.\n */\nconst codeMirrorExtensions = computed((): Extension[] => [\n  ...buildExtensions(),\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\n/** Converts the model value to a string for CodeMirror */\nconst serializeValue = (value: CodeInputModelValue): string => {\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\nconst { codeMirror, setCodeMirrorContent } = useCodeMirror({\n  content: toRef(() => serializeValue(modelValue)),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => {\n    isFocused.value = true\n  },\n  onBlur: handleBlur,\n  codeMirrorRef,\n  disableTabIndent: toRef(() => disableTabIndent),\n  disableEnter: toRef(() => disableEnter),\n  disableCloseBrackets: toRef(() => disableCloseBrackets),\n  lineNumbers: toRef(() => lineNumbers),\n  language: toRef(() => language),\n  lint: toRef(() => lint),\n  extensions: codeMirrorExtensions,\n  placeholder: toRef(() => placeholder),\n})\n\n/**\n * Handle autofocus attribute.\n */\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\n// ---------------------------------------------------------------------------\n// Environment variable dropdown\n\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n/**\n * Determines if the environment variable dropdown should be visible.\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    Boolean(environment)\n  )\n})\n\n// ---------------------------------------------------------------------------\n// Keyboard event handling\n\n/**\n * Handles keyboard navigation for dropdown and form submission.\n */\nconst handleKeyDown = (key: string, event: KeyboardEvent): void => {\n  if (showDropdown.value) {\n    if (key === 'down' || key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey(key)\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n    return\n  }\n\n  if (key === 'escape' && !disableTabIndent) {\n    event.stopPropagation()\n  }\n\n  if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '', event)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n\ndefineExpose({\n  /**\n   * Focus the codemirror element\n   *\n   * @param cursorAtEnd boolean place the cursor at the end of the input\n   */\n  focus: (position?: 'start' | 'end' | number) => {\n    if (!codeMirror.value) {\n      return\n    }\n    codeMirror.value.focus()\n\n    if (!isDefined(position)) {\n      return\n    }\n\n    const anchor = (() => {\n      if (position === 'start') {\n        return 0\n      }\n      if (position === 'end') {\n        return codeMirror.value.state.doc.length\n      }\n      return position\n    })()\n\n    // Move the cursor to the specified position\n    codeMirror.value.dispatch({\n      selection: { anchor },\n      scrollIntoView: true,\n    })\n  },\n  isFocused,\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\n  cursorPosition: () => codeMirror.value?.state.selection.main.head,\n  serializeValue,\n})\n</script>\n\n<template>\n  <!-- Disabled mode: read-only text display -->\n  <div\n    v-if=\"disabled\"\n    class=\"text-c-2 flex cursor-default items-center justify-center\"\n    :class=\"{\n      'font-code pr-2 pl-1 text-base': layout === 'modal',\n      'px-2': layout !== 'modal',\n      'line-through': linethrough,\n    }\"\n    data-testid=\"code-input-disabled\">\n    <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n  </div>\n\n  <!-- Enum mode: select dropdown with predefined values -->\n  <DataTableInputSelect\n    v-else-if=\"enumProp?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :type=\"defaultType\"\n    :value=\"enumProp\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Boolean mode: select dropdown with true/false (and optionally null) -->\n  <DataTableInputSelect\n    v-else-if=\"isBooleanMode\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"booleanOptions\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Examples mode: select dropdown with example values -->\n  <DataTableInputSelect\n    v-else-if=\"examples?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"examples\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Editor mode: CodeMirror with environment variable support -->\n  <div\n    v-else\n    :id=\"componentId\"\n    v-bind=\"$attrs\"\n    ref=\"codeMirrorRef\"\n    class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n    :class=\"{\n      'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n        lineWrapping,\n      'flow-code-input--error': error,\n      'line-through': linethrough,\n    }\"\n    @keydown.down.stop=\"handleKeyDown('down', $event)\"\n    @keydown.enter=\"handleKeyDown('enter', $event)\"\n    @keydown.escape=\"handleKeyDown('escape', $event)\"\n    @keydown.up.stop=\"handleKeyDown('up', $event)\">\n    <!-- Tab exit hint (shown when focused) -->\n    <div\n      v-if=\"!disableTabIndent\"\n      class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n      role=\"alert\">\n      Press\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n    </div>\n  </div>\n\n  <!-- Warning slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n\n  <!-- Icon slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n\n  <!-- Required indicator -->\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n\n  <!-- Environment variable autocomplete dropdown -->\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown && environment\"\n    ref=\"dropdownRef\"\n    :contextFunctionItems=\"contextFunctionDropdownItems\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n   Deep styling for customizing Codemirror\n  */\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  color: var(--scalar-color-1) !important;\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n}\n.light-mode .cm-pill {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill--context-fn {\n  border: 1px dashed color-mix(in srgb, var(--scalar-color-3), transparent 35%);\n  padding: 0px 8px;\n}\n.light-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 40%\n  ) !important;\n}\n.dark-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 55%\n  ) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":""}

package/dist/v2/components/code-input/CodeInput.vue.script.js

@@ -2,6 +2,7 @@ import DataTableInputSelect_default from "../data-table/DataTableInputSelect.vue
 import EnvironmentVariablesDropdown_default from "../../features/environments/components/EnvironmentVariablesDropdown.vue.js";
 import { backspaceCommand, pillPlugin } from "./code-variable-widget.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, toRef, unref, useAttrs, watch, withKeys, withModifiers } from "vue";
+import { CONTEXT_FUNCTION_NAMES, getContextFunctionComment, isContextFunctionName } from "@scalar/workspace-store/request-example";
 import { isDefined } from "@scalar/helpers/array/is-defined";
 import { colorPicker, useCodeMirror, useDropdown } from "@scalar/use-codemirror";
 import { nanoid } from "nanoid";
@@ -181,8 +182,13 @@ var CodeInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		/**
 		* Reactive pill plugin for environment variable visualization.
 		*/
+		const contextFunctionDropdownItems = computed(() => CONTEXT_FUNCTION_NAMES.map((key) => ({
+			key,
+			description: getContextFunctionComment(key)
+		})));
 		const pillPluginExtension = computed(() => pillPlugin({
 			environment: __props.environment,
+			isContextFunctionName,
 			isReadOnly: __props.layout === "modal"
 		}));
 		/**
@@ -361,6 +367,7 @@ var CodeInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					key: 8,
 					ref_key: "dropdownRef",
 					ref: dropdownRef,
+					contextFunctionItems: contextFunctionDropdownItems.value,
 					dropdownPosition: dropdownPosition.value,
 					environment: __props.environment,
 					query: dropdownQuery.value,
@@ -370,6 +377,7 @@ var CodeInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					})),
 					onSelect: unref(handleDropdownSelect)
 				}, null, 8, [
+					"contextFunctionItems",
 					"dropdownPosition",
 					"environment",
 					"query",

package/dist/v2/components/code-input/CodeInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.vue.script.js","names":["$attrs","$slots"],"sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeInputModelValue =\n  | string\n  | number\n  | boolean\n  | Array<string | number | boolean>\n  | Record<string, unknown>\n\n/**\n * CodeInput\n *\n * A versatile input component that adapts its rendering based on props:\n * - Disabled mode: Read-only text display\n * - Select mode: Dropdown for enums, booleans, or examples\n * - Editor mode: CodeMirror with environment variable support\n *\n * Type `{{` to trigger environment variable autocomplete when an environment is provided.\n * It takes in any data but always will emit a string value,\n * this string should then be parsed in accordance to the schema or content type.\n *\n * @example\n * ```vue\n * <!-- Basic input with environment variables -->\n * <CodeInput v-model=\"value\" :environment=\"env\" />\n *\n * <!-- Boolean select -->\n * <CodeInput v-model=\"flag\" type=\"boolean\" />\n *\n * <!-- JSON editor with linting -->\n * <CodeInput v-model=\"data\" language=\"json\" :lint=\"true\" />\n * ```\n */\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport DataTableInputSelect from '@/v2/components/data-table/DataTableInputSelect.vue'\nimport EnvironmentVariableDropdown from '@/v2/features/environments/components/EnvironmentVariablesDropdown.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { backspaceCommand, pillPlugin } from './code-variable-widget'\n\ntype Props = {\n  modelValue: CodeInputModelValue\n  /** Environment for variable substitution. Pass undefined to disable environment variables */\n  environment: XScalarEnvironment | undefined\n  /** Type of the input value, affects rendering mode for booleans */\n  type?: string | string[]\n  /** Render as disabled text display */\n  disabled?: boolean\n  /** Show error styling */\n  error?: boolean\n  /** Layout context affects styling and behavior */\n  layout?: ClientLayout\n  /** Predefined enum values, triggers select mode */\n  enum?: string[]\n  /** Example values, triggers select mode */\n  examples?: string[]\n  /** Default value to show in select mode */\n  default?: Props['modelValue']\n  /** Allow null in boolean select options */\n  nullable?: boolean\n  /** Placeholder text for empty input */\n  placeholder?: string\n  /** Show required indicator */\n  required?: boolean\n  /** Enable color picker extension */\n  colorPicker?: boolean\n  /** Show line numbers in editor */\n  lineNumbers?: boolean\n  /** Enable linting */\n  lint?: boolean\n  /** Enable line wrapping */\n  lineWrapping?: boolean\n  /** CodeMirror language mode */\n  language?: CodeMirrorLanguage\n  /** Additional CodeMirror extensions */\n  extensions?: Extension[]\n  /** Disable tab key for indentation */\n  disableTabIndent?: boolean\n  /** Disable enter key */\n  disableEnter?: boolean\n  /** Disable automatic bracket closing */\n  disableCloseBrackets?: boolean\n  /** Emit submit event on blur */\n  emitOnBlur?: boolean\n  /** Enable environment variable pills */\n  withVariables?: boolean\n  /** Emit change event even if the value is the same */\n  alwaysEmitChange?: boolean\n  /** Custom change handler, prevents default emit */\n  handleFieldChange?: (value: string) => void\n  /** Custom submit handler, prevents default emit */\n  handleFieldSubmit?: (value: string) => void\n  /** Put a linethrough on the input text */\n  linethrough?: boolean\n}\n\nconst {\n  modelValue,\n  environment,\n  type,\n  disabled = false,\n  error = false,\n  layout = 'desktop',\n  enum: enumProp,\n  examples,\n  default: defaultProp,\n  nullable = false,\n  placeholder,\n  required,\n  colorPicker = false,\n  lineNumbers = false,\n  lint = false,\n  lineWrapping = false,\n  language,\n  extensions = [],\n  disableTabIndent = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  emitOnBlur = true,\n  alwaysEmitChange = false,\n  withVariables = true,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\n}>()\n\n// ---------------------------------------------------------------------------\n// Component identity and focus state\n\nconst attrs = useAttrs() as { id?: string }\nconst componentId = attrs.id || `id-${nanoid()}`\nconst isFocused = ref(false)\n\n// ---------------------------------------------------------------------------\n// Rendering mode detection\n\n/**\n * Determines if we should render a select dropdown for boolean types.\n */\nconst isBooleanMode = computed((): boolean => {\n  if (enumProp?.length) {\n    return false\n  }\n  return type === 'boolean' || (Array.isArray(type) && type.includes('boolean'))\n})\n\n/**\n * Options for boolean select mode.\n */\nconst booleanOptions = computed((): string[] =>\n  nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\n/**\n * Default type when dealing with type arrays.\n * Finds the first non-null type.\n */\nconst defaultType = computed((): string | undefined => {\n  if (Array.isArray(type)) {\n    return type.find((t) => t !== 'null') ?? 'string'\n  }\n  return type\n})\n\n// ---------------------------------------------------------------------------\n// Event handlers\n\n/**\n * Handles value changes during typing.\n */\nconst handleChange = (value: string): void => {\n  if (!alwaysEmitChange && value === serializeValue(modelValue)) {\n    return\n  }\n\n  // Use custom handler or emit update\n  if (handleFieldChange) {\n    handleFieldChange(value)\n  } else {\n    emit('update:modelValue', value)\n  }\n}\n\n/**\n * Handles form submission (enter key or blur with emitOnBlur).\n */\nconst handleSubmit = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\n}\n\n/**\n * Handles model value updates from select components.\n */\nconst handleSelectChange = (value: string): void =>\n  emit('update:modelValue', value)\n\n// ---------------------------------------------------------------------------\n// CodeMirror setup\n\n/**\n * Build extensions array.\n * Note: Extensions are not reactive after initialization.\n */\nconst buildExtensions = (): Extension[] => {\n  const extensionsList: Extension[] = [...extensions]\n\n  if (colorPicker) {\n    extensionsList.push(colorPickerExtension)\n  }\n\n  return extensionsList\n}\n\n/**\n * Reactive pill plugin for environment variable visualization.\n */\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n/**\n * Combined extensions for CodeMirror.\n */\nconst codeMirrorExtensions = computed((): Extension[] => [\n  ...buildExtensions(),\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\n/** Converts the model value to a string for CodeMirror */\nconst serializeValue = (value: CodeInputModelValue): string => {\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\nconst { codeMirror, setCodeMirrorContent } = useCodeMirror({\n  content: toRef(() => serializeValue(modelValue)),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => {\n    isFocused.value = true\n  },\n  onBlur: handleBlur,\n  codeMirrorRef,\n  disableTabIndent: toRef(() => disableTabIndent),\n  disableEnter: toRef(() => disableEnter),\n  disableCloseBrackets: toRef(() => disableCloseBrackets),\n  lineNumbers: toRef(() => lineNumbers),\n  language: toRef(() => language),\n  lint: toRef(() => lint),\n  extensions: codeMirrorExtensions,\n  placeholder: toRef(() => placeholder),\n})\n\n/**\n * Handle autofocus attribute.\n */\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\n// ---------------------------------------------------------------------------\n// Environment variable dropdown\n\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n/**\n * Determines if the environment variable dropdown should be visible.\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    Boolean(environment)\n  )\n})\n\n// ---------------------------------------------------------------------------\n// Keyboard event handling\n\n/**\n * Handles keyboard navigation for dropdown and form submission.\n */\nconst handleKeyDown = (key: string, event: KeyboardEvent): void => {\n  if (showDropdown.value) {\n    if (key === 'down' || key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey(key)\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n    return\n  }\n\n  if (key === 'escape' && !disableTabIndent) {\n    event.stopPropagation()\n  }\n\n  if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '', event)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n\ndefineExpose({\n  /**\n   * Focus the codemirror element\n   *\n   * @param cursorAtEnd boolean place the cursor at the end of the input\n   */\n  focus: (position?: 'start' | 'end' | number) => {\n    if (!codeMirror.value) {\n      return\n    }\n    codeMirror.value.focus()\n\n    if (!isDefined(position)) {\n      return\n    }\n\n    const anchor = (() => {\n      if (position === 'start') {\n        return 0\n      }\n      if (position === 'end') {\n        return codeMirror.value.state.doc.length\n      }\n      return position\n    })()\n\n    // Move the cursor to the specified position\n    codeMirror.value.dispatch({\n      selection: { anchor },\n      scrollIntoView: true,\n    })\n  },\n  isFocused,\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\n  cursorPosition: () => codeMirror.value?.state.selection.main.head,\n  serializeValue,\n})\n</script>\n\n<template>\n  <!-- Disabled mode: read-only text display -->\n  <div\n    v-if=\"disabled\"\n    class=\"text-c-2 flex cursor-default items-center justify-center\"\n    :class=\"{\n      'font-code pr-2 pl-1 text-base': layout === 'modal',\n      'px-2': layout !== 'modal',\n      'line-through': linethrough,\n    }\"\n    data-testid=\"code-input-disabled\">\n    <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n  </div>\n\n  <!-- Enum mode: select dropdown with predefined values -->\n  <DataTableInputSelect\n    v-else-if=\"enumProp?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :type=\"defaultType\"\n    :value=\"enumProp\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Boolean mode: select dropdown with true/false (and optionally null) -->\n  <DataTableInputSelect\n    v-else-if=\"isBooleanMode\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"booleanOptions\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Examples mode: select dropdown with example values -->\n  <DataTableInputSelect\n    v-else-if=\"examples?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"examples\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Editor mode: CodeMirror with environment variable support -->\n  <div\n    v-else\n    :id=\"componentId\"\n    v-bind=\"$attrs\"\n    ref=\"codeMirrorRef\"\n    class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n    :class=\"{\n      'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n        lineWrapping,\n      'flow-code-input--error': error,\n      'line-through': linethrough,\n    }\"\n    @keydown.down.stop=\"handleKeyDown('down', $event)\"\n    @keydown.enter=\"handleKeyDown('enter', $event)\"\n    @keydown.escape=\"handleKeyDown('escape', $event)\"\n    @keydown.up.stop=\"handleKeyDown('up', $event)\">\n    <!-- Tab exit hint (shown when focused) -->\n    <div\n      v-if=\"!disableTabIndent\"\n      class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n      role=\"alert\">\n      Press\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n    </div>\n  </div>\n\n  <!-- Warning slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n\n  <!-- Icon slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n\n  <!-- Required indicator -->\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n\n  <!-- Environment variable autocomplete dropdown -->\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown && environment\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n   Deep styling for customizing Codemirror\n  */\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  color: var(--scalar-color-1) !important;\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n}\n.light-mode .cm-pill {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"CodeInput.vue.script.js","names":["$attrs","$slots"],"sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeInputModelValue =\n  | string\n  | number\n  | boolean\n  | Array<string | number | boolean>\n  | Record<string, unknown>\n\n/**\n * CodeInput\n *\n * A versatile input component that adapts its rendering based on props:\n * - Disabled mode: Read-only text display\n * - Select mode: Dropdown for enums, booleans, or examples\n * - Editor mode: CodeMirror with environment variable support\n *\n * Type `{{` to trigger autocomplete for environment variables and runtime context functions\n * (for example `{{$guid}}`) when an environment is provided.\n * It takes in any data but always will emit a string value,\n * this string should then be parsed in accordance to the schema or content type.\n *\n * @example\n * ```vue\n * <!-- Basic input with environment variables -->\n * <CodeInput v-model=\"value\" :environment=\"env\" />\n *\n * <!-- Boolean select -->\n * <CodeInput v-model=\"flag\" type=\"boolean\" />\n *\n * <!-- JSON editor with linting -->\n * <CodeInput v-model=\"data\" language=\"json\" :lint=\"true\" />\n * ```\n */\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport {\n  CONTEXT_FUNCTION_NAMES,\n  getContextFunctionComment,\n  isContextFunctionName,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport DataTableInputSelect from '@/v2/components/data-table/DataTableInputSelect.vue'\nimport EnvironmentVariableDropdown from '@/v2/features/environments/components/EnvironmentVariablesDropdown.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { backspaceCommand, pillPlugin } from './code-variable-widget'\n\ntype Props = {\n  modelValue: CodeInputModelValue\n  /** Environment for variable substitution. Pass undefined to disable environment variables */\n  environment: XScalarEnvironment | undefined\n  /** Type of the input value, affects rendering mode for booleans */\n  type?: string | string[]\n  /** Render as disabled text display */\n  disabled?: boolean\n  /** Show error styling */\n  error?: boolean\n  /** Layout context affects styling and behavior */\n  layout?: ClientLayout\n  /** Predefined enum values, triggers select mode */\n  enum?: string[]\n  /** Example values, triggers select mode */\n  examples?: string[]\n  /** Default value to show in select mode */\n  default?: Props['modelValue']\n  /** Allow null in boolean select options */\n  nullable?: boolean\n  /** Placeholder text for empty input */\n  placeholder?: string\n  /** Show required indicator */\n  required?: boolean\n  /** Enable color picker extension */\n  colorPicker?: boolean\n  /** Show line numbers in editor */\n  lineNumbers?: boolean\n  /** Enable linting */\n  lint?: boolean\n  /** Enable line wrapping */\n  lineWrapping?: boolean\n  /** CodeMirror language mode */\n  language?: CodeMirrorLanguage\n  /** Additional CodeMirror extensions */\n  extensions?: Extension[]\n  /** Disable tab key for indentation */\n  disableTabIndent?: boolean\n  /** Disable enter key */\n  disableEnter?: boolean\n  /** Disable automatic bracket closing */\n  disableCloseBrackets?: boolean\n  /** Emit submit event on blur */\n  emitOnBlur?: boolean\n  /** Enable environment variable pills */\n  withVariables?: boolean\n  /** Emit change event even if the value is the same */\n  alwaysEmitChange?: boolean\n  /** Custom change handler, prevents default emit */\n  handleFieldChange?: (value: string) => void\n  /** Custom submit handler, prevents default emit */\n  handleFieldSubmit?: (value: string) => void\n  /** Put a linethrough on the input text */\n  linethrough?: boolean\n}\n\nconst {\n  modelValue,\n  environment,\n  type,\n  disabled = false,\n  error = false,\n  layout = 'desktop',\n  enum: enumProp,\n  examples,\n  default: defaultProp,\n  nullable = false,\n  placeholder,\n  required,\n  colorPicker = false,\n  lineNumbers = false,\n  lint = false,\n  lineWrapping = false,\n  language,\n  extensions = [],\n  disableTabIndent = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  emitOnBlur = true,\n  alwaysEmitChange = false,\n  withVariables = true,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\n}>()\n\n// ---------------------------------------------------------------------------\n// Component identity and focus state\n\nconst attrs = useAttrs() as { id?: string }\nconst componentId = attrs.id || `id-${nanoid()}`\nconst isFocused = ref(false)\n\n// ---------------------------------------------------------------------------\n// Rendering mode detection\n\n/**\n * Determines if we should render a select dropdown for boolean types.\n */\nconst isBooleanMode = computed((): boolean => {\n  if (enumProp?.length) {\n    return false\n  }\n  return type === 'boolean' || (Array.isArray(type) && type.includes('boolean'))\n})\n\n/**\n * Options for boolean select mode.\n */\nconst booleanOptions = computed((): string[] =>\n  nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\n/**\n * Default type when dealing with type arrays.\n * Finds the first non-null type.\n */\nconst defaultType = computed((): string | undefined => {\n  if (Array.isArray(type)) {\n    return type.find((t) => t !== 'null') ?? 'string'\n  }\n  return type\n})\n\n// ---------------------------------------------------------------------------\n// Event handlers\n\n/**\n * Handles value changes during typing.\n */\nconst handleChange = (value: string): void => {\n  if (!alwaysEmitChange && value === serializeValue(modelValue)) {\n    return\n  }\n\n  // Use custom handler or emit update\n  if (handleFieldChange) {\n    handleFieldChange(value)\n  } else {\n    emit('update:modelValue', value)\n  }\n}\n\n/**\n * Handles form submission (enter key or blur with emitOnBlur).\n */\nconst handleSubmit = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\n}\n\n/**\n * Handles model value updates from select components.\n */\nconst handleSelectChange = (value: string): void =>\n  emit('update:modelValue', value)\n\n// ---------------------------------------------------------------------------\n// CodeMirror setup\n\n/**\n * Build extensions array.\n * Note: Extensions are not reactive after initialization.\n */\nconst buildExtensions = (): Extension[] => {\n  const extensionsList: Extension[] = [...extensions]\n\n  if (colorPicker) {\n    extensionsList.push(colorPickerExtension)\n  }\n\n  return extensionsList\n}\n\n/**\n * Reactive pill plugin for environment variable visualization.\n */\nconst contextFunctionDropdownItems = computed(() =>\n  CONTEXT_FUNCTION_NAMES.map((key) => ({\n    key,\n    description: getContextFunctionComment(key),\n  })),\n)\n\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isContextFunctionName,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n/**\n * Combined extensions for CodeMirror.\n */\nconst codeMirrorExtensions = computed((): Extension[] => [\n  ...buildExtensions(),\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\n/** Converts the model value to a string for CodeMirror */\nconst serializeValue = (value: CodeInputModelValue): string => {\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\nconst { codeMirror, setCodeMirrorContent } = useCodeMirror({\n  content: toRef(() => serializeValue(modelValue)),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => {\n    isFocused.value = true\n  },\n  onBlur: handleBlur,\n  codeMirrorRef,\n  disableTabIndent: toRef(() => disableTabIndent),\n  disableEnter: toRef(() => disableEnter),\n  disableCloseBrackets: toRef(() => disableCloseBrackets),\n  lineNumbers: toRef(() => lineNumbers),\n  language: toRef(() => language),\n  lint: toRef(() => lint),\n  extensions: codeMirrorExtensions,\n  placeholder: toRef(() => placeholder),\n})\n\n/**\n * Handle autofocus attribute.\n */\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\n// ---------------------------------------------------------------------------\n// Environment variable dropdown\n\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n/**\n * Determines if the environment variable dropdown should be visible.\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    Boolean(environment)\n  )\n})\n\n// ---------------------------------------------------------------------------\n// Keyboard event handling\n\n/**\n * Handles keyboard navigation for dropdown and form submission.\n */\nconst handleKeyDown = (key: string, event: KeyboardEvent): void => {\n  if (showDropdown.value) {\n    if (key === 'down' || key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey(key)\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n    return\n  }\n\n  if (key === 'escape' && !disableTabIndent) {\n    event.stopPropagation()\n  }\n\n  if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '', event)\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n\ndefineExpose({\n  /**\n   * Focus the codemirror element\n   *\n   * @param cursorAtEnd boolean place the cursor at the end of the input\n   */\n  focus: (position?: 'start' | 'end' | number) => {\n    if (!codeMirror.value) {\n      return\n    }\n    codeMirror.value.focus()\n\n    if (!isDefined(position)) {\n      return\n    }\n\n    const anchor = (() => {\n      if (position === 'start') {\n        return 0\n      }\n      if (position === 'end') {\n        return codeMirror.value.state.doc.length\n      }\n      return position\n    })()\n\n    // Move the cursor to the specified position\n    codeMirror.value.dispatch({\n      selection: { anchor },\n      scrollIntoView: true,\n    })\n  },\n  isFocused,\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\n  cursorPosition: () => codeMirror.value?.state.selection.main.head,\n  serializeValue,\n})\n</script>\n\n<template>\n  <!-- Disabled mode: read-only text display -->\n  <div\n    v-if=\"disabled\"\n    class=\"text-c-2 flex cursor-default items-center justify-center\"\n    :class=\"{\n      'font-code pr-2 pl-1 text-base': layout === 'modal',\n      'px-2': layout !== 'modal',\n      'line-through': linethrough,\n    }\"\n    data-testid=\"code-input-disabled\">\n    <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n  </div>\n\n  <!-- Enum mode: select dropdown with predefined values -->\n  <DataTableInputSelect\n    v-else-if=\"enumProp?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :type=\"defaultType\"\n    :value=\"enumProp\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Boolean mode: select dropdown with true/false (and optionally null) -->\n  <DataTableInputSelect\n    v-else-if=\"isBooleanMode\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"booleanOptions\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Examples mode: select dropdown with example values -->\n  <DataTableInputSelect\n    v-else-if=\"examples?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"examples\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Editor mode: CodeMirror with environment variable support -->\n  <div\n    v-else\n    :id=\"componentId\"\n    v-bind=\"$attrs\"\n    ref=\"codeMirrorRef\"\n    class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n    :class=\"{\n      'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n        lineWrapping,\n      'flow-code-input--error': error,\n      'line-through': linethrough,\n    }\"\n    @keydown.down.stop=\"handleKeyDown('down', $event)\"\n    @keydown.enter=\"handleKeyDown('enter', $event)\"\n    @keydown.escape=\"handleKeyDown('escape', $event)\"\n    @keydown.up.stop=\"handleKeyDown('up', $event)\">\n    <!-- Tab exit hint (shown when focused) -->\n    <div\n      v-if=\"!disableTabIndent\"\n      class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n      role=\"alert\">\n      Press\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n      <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n    </div>\n  </div>\n\n  <!-- Warning slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n\n  <!-- Icon slot (positioned absolutely) -->\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n\n  <!-- Required indicator -->\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n\n  <!-- Environment variable autocomplete dropdown -->\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown && environment\"\n    ref=\"dropdownRef\"\n    :contextFunctionItems=\"contextFunctionDropdownItems\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n   Deep styling for customizing Codemirror\n  */\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  color: var(--scalar-color-1) !important;\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n}\n.light-mode .cm-pill {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill--context-fn {\n  border: 1px dashed color-mix(in srgb, var(--scalar-color-3), transparent 35%);\n  padding: 0px 8px;\n}\n.light-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 40%\n  ) !important;\n}\n.dark-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 55%\n  ) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":"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"}

package/dist/{views/Collection/CollectionNavigation.vue.d.ts → v2/components/code-input/PillTooltipHost.vue.d.ts}

@@ -1,7 +1,8 @@
+import type { PillContext } from './pill-context';
 type __VLS_Props = {
-    isSticky: boolean;
+    context: PillContext;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-//# sourceMappingURL=CollectionNavigation.vue.d.ts.map
+//# sourceMappingURL=PillTooltipHost.vue.d.ts.map

package/dist/v2/components/code-input/PillTooltipHost.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillTooltipHost.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/code-input/PillTooltipHost.vue"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEjD,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,WAAW,CAAA;CACrB,CAAC;AA8EF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/components/code-input/PillTooltipHost.vue.js

@@ -0,0 +1,7 @@
+import PillTooltipHost_vue_vue_type_script_setup_true_lang_default from "./PillTooltipHost.vue.script.js";
+//#region src/v2/components/code-input/PillTooltipHost.vue
+var PillTooltipHost_default = PillTooltipHost_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PillTooltipHost_default as default };
+
+//# sourceMappingURL=PillTooltipHost.vue.js.map

package/dist/v2/components/code-input/PillTooltipHost.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillTooltipHost.vue.js","names":[],"sources":["../../../../src/v2/components/code-input/PillTooltipHost.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useTooltip } from '@scalar/components'\nimport { computed, h, ref, render } from 'vue'\n\nimport type { PillContext } from './pill-context'\n\nconst props = defineProps<{\n  context: PillContext\n}>()\n\ndefineOptions({ name: 'PillTooltipHost' })\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst isContextFn = props.context.type === 'contextFunction'\n\nconst contextTooltipHtml = computed(() => {\n  if (!isContextFn || typeof document === 'undefined') {\n    return ''\n  }\n  const el = document.createElement('div')\n  render(\n    h('div', { class: 'flex flex-col gap-1.5 text-left' }, [\n      h('span', {}, props.context.details),\n      h(\n        'div',\n        { class: 'text-[color:var(--scalar-color-3)] text-[10px] font-normal' },\n        'Computed at request execution',\n      ),\n    ]),\n    el,\n  )\n  return el.innerHTML\n})\n\nconst environmentTooltipText = computed(() =>\n  props.context.type === 'environment' ? props.context.value : '',\n)\n\nuseTooltip({\n  content: isContextFn ? contextTooltipHtml : environmentTooltipText,\n  contentTarget: isContextFn ? 'innerHTML' : 'textContent',\n  delay: 0,\n  placement: 'bottom-start',\n  offset: 6,\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    class=\"contents\">\n    <div class=\"flex items-center gap-1 whitespace-nowrap\">\n      <span>{{\n        props.context.type === 'environment'\n          ? props.context.name\n          : props.context.identifier\n      }}</span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/components/code-input/PillTooltipHost.vue.script.js

@@ -0,0 +1,40 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, h, openBlock, ref, render, toDisplayString } from "vue";
+import { useTooltip } from "@scalar/components";
+//#region src/v2/components/code-input/PillTooltipHost.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center gap-1 whitespace-nowrap" };
+var PillTooltipHost_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "PillTooltipHost",
+	__name: "PillTooltipHost",
+	props: { context: {} },
+	setup(__props) {
+		const props = __props;
+		const wrapperRef = ref(null);
+		const isContextFn = props.context.type === "contextFunction";
+		const contextTooltipHtml = computed(() => {
+			if (!isContextFn || typeof document === "undefined") return "";
+			const el = document.createElement("div");
+			render(h("div", { class: "flex flex-col gap-1.5 text-left" }, [h("span", {}, props.context.details), h("div", { class: "text-[color:var(--scalar-color-3)] text-[10px] font-normal" }, "Computed at request execution")]), el);
+			return el.innerHTML;
+		});
+		const environmentTooltipText = computed(() => props.context.type === "environment" ? props.context.value : "");
+		useTooltip({
+			content: isContextFn ? contextTooltipHtml : environmentTooltipText,
+			contentTarget: isContextFn ? "innerHTML" : "textContent",
+			delay: 0,
+			placement: "bottom-start",
+			offset: 6,
+			targetRef: computed(() => wrapperRef.value?.children?.[0] || wrapperRef.value || void 0)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: "contents"
+			}, [createElementVNode("div", _hoisted_1, [createElementVNode("span", null, toDisplayString(props.context.type === "environment" ? props.context.name : props.context.identifier), 1)])], 512);
+		};
+	}
+});
+//#endregion
+export { PillTooltipHost_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=PillTooltipHost.vue.script.js.map

package/dist/v2/components/code-input/PillTooltipHost.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillTooltipHost.vue.script.js","names":[],"sources":["../../../../src/v2/components/code-input/PillTooltipHost.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useTooltip } from '@scalar/components'\nimport { computed, h, ref, render } from 'vue'\n\nimport type { PillContext } from './pill-context'\n\nconst props = defineProps<{\n  context: PillContext\n}>()\n\ndefineOptions({ name: 'PillTooltipHost' })\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst isContextFn = props.context.type === 'contextFunction'\n\nconst contextTooltipHtml = computed(() => {\n  if (!isContextFn || typeof document === 'undefined') {\n    return ''\n  }\n  const el = document.createElement('div')\n  render(\n    h('div', { class: 'flex flex-col gap-1.5 text-left' }, [\n      h('span', {}, props.context.details),\n      h(\n        'div',\n        { class: 'text-[color:var(--scalar-color-3)] text-[10px] font-normal' },\n        'Computed at request execution',\n      ),\n    ]),\n    el,\n  )\n  return el.innerHTML\n})\n\nconst environmentTooltipText = computed(() =>\n  props.context.type === 'environment' ? props.context.value : '',\n)\n\nuseTooltip({\n  content: isContextFn ? contextTooltipHtml : environmentTooltipText,\n  contentTarget: isContextFn ? 'innerHTML' : 'textContent',\n  delay: 0,\n  placement: 'bottom-start',\n  offset: 6,\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    class=\"contents\">\n    <div class=\"flex items-center gap-1 whitespace-nowrap\">\n      <span>{{\n        props.context.type === 'environment'\n          ? props.context.name\n          : props.context.identifier\n      }}</span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;EAMA,MAAM,QAAQ;EAMd,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,cAAc,MAAM,QAAQ,SAAS;EAE3C,MAAM,qBAAqB,eAAe;AACxC,OAAI,CAAC,eAAe,OAAO,aAAa,YACtC,QAAO;GAET,MAAM,KAAK,SAAS,cAAc,MAAK;AACvC,UACE,EAAE,OAAO,EAAE,OAAO,mCAAmC,EAAE,CACrD,EAAE,QAAQ,EAAE,EAAE,MAAM,QAAQ,QAAQ,EACpC,EACE,OACA,EAAE,OAAO,8DAA8D,EACvE,gCACD,CACF,CAAC,EACF,GACF;AACA,UAAO,GAAG;IACX;EAED,MAAM,yBAAyB,eAC7B,MAAM,QAAQ,SAAS,gBAAgB,MAAM,QAAQ,QAAQ,GAC/D;AAEA,aAAW;GACT,SAAS,cAAc,qBAAqB;GAC5C,eAAe,cAAc,cAAc;GAC3C,OAAO;GACP,WAAW;GACX,QAAQ;GACR,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAIC,mBAUM,OAAA;aATA;IAAJ,KAAI;IACJ,OAAM;OACN,mBAMM,OANN,YAMM,CALJ,mBAIS,QAAA,MAAA,gBAHP,MAAM,QAAQ,SAAI,gBAA+B,MAAM,QAAQ,OAAiB,MAAM,QAAQ,WAAU,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,IAAA"}

package/dist/v2/components/code-input/code-variable-widget.d.ts

@@ -7,6 +7,7 @@ import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensi
 export declare const pillPlugin: (props: {
     environment: XScalarEnvironment | undefined;
     isReadOnly: boolean | undefined;
+    isContextFunctionName?: (name: string) => boolean;
 }) => ViewPlugin<{
     decorations: DecorationSet;
     lastEnvironment: XScalarEnvironment | undefined;

package/dist/v2/components/code-input/code-variable-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-variable-widget.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/code-input/code-variable-widget.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAyFnH;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO;IAAE,WAAW,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE;iBAG/F,aAAa;qBACT,kBAAkB,GAAG,SAAS;mBAOhC,UAAU,GAAG,IAAI;2BAcT,UAAU,GAAG,aAAa;EAsCpD,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,uCAoC3B,CAAA"}
+{"version":3,"file":"code-variable-widget.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/code-input/code-variable-widget.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAmGnH;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO;IAChC,WAAW,EAAE,kBAAkB,GAAG,SAAS,CAAA;IAC3C,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;CAClD;iBAGkB,aAAa;qBACT,kBAAkB,GAAG,SAAS;mBAOhC,UAAU,GAAG,IAAI;2BAcT,UAAU,GAAG,aAAa;EAyCpD,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,uCAoC3B,CAAA"}