serverest 3.2.2 → 3.3.0-beta.2

package/src/services/validateSchema-service.js

@@ -2,6 +2,8 @@
 
 const { validate } = require('express-validation')
 
+const { etapa } = require('../utils/etapas')
+
 module.exports = schema => {
-  return validate(schema, { keyByField: false }, { abortEarly: false })
+  return etapa('schema', validate(schema, { keyByField: false }, { abortEarly: false }))
 }

package/src/swagger/index.js

@@ -7,7 +7,7 @@ const STYLES_DIR = join(__dirname, 'styles')
 const SCRIPTS_DIR = join(__dirname, 'scripts')
 const TRANSLATIONS_DIR = join(__dirname, 'translations')
 
-const STYLE_FILES = ['topbar.css', 'language-switcher.css', 'release-toast.css']
+const STYLE_FILES = ['topbar.css', 'language-switcher.css', 'release-toast.css', 'flow-panel.css']
 
 function loadCustomCss () {
   return STYLE_FILES
@@ -40,6 +40,14 @@ function buildUiLabelTranslations () {
   return entries.join(',\n')
 }
 
+// O painel sempre renderiza pt-BR e a tradução da página troca o texto, como no resto da UI.
+// ui.response entra porque o painel reaproveita o rótulo "Resposta" já existente.
+function buildFlowPanelTexts () {
+  const ptBr = require(join(TRANSLATIONS_DIR, 'pt-BR.js'))
+  const keys = Object.keys(ptBr).filter(k => k.startsWith('ui.flow.') || k === 'ui.response')
+  return JSON.stringify(keys.reduce((texts, key) => ({ ...texts, [key]: ptBr[key] }), {}))
+}
+
 const customCss = loadCustomCss()
 const customJsTemplate = loadCustomJsTemplate()
 
@@ -48,7 +56,8 @@ function buildCustomJsStr (releaseInfo, currentVersion, forceBanner) {
     __RELEASE_INFO__: JSON.stringify(releaseInfo),
     __CURRENT_VERSION__: JSON.stringify(currentVersion),
     __FORCE_BANNER__: JSON.stringify(forceBanner),
-    __UI_LABEL_TRANSLATIONS__: buildUiLabelTranslations()
+    __UI_LABEL_TRANSLATIONS__: buildUiLabelTranslations(),
+    __FLOW_PANEL_TEXTS__: buildFlowPanelTexts()
   }
   return Object.keys(replacements).reduce(
     (output, key) => output.split(key).join(replacements[key]),

package/src/swagger/scripts/08-flow-panel.js

@@ -0,0 +1,374 @@
+/* Painel "Fluxo da requisição": desenha o header X-ServeRest-Stages abaixo da resposta do "Try it out" */
+// O ponto e vírgula inicial é obrigatório: os scripts desta pasta são concatenados e, sem ele, o
+// navegador interpreta este bloco como uma chamada do resultado do script anterior.
+;(function () {
+  const texts = __FLOW_PANEL_TEXTS__
+  const stagesHeader = 'x-serverest-stages'
+  const slowMotionKey = 'serverestFlowSlowMotion'
+
+  function knownKey (key) {
+    return Object.prototype.hasOwnProperty.call(texts, key) ? key : null
+  }
+
+  function text (key) {
+    return knownKey(key) ? texts[key] : ''
+  }
+
+  function parseEntry (piece) {
+    const [name, ...params] = piece.split(';').map(part => part.trim())
+    const entry = {}
+    params.filter(Boolean).forEach(param => {
+      const separator = param.indexOf('=')
+      const key = separator === -1 ? param : param.slice(0, separator)
+      entry[key] = separator === -1 ? '' : param.slice(separator + 1)
+    })
+    entry.name = name
+    if (entry.dur !== undefined) {
+      const dur = Number(entry.dur)
+      entry.dur = entry.dur === '' || Number.isNaN(dur) ? undefined : dur
+    }
+    return entry
+  }
+
+  function parseStages (headerValue) {
+    if (typeof headerValue !== 'string') return []
+    return headerValue.split(',')
+      .map(piece => piece.trim())
+      .filter(Boolean)
+      .map(parseEntry)
+      .filter(entry => entry.name)
+  }
+
+  function extraParams (entry) {
+    return Object.keys(entry)
+      .filter(key => !['name', 'st', 'dur'].includes(key))
+      .reduce((params, key) => Object.assign(params, { [key]: entry[key] }), {})
+  }
+
+  function buildStage (entry) {
+    return {
+      name: entry.name,
+      st: entry.st,
+      dur: entry.dur,
+      params: extraParams(entry),
+      labelKey: knownKey('ui.flow.stage_label.' + entry.name),
+      descriptionKey: knownKey('ui.flow.stage_description.' + entry.name),
+      statusKey: knownKey('ui.flow.status.' + entry.st),
+      width: 0,
+      rules: []
+    }
+  }
+
+  function buildRule (entry, code) {
+    return {
+      name: entry.name,
+      code,
+      st: entry.st,
+      item: entry.item,
+      params: extraParams(entry),
+      labelKey: knownKey('ui.flow.rule_label.' + code),
+      statusKey: knownKey('ui.flow.status.' + entry.st)
+    }
+  }
+
+  function failureKeys (stage, rule, status) {
+    // 408 marca como failed a etapa em execução no timeout, e 500 ou mais é erro inesperado: a etapa não explica a falha.
+    if (status === 408) return { whyKey: 'ui.flow.why.status.timeout', howKey: 'ui.flow.how.status.timeout' }
+    if (status >= 500) return { whyKey: 'ui.flow.why.status.unexpected_error', howKey: 'ui.flow.how.status.unexpected_error' }
+    if (rule) {
+      const why = knownKey('ui.flow.why.rule.' + rule.code)
+      const how = knownKey('ui.flow.how.rule.' + rule.code)
+      if (why && how) return { whyKey: why, howKey: how }
+    }
+    if (stage.name === 'auth' && stage.params.reason) {
+      const why = knownKey('ui.flow.why.auth.' + stage.params.reason)
+      const how = knownKey('ui.flow.how.auth.' + stage.params.reason)
+      if (why && how) return { whyKey: why, howKey: how }
+    }
+    return {
+      whyKey: knownKey('ui.flow.why.stage.' + stage.name),
+      howKey: knownKey('ui.flow.how.stage.' + stage.name)
+    }
+  }
+
+  function buildFlowModel (entries, statusCode) {
+    if (!Array.isArray(entries) || entries.length === 0) return null
+    const stages = []
+    entries.forEach(entry => {
+      const separator = entry.name.indexOf('.')
+      const owner = separator > 0 ? entry.name.slice(0, separator) : null
+      const parent = owner ? stages.filter(stage => stage.name === owner).pop() : null
+      if (parent) {
+        parent.rules.push(buildRule(entry, entry.name.slice(separator + 1)))
+      } else {
+        stages.push(buildStage(entry))
+      }
+    })
+    const totalDur = stages.reduce((total, stage) => total + (stage.dur || 0), 0)
+    stages.forEach(stage => {
+      stage.width = totalDur > 0 ? (stage.dur || 0) / totalDur : 0
+    })
+    const status = Number(statusCode)
+    const failedStage = stages.find(stage => stage.st === 'failed') || null
+    const failedRule = failedStage ? failedStage.rules.find(rule => rule.st === 'failed') || null : null
+    let summary = 'completed'
+    let keys = { whyKey: null, howKey: null }
+    if (failedStage) {
+      summary = 'stopped'
+      keys = failureKeys(failedStage, failedRule, status)
+    } else if (status >= 400) {
+      summary = 'outside'
+      keys = { whyKey: 'ui.flow.why.outside', howKey: 'ui.flow.how.outside' }
+    }
+    return {
+      statusCode: Number.isNaN(status) ? null : status,
+      summary,
+      failedStage: failedStage ? failedStage.name : null,
+      failedRule: failedRule ? failedRule.code : null,
+      whyKey: keys.whyKey,
+      howKey: keys.howKey,
+      stages
+    }
+  }
+
+  function stepDelay (stage) {
+    if (stage.dur === undefined) return 420
+    return Math.min(1700, Math.max(420, stage.dur * 480))
+  }
+
+  function prefersReducedMotion () {
+    try {
+      return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+    } catch (e) {
+      return false
+    }
+  }
+
+  function readSlowMotion () {
+    try {
+      return window.localStorage.getItem(slowMotionKey) !== 'false'
+    } catch (e) {
+      return true
+    }
+  }
+
+  function saveSlowMotion (enabled) {
+    try {
+      window.localStorage.setItem(slowMotionKey, enabled ? 'true' : 'false')
+    } catch (e) {}
+  }
+
+  function readResponse (response) {
+    try {
+      const headers = response && response.get('headers')
+      const map = headers && headers.toJS ? headers.toJS() : {}
+      const name = Object.keys(map).find(key => key.toLowerCase() === stagesHeader)
+      if (!name || map[name] === undefined || map[name] === null) return null
+      return { header: String(map[name]), status: response.get('status') }
+    } catch (e) {
+      return null
+    }
+  }
+
+  function createComponents (React) {
+    const h = React.createElement
+
+    class FlowBoundary extends React.Component {
+      constructor (props) {
+        super(props)
+        this.state = { failed: false }
+      }
+
+      static getDerivedStateFromError () {
+        return { failed: true }
+      }
+
+      componentDidCatch () {}
+
+      render () {
+        return this.state.failed ? null : this.props.children
+      }
+    }
+
+    // Todo texto traduzível fica sozinho no seu nó: a tradução da página compara o nó inteiro.
+    function label (key, className) {
+      return h('span', { key, className }, text(key))
+    }
+
+    // Código desconhecido vai em <code>, que a tradução da página nunca altera.
+    function codeOrLabel (key, raw, className) {
+      return key ? label(key, className) : h('code', { key: 'raw-' + raw, className }, String(raw === undefined ? '' : raw))
+    }
+
+    function statusClass (item) {
+      return 'serverest-flow-st-' + (item.statusKey ? item.st : 'unknown')
+    }
+
+    function textBlock (titleKey, bodyKey, className) {
+      return h('div', { key: titleKey, className: 'serverest-flow-block ' + className },
+        h('strong', { className: 'serverest-flow-block-title' }, text(titleKey)),
+        h('p', { className: 'serverest-flow-block-text' }, text(bodyKey))
+      )
+    }
+
+    function RuleRow (props) {
+      const rule = props.rule
+      return h('li', { className: 'serverest-flow-rule ' + statusClass(rule) },
+        codeOrLabel(rule.statusKey, rule.st, 'serverest-flow-status'),
+        codeOrLabel(rule.labelKey, rule.code, 'serverest-flow-name'),
+        rule.item !== undefined
+          ? h('span', { className: 'serverest-flow-item' },
+            label('ui.flow.item_position', 'serverest-flow-item-label'),
+            h('span', { className: 'serverest-flow-item-value' }, String(rule.item)))
+          : null
+      )
+    }
+
+    function StageRow (props) {
+      const { stage, model, expanded, onToggle } = props
+      const isFailed = model.failedStage === stage.name && stage.st === 'failed'
+      const expandable = !!stage.descriptionKey || (isFailed && !!model.whyKey)
+      const content = [
+        codeOrLabel(stage.statusKey, stage.st, 'serverest-flow-status'),
+        codeOrLabel(stage.labelKey, stage.name, 'serverest-flow-name'),
+        stage.dur !== undefined ? h('span', { className: 'serverest-flow-dur' }, stage.dur.toFixed(2) + ' ms') : null
+      ]
+      const head = expandable
+        ? h('button', { type: 'button', className: 'serverest-flow-row', 'aria-expanded': expanded ? 'true' : 'false', onClick: onToggle }, ...content)
+        : h('div', { className: 'serverest-flow-row' }, ...content)
+      const details = expandable && expanded
+        ? h('div', { className: 'serverest-flow-details' },
+          stage.descriptionKey ? textBlock('ui.flow.stage_description_title', stage.descriptionKey, 'serverest-flow-block-description') : null,
+          isFailed && model.whyKey ? textBlock('ui.flow.why_title', model.whyKey, 'serverest-flow-block-why') : null,
+          isFailed && model.howKey ? textBlock('ui.flow.how_title', model.howKey, 'serverest-flow-block-how') : null)
+        : null
+      const rules = stage.rules.length
+        ? h('ol', { className: 'serverest-flow-rules' }, stage.rules.map(rule => h(RuleRow, { key: rule.name, rule })))
+        : null
+      return h('li', { className: 'serverest-flow-stage ' + statusClass(stage) + (isFailed ? ' serverest-flow-stage-failed' : '') }, head, details, rules)
+    }
+
+    function Summary (props) {
+      const model = props.model
+      if (model.summary === 'stopped') {
+        const stage = model.stages.find(item => item.name === model.failedStage)
+        return h('p', { key: 'stopped-' + stage.name, className: 'serverest-flow-summary' },
+          label('ui.flow.stopped_at', 'serverest-flow-summary-label'),
+          codeOrLabel(stage.labelKey, stage.name, 'serverest-flow-summary-stage'))
+      }
+      const key = model.summary === 'outside' ? 'ui.flow.outside' : 'ui.flow.completed'
+      return h('p', { key, className: 'serverest-flow-summary' }, label(key, 'serverest-flow-summary-label'))
+    }
+
+    function FlowPanel (props) {
+      const { model, animate, showControls, slowMotion, onToggleSlowMotion, onReplay } = props
+      const executed = model.stages.filter(stage => stage.st !== 'not_run')
+      const [revealed, setRevealed] = React.useState(animate ? 0 : executed.length)
+      const [expanded, setExpanded] = React.useState(model.failedStage ? { [model.failedStage]: true } : {})
+      const done = revealed >= executed.length
+
+      React.useEffect(() => {
+        if (done) return undefined
+        if (!animate) {
+          setRevealed(executed.length)
+          return undefined
+        }
+        const timer = setTimeout(() => setRevealed(count => count + 1), stepDelay(executed[revealed]))
+        return () => clearTimeout(timer)
+      }, [revealed, animate, done])
+
+      const visible = model.stages.filter(stage => {
+        if (stage.st === 'not_run') return done
+        return executed.indexOf(stage) <= revealed
+      })
+      const active = done ? null : executed[revealed]
+      const listed = visible.filter(stage => stage !== active)
+
+      const segments = visible.map(stage => h('span', {
+        key: stage.name,
+        className: 'serverest-flow-segment ' + statusClass(stage) + (stage === active ? ' serverest-flow-active' : ''),
+        style: { flexGrow: stage.width }
+      }, codeOrLabel(stage.labelKey, stage.name, 'serverest-flow-segment-label')))
+      if (done) {
+        segments.push(h('span', { key: 'response', className: 'serverest-flow-segment serverest-flow-segment-response' },
+          label('ui.response', 'serverest-flow-segment-label'),
+          model.statusCode !== null ? h('span', { className: 'serverest-flow-segment-code' }, String(model.statusCode)) : null))
+      }
+
+      const controls = showControls
+        ? h('div', { className: 'serverest-flow-controls' },
+          h('label', { className: 'serverest-flow-slow-motion' },
+            h('input', { type: 'checkbox', checked: slowMotion, onChange: onToggleSlowMotion }),
+            label('ui.flow.slow_motion', 'serverest-flow-slow-motion-label')),
+          h('button', { type: 'button', className: 'serverest-flow-replay', onClick: onReplay }, text('ui.flow.replay')))
+        : null
+
+      return h('section', { className: 'serverest-flow' },
+        h('div', { className: 'serverest-flow-header' },
+          h('h4', { className: 'serverest-flow-title' }, text('ui.flow.title')),
+          done ? h(Summary, { key: 'summary-' + model.summary, model }) : null,
+          controls),
+        h('div', { className: 'serverest-flow-bar' }, segments),
+        done && model.summary === 'outside'
+          ? h('p', { className: 'serverest-flow-outside' },
+            label(model.whyKey, 'serverest-flow-outside-why'),
+            label(model.howKey, 'serverest-flow-outside-how'))
+          : null,
+        h('ol', { className: 'serverest-flow-stages' }, listed.map(stage => h(StageRow, {
+          key: stage.name,
+          stage,
+          model,
+          expanded: !!expanded[stage.name],
+          onToggle: () => setExpanded(current => Object.assign({}, current, { [stage.name]: !current[stage.name] }))
+        })))
+      )
+    }
+
+    function FlowRoot (props) {
+      const [run, setRun] = React.useState(0)
+      const [slowMotion, setSlowMotion] = React.useState(readSlowMotion)
+      const { header, status } = props
+      const model = buildFlowModel(parseStages(header), status)
+      if (!model) return null
+      const reduced = prefersReducedMotion()
+      return h(FlowPanel, {
+        // Remontar a cada resposta ou repetição evita que o React edite um nó já traduzido.
+        key: header + '|' + status + '|' + run,
+        model,
+        animate: slowMotion && !reduced,
+        showControls: !reduced,
+        slowMotion,
+        onToggleSlowMotion: event => {
+          const enabled = !!event.target.checked
+          saveSlowMotion(enabled)
+          setSlowMotion(enabled)
+        },
+        onReplay: () => setRun(count => count + 1)
+      })
+    }
+
+    return { FlowBoundary, FlowRoot }
+  }
+
+  function serverestFlowPanelPlugin (system) {
+    const React = system && system.React
+    if (!React || !React.Component || !React.useState) return {}
+    const { FlowBoundary, FlowRoot } = createComponents(React)
+    const h = React.createElement
+    return {
+      wrapComponents: {
+        liveResponse: Original => function ServerestLiveResponse (props) {
+          const data = readResponse(props.response)
+          const panel = data
+            ? h(FlowBoundary, { key: data.header + '|' + data.status }, h(FlowRoot, { header: data.header, status: data.status }))
+            : null
+          return h(React.Fragment, null, h(Original, props), panel)
+        }
+      }
+    }
+  }
+
+  serverestFlowPanelPlugin.parseStages = parseStages
+  serverestFlowPanelPlugin.buildFlowModel = buildFlowModel
+  window.serverestFlowPanelPlugin = serverestFlowPanelPlugin
+})()

package/src/swagger/styles/flow-panel.css

@@ -0,0 +1,231 @@
+/* Painel "Fluxo da requisição" abaixo da resposta do "Try it out" */
+.swagger-ui .serverest-flow {
+  margin: 16px 0 8px;
+  padding: 14px 16px;
+  border: 1px solid #d8dde7;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #1f2937;
+  font-family: sans-serif;
+  font-size: 13px;
+}
+
+.swagger-ui .serverest-flow-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  margin-bottom: 12px;
+}
+
+.swagger-ui .serverest-flow-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.swagger-ui .serverest-flow-summary {
+  display: inline-flex;
+  gap: 6px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.swagger-ui .serverest-flow-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+}
+
+.swagger-ui .serverest-flow-slow-motion {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.swagger-ui .serverest-flow-replay {
+  padding: 4px 12px;
+  border: 1px solid #9ca3af;
+  border-radius: 4px;
+  background: #ffffff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.swagger-ui .serverest-flow-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  min-height: 26px;
+  margin-bottom: 12px;
+}
+
+.swagger-ui .serverest-flow-segment {
+  display: flex;
+  flex-basis: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: max-content;
+  min-height: 26px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  animation: serverestFlowIn 220ms ease-out;
+}
+
+.swagger-ui .serverest-flow-segment-response {
+  flex-grow: 0;
+  background: #1f2937;
+  color: #ffffff;
+}
+
+.swagger-ui .serverest-flow-segment.serverest-flow-active {
+  animation: serverestFlowPulse 900ms ease-in-out infinite;
+}
+
+.swagger-ui .serverest-flow-st-ok.serverest-flow-segment { background: #2f9e6b; color: #ffffff; }
+.swagger-ui .serverest-flow-st-failed.serverest-flow-segment { background: #c53030; color: #ffffff; }
+.swagger-ui .serverest-flow-st-skipped.serverest-flow-segment { background: #6b7280; color: #ffffff; }
+.swagger-ui .serverest-flow-st-not_run.serverest-flow-segment { background: #e5e7eb; color: #4b5563; }
+.swagger-ui .serverest-flow-st-unknown.serverest-flow-segment { background: #d1d5db; color: #1f2937; }
+
+.swagger-ui .serverest-flow-outside {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0 0 12px;
+}
+
+.swagger-ui .serverest-flow-stages,
+.swagger-ui .serverest-flow-rules {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.swagger-ui .serverest-flow-stage {
+  border-top: 1px solid #eef1f5;
+  animation: serverestFlowIn 220ms ease-out;
+}
+
+.swagger-ui .serverest-flow-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 6px 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.swagger-ui button.serverest-flow-row {
+  cursor: pointer;
+}
+
+.swagger-ui .serverest-flow-status {
+  flex-shrink: 0;
+  min-width: 11em;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  text-align: center;
+}
+
+.swagger-ui .serverest-flow-st-ok > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-ok .serverest-flow-status { background: #d1fae5; color: #065f46; }
+.swagger-ui .serverest-flow-st-failed > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-failed .serverest-flow-status { background: #fee2e2; color: #991b1b; }
+.swagger-ui .serverest-flow-st-skipped > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-skipped .serverest-flow-status { background: #e5e7eb; color: #374151; }
+.swagger-ui .serverest-flow-st-not_run > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-not_run .serverest-flow-status { background: #f3f4f6; color: #6b7280; }
+
+.swagger-ui .serverest-flow-name {
+  font-weight: 600;
+}
+
+.swagger-ui .serverest-flow-dur {
+  margin-left: auto;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+
+.swagger-ui .serverest-flow-stage-failed > .serverest-flow-row .serverest-flow-name {
+  color: #991b1b;
+}
+
+.swagger-ui .serverest-flow-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 0 10px 22px;
+}
+
+.swagger-ui .serverest-flow-block-title {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 12px;
+}
+
+.swagger-ui .serverest-flow-block-text {
+  margin: 0;
+}
+
+.swagger-ui .serverest-flow-block-why,
+.swagger-ui .serverest-flow-block-how {
+  padding: 6px 10px;
+  border-left: 3px solid #c53030;
+  background: #fef2f2;
+}
+
+.swagger-ui .serverest-flow-block-how {
+  border-left-color: #2f9e6b;
+  background: #f0fdf4;
+}
+
+.swagger-ui .serverest-flow-rule {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0 4px 22px;
+  color: #4b5563;
+}
+
+.swagger-ui .serverest-flow-item {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: auto;
+}
+
+@keyframes serverestFlowIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes serverestFlowPulse {
+  0% { opacity: 0.45; }
+  50% { opacity: 1; }
+  100% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .swagger-ui .serverest-flow-segment,
+  .swagger-ui .serverest-flow-stage,
+  .swagger-ui .serverest-flow-segment.serverest-flow-active {
+    animation: none;
+  }
+
+  .swagger-ui .serverest-flow-controls {
+    display: none;
+  }
+}