@kirchdev/duxt 0.3.4 → 0.3.5-dev-main.43-3310f4b

package/app/components/DuxtShortcutsTrigger.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * The visible way into the shortcut sheet.
+ *
+ * `?` opens the sheet, and a reader can only press `?` if they already know the
+ * sheet is there — which is the whole discoverability problem, and one no
+ * keystroke can solve for itself. So the keys get a control: an icon beside the
+ * search, in the header, on every page.
+ *
+ * It draws the key it duplicates rather than restating it, and draws nothing
+ * where `shortcuts.singleCharacter: false` has unbound `?` — in which case this
+ * button is not a shortcut for the sheet, it is the only door to it.
+ */
+defineOptions({
+  inheritAttrs: false
+});
+
+const { open } = useDuxtShortcutSheet();
+const { hint } = useDuxtShortcuts();
+const helpHint = computed(() => hint('help'));
+</script>
+
+<template>
+  <UiTooltip>
+    <UiTooltipTrigger as-child>
+      <UiButton
+        v-bind="$attrs"
+        variant="ghost"
+        size="icon"
+        :aria-label="$t('duxt.shortcuts.open')"
+        :aria-keyshortcuts="helpHint"
+        @click="open = !open"
+      >
+        <Icon name="lucide:keyboard" class="size-4" />
+      </UiButton>
+    </UiTooltipTrigger>
+
+    <UiTooltipContent side="bottom" class="flex items-center gap-2">
+      {{ $t('duxt.shortcuts.open') }}
+      <kbd
+        v-if="helpHint"
+        aria-hidden="true"
+        class="rounded border border-neutral-50/25 px-1.5 font-mono text-[10px]"
+      >
+        {{ helpHint }}
+      </kbd>
+    </UiTooltipContent>
+  </UiTooltip>
+</template>

package/app/components/DuxtSkipLink.vue

@@ -26,7 +26,7 @@ function jump(event: MouseEvent) {
 <template>
   <a
     :href="target"
-    class="sr-only rounded-md bg-background px-4 py-2 text-sm font-medium ring-2 ring-ring focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-100"
+    class="sr-only rounded-md bg-background px-4 py-2 text-sm font-medium ring-2 ring-ring focus:not-sr-only focus:fixed focus:top-3 focus:start-3 focus:z-100"
     @click="jump"
   >
     {{ $t('duxt.nav.skip') }}

package/app/components/DuxtToc.vue

@@ -19,18 +19,18 @@ const ids = computed(() =>
   ])
 );
 
-const active = useActiveHeading(ids);
+const active = useActiveHeading(ids, duxt.toc?.scrollOffset);
 </script>
 
 <template>
   <div class="space-y-8 text-sm">
     <nav v-if="links?.length" :aria-label="$t('duxt.toc.title')">
       <p class="mb-3 font-medium">{{ $t('duxt.toc.title') }}</p>
-      <ul class="space-y-1 border-l">
+      <ul class="space-y-1 border-s">
         <li v-for="link in links" :key="link.id">
           <a
             :href="`#${link.id}`"
-            class="-ml-px block border-l py-1 pl-4 transition-colors"
+            class="-ms-px block border-s py-1 ps-4 transition-colors"
             :class="
               active === link.id
                 ? 'border-primary text-foreground'
@@ -43,7 +43,7 @@ const active = useActiveHeading(ids);
             <li v-for="child in link.children" :key="child.id">
               <a
                 :href="`#${child.id}`"
-                class="-ml-px block border-l py-1 pl-7 transition-colors"
+                class="-ms-px block border-s py-1 ps-7 transition-colors"
                 :class="
                   active === child.id
                     ? 'border-primary text-foreground'
@@ -69,15 +69,21 @@ const active = useActiveHeading(ids);
           <NuxtLink
             :to="localeLink(link.to)"
             :target="link.external ? '_blank' : undefined"
-            class="flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
+            class="flex items-start gap-2 text-muted-foreground transition-colors hover:text-foreground"
           >
-            <Icon v-if="link.icon" :name="link.icon" class="size-4" />
-            {{ link.label }}
+            <!-- `mt-0.5` centres the icon on the FIRST line, not on a label
+                 that wrapped onto two. -->
             <Icon
-              v-if="link.external"
-              name="lucide:arrow-up-right"
-              class="size-3 opacity-50"
+              v-if="link.icon"
+              :name="link.icon"
+              class="mt-0.5 size-4 shrink-0"
             />
+            <!-- The arrow stays with the label's last word: as a flex sibling
+                 it was pushed to the row's far edge whenever the label
+                 wrapped. See DuxtLinkLabel. -->
+            <span class="min-w-0">
+              <DuxtLinkLabel :label="link.label" :external="link.external" />
+            </span>
           </NuxtLink>
         </li>
       </ul>

package/app/components/DuxtTranslationBanner.vue

@@ -44,7 +44,7 @@ const shown = computed(() => {
        information about the page rather than a warning about its content. -->
   <UiAlert
     role="status"
-    class="mb-6 flex items-start gap-2.5 rounded-md border border-l-2 border-l-sky-500 bg-muted/30 px-3 py-2.5"
+    class="mb-6 flex items-start gap-2.5 rounded-md border border-s-2 border-s-sky-500 bg-muted/30 px-3 py-2.5"
   >
     <Icon
       name="lucide:languages"

package/app/components/DuxtVersion.vue

@@ -35,13 +35,6 @@ const { source } = useDuxtCollection();
  */
 const { choices: versions } = useDuxtVersion();
 
-/** A global changelog switches between its source's documentation editions. */
-const changelog = computed(
-  () =>
-    source.value?.generated?.type === 'changelog' &&
-    source.value.generated.versioning === 'global'
-);
-
 const current = computed(() =>
   sourceForPath(
     path.value,
@@ -69,14 +62,62 @@ function caption(version: DuxtLink) {
   return te(value) ? t(value) : value;
 }
 
-/** Same page, other version: swap the prefix rather than jumping to its root. */
+/**
+ * The pages this one would become in each version, checked where they may not
+ * exist.
+ *
+ * Only inside a per-version CHANGELOG, and only below its overview: a release
+ * page carries a release slug, and an older version's changelog has no page
+ * for a release cut after it. Those are looked up in the target's own
+ * collection; any other page keeps its place exactly as `versionPath` puts it,
+ * because every other per-version tree is the same tree at another ref.
+ *
+ * Nothing is read after the first `await` but plain values captured before it —
+ * the rule `tests/async-data-context.test.ts` holds.
+ */
+const { data: missing } = useAsyncData(
+  () => `duxt-version-missing-${path.value}`,
+  async () => {
+    const sources = duxt.resolvedSources ?? [];
+    const own = source.value;
+    if (own?.generated?.type !== 'changelog' || path.value === own.prefix) {
+      return [];
+    }
+
+    const gone: string[] = [];
+
+    for (const version of versions.value) {
+      const target = versionPath(
+        path.value,
+        current.value?.to,
+        version.to ?? '/'
+      );
+      const owner = sourceForPath(target, sources);
+      if (!owner || owner.generated?.type !== 'changelog') continue;
+
+      const hit = await queryCollection(owner.collection as DuxtCollectionArg)
+        .path(target)
+        .select('path')
+        .first();
+      if (!hit) gone.push(target);
+    }
+
+    return gone;
+  },
+  { default: () => [], watch: [path] }
+);
+
+/**
+ * Same page, other version: swap the prefix rather than jumping to its root —
+ * unless the target never published that page, in which case its own root.
+ */
 function pathIn(version: { to?: string }) {
   return localeLink(
-    versionPath(
+    versionSwitchPath(
       path.value,
       current.value?.to,
       version.to ?? '/',
-      changelog.value
+      new Set(missing.value)
     )
   );
 }
@@ -99,7 +140,7 @@ function pathIn(version: { to?: string }) {
       <button
         v-if="props.variant === 'block'"
         type="button"
-        class="flex w-full cursor-pointer items-center gap-2 rounded-md border p-2 text-left transition-colors hover:bg-accent"
+        class="flex w-full cursor-pointer items-center gap-2 rounded-md border p-2 text-start transition-colors hover:bg-accent"
       >
         <span
           class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground"
@@ -160,7 +201,7 @@ function pathIn(version: { to?: string }) {
         <span class="font-mono text-xs">{{ version.label }}</span>
         <span
           v-if="caption(version)"
-          class="ml-auto text-xs text-muted-foreground"
+          class="ms-auto text-xs text-muted-foreground"
         >
           {{ caption(version) }}
         </span>

package/app/components/DuxtVersionBanner.vue

@@ -41,22 +41,22 @@ const offersUpgrade = computed(() =>
  */
 const TONES = {
   upcoming: {
-    rule: 'border-l-sky-500',
+    rule: 'border-s-sky-500',
     text: 'text-sky-500',
     icon: 'lucide:flask-conical'
   },
   old: {
-    rule: 'border-l-amber-500',
+    rule: 'border-s-amber-500',
     text: 'text-amber-500',
     icon: 'lucide:triangle-alert'
   },
   deprecated: {
-    rule: 'border-l-red-500',
+    rule: 'border-s-red-500',
     text: 'text-red-500',
     icon: 'lucide:triangle-alert'
   },
   eol: {
-    rule: 'border-l-red-500',
+    rule: 'border-s-red-500',
     text: 'text-red-500',
     icon: 'lucide:circle-off'
   }
@@ -74,7 +74,7 @@ const tone = computed(
   <UiAlert
     v-if="shouldWarn"
     role="status"
-    class="mb-6 flex items-start gap-2.5 rounded-md border border-l-2 bg-muted/30 px-3 py-2.5"
+    class="mb-6 flex items-start gap-2.5 rounded-md border border-s-2 bg-muted/30 px-3 py-2.5"
     :class="tone.rule"
   >
     <Icon

package/app/components/content/AccordionItem.vue

@@ -21,13 +21,13 @@ const value = parent?.register(props.label ?? '') ?? 'item-0';
   <Item :value="value" class="border-b last:border-b-0">
     <AccordionHeader>
       <AccordionTrigger
-        class="group flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left text-sm font-medium hover:bg-accent/50"
+        class="group flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-start text-sm font-medium hover:bg-accent/50"
       >
         <Icon v-if="icon" :name="icon" class="size-4 text-muted-foreground" />
         <span class="min-w-0">{{ label }}</span>
         <Icon
           name="lucide:chevron-down"
-          class="ml-auto size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+          class="ms-auto size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
         />
       </AccordionTrigger>
     </AccordionHeader>

package/app/components/content/BrunoOverview.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import type { DuxtBrunoAuth, DuxtBrunoEntry } from '../../../bruno-model';
+
+/**
+ * The collection's front page: what is in it, and how to get it.
+ *
+ * MDC: `::bruno-overview` on the section's index page, with `collection.bru`'s
+ * own `docs` block in the slot.
+ *
+ * THE DOWNLOAD IS THE POINT, and it is why this page is not simply a table of
+ * contents. A reference tells you what the requests are; a Bruno collection is
+ * a thing you OPEN, and a reader who wants the requests wants the files. The
+ * archive is built from the exact version and locale of the page they are on —
+ * which is what "Fetch in Bruno" below it cannot offer, since it clones
+ * whatever the repository's HEAD is today, and the page says so rather than
+ * offering the two as if they were the same thing.
+ *
+ * The Bruno button is a PLAIN LINK. Bruno publishes a `button.js` that draws
+ * one; loading it would put a third-party script on every page of a
+ * documentation site to render an anchor this site can render itself.
+ */
+const props = defineProps<{
+  name?: string;
+  version?: string;
+  auth?: DuxtBrunoAuth;
+  headers?: DuxtBrunoEntry[];
+  /** How many environment files the collection has — counted, never read. */
+  environments?: number;
+  /** Absent for a remote collection: nothing outside can build the archive. */
+  download?: string;
+  /** Absent unless the site declared a public git URL. */
+  fetch?: string;
+  groups?: {
+    name: string;
+    description?: string;
+    requests?: number;
+    to: string;
+  }[];
+  requests?: { name: string; method: string; url: string; to: string }[];
+}>();
+
+const localeLink = useDuxtLink();
+
+/**
+ * Every request in the collection, its folders' included.
+ *
+ * Counted here rather than written into the props, because the figure has to
+ * agree with the two lists below it on this very page — and a number the parser
+ * sent separately is a number that can disagree with them.
+ */
+const total = computed(
+  () =>
+    (props.requests?.length ?? 0) +
+    (props.groups ?? []).reduce((all, group) => all + (group.requests ?? 0), 0)
+);
+</script>
+
+<template>
+  <div>
+    <slot />
+
+    <div class="not-typeset">
+      <!-- ACQUISITION FIRST. Everything below is the table of contents, and a
+           reader who came for the collection itself should not have to scroll
+           past it. -->
+      <section v-if="download || fetch" class="mt-8">
+        <h2 class="duxt-label">{{ $t('duxt.bruno.getIt') }}</h2>
+
+        <div class="mt-3 flex flex-wrap items-center gap-3">
+          <UiButton v-if="download" as-child variant="default">
+            <a :href="download" download>
+              <Icon name="lucide:download" aria-hidden="true" class="size-4" />
+              {{ $t('duxt.bruno.download') }}
+            </a>
+          </UiButton>
+
+          <!-- `simple-icons`, and the repository's icon rule says exactly why:
+               this is a third party AS ITSELF — the button hands the collection
+               to Bruno — where the section's own navbar entry, which names a
+               part of the documentation, is `lucide`. -->
+          <UiButton v-if="fetch" as-child variant="outline">
+            <a :href="fetch" rel="noopener noreferrer" target="_blank">
+              <Icon
+                name="simple-icons:bruno"
+                aria-hidden="true"
+                class="size-4"
+              />
+              {{ $t('duxt.bruno.fetch') }}
+            </a>
+          </UiButton>
+        </div>
+
+        <p v-if="download" class="mt-2 text-sm text-muted-foreground">
+          {{ $t('duxt.bruno.downloadHint') }}
+        </p>
+
+        <p v-if="fetch" class="mt-1 text-sm text-muted-foreground">
+          {{ $t('duxt.bruno.fetchHint') }}
+        </p>
+      </section>
+
+      <dl
+        v-if="version || groups?.length || environments"
+        class="mt-8 grid grid-cols-2 gap-x-6 gap-y-7 border-b pb-5 sm:grid-cols-4"
+      >
+        <div v-if="version" class="flex flex-col gap-1">
+          <dd
+            class="font-mono text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl"
+          >
+            {{ version }}
+          </dd>
+          <dt
+            class="flex items-center gap-1.5 text-xs font-medium text-primary"
+          >
+            <Icon name="lucide:tag" class="size-3.5" />
+            {{ $t('duxt.bruno.format') }}
+          </dt>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <dd
+            class="text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl"
+          >
+            {{ total }}
+          </dd>
+          <dt
+            class="flex items-center gap-1.5 text-xs font-medium text-primary"
+          >
+            <Icon name="lucide:arrow-left-right" class="size-3.5" />
+            {{ $t('duxt.bruno.requests') }}
+          </dt>
+        </div>
+
+        <div v-if="groups?.length" class="flex flex-col gap-1">
+          <dd
+            class="text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl"
+          >
+            {{ groups.length }}
+          </dd>
+          <dt
+            class="flex items-center gap-1.5 text-xs font-medium text-primary"
+          >
+            <Icon name="lucide:folder-tree" class="size-3.5" />
+            {{ $t('duxt.bruno.folders') }}
+          </dt>
+        </div>
+
+        <div v-if="environments" class="flex flex-col gap-1">
+          <dd
+            class="text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl"
+          >
+            {{ environments }}
+          </dd>
+          <dt
+            class="flex items-center gap-1.5 text-xs font-medium text-primary"
+          >
+            <Icon name="lucide:lock" class="size-3.5" />
+            {{ $t('duxt.bruno.environments') }}
+          </dt>
+        </div>
+      </dl>
+
+      <section v-if="groups?.length" class="mt-8">
+        <h2 class="duxt-label">{{ $t('duxt.bruno.folders') }}</h2>
+
+        <ul class="mt-3 -mx-3">
+          <li
+            v-for="group in groups"
+            :key="group.to"
+            class="border-t border-border/60 first:border-t-0"
+          >
+            <NuxtLink
+              :to="localeLink(group.to) ?? group.to"
+              class="group flex items-start gap-3 rounded-lg px-3 py-3 transition-colors hover:bg-muted/40"
+            >
+              <span class="min-w-0 flex-1">
+                <span class="flex flex-wrap items-baseline gap-x-3">
+                  <span class="font-medium">{{ group.name }}</span>
+                  <span class="text-xs text-muted-foreground tabular-nums">
+                    {{ group.requests }}
+                  </span>
+                </span>
+
+                <span
+                  v-if="group.description"
+                  class="mt-1 line-clamp-2 block text-sm text-muted-foreground"
+                >
+                  {{ group.description }}
+                </span>
+              </span>
+
+              <Icon
+                name="lucide:arrow-right"
+                aria-hidden="true"
+                class="mt-1 size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100 transition-transform ltr:group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5"
+              />
+            </NuxtLink>
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="requests?.length" class="mt-8">
+        <h2 class="duxt-label">{{ $t('duxt.bruno.requests') }}</h2>
+
+        <ul class="mt-3 -mx-3">
+          <li
+            v-for="entry in requests"
+            :key="entry.to"
+            class="border-t border-border/60 first:border-t-0"
+          >
+            <NuxtLink
+              :to="localeLink(entry.to) ?? entry.to"
+              class="flex flex-wrap items-center gap-3 rounded-lg px-3 py-3 transition-colors hover:bg-muted/40"
+            >
+              <DuxtOpenApiMethod :method="entry.method" class="w-16" />
+
+              <span class="font-medium sm:me-auto">{{ entry.name }}</span>
+
+              <!-- The auto margin is on the NAME above, not here: this is a
+                   `<code>`, which the stylesheet pins to left-to-right, and a
+                   `ms-auto` resolved against that would push the URL back to
+                   the start of a right-to-left row. -->
+              <code
+                class="w-full font-mono text-xs break-all text-muted-foreground sm:w-auto"
+              >
+                {{ entry.url }}
+              </code>
+            </NuxtLink>
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="auth || headers?.length" class="mt-8">
+        <h2 class="duxt-label">{{ $t('duxt.bruno.shared') }}</h2>
+
+        <p v-if="auth" class="mt-2 text-sm text-muted-foreground">
+          {{ $t('duxt.bruno.auth') }}:
+          <code class="font-mono">{{ auth.mode }}</code>
+        </p>
+
+        <div v-if="headers?.length" class="mt-3">
+          <DuxtBrunoEntries :entries="headers" />
+        </div>
+      </section>
+
+      <!-- STATED, ALWAYS. A reader has to know that what they are looking at is
+           less than the collection: the environments hold the hosts and the
+           keys, and the scripts and tests are code. None of it is on this site,
+           and saying so is what stops the page reading as the whole truth. -->
+      <p class="mt-8 flex items-start gap-2 text-sm text-muted-foreground">
+        <Icon
+          name="lucide:shield"
+          aria-hidden="true"
+          class="mt-0.5 size-4 shrink-0"
+        />
+        <span>{{ $t('duxt.bruno.notPublished') }}</span>
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/content/BrunoRequest.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { DuxtBrunoRequest } from '../../../bruno-model';
+import type {
+  DuxtOpenApiOperation,
+  DuxtOpenApiServer
+} from '../../../openapi-model';
+
+/**
+ * One Bruno request, as the two columns of the reference.
+ *
+ * MDC: the `bruno` section type writes `::bruno-request` into every request
+ * page, with the structure as props and the file's own `docs` block in the
+ * slot — Markdown, because that is what a `docs` block is.
+ *
+ * THE SAME TWO COLUMNS `OpenApiOperation` DRAWS, and that is the answer this
+ * type was filed to find: a second API section is not a second rendering path.
+ * The left column is what the collection says; the right is the existing try-it
+ * client, handed an operation the parser adapted at build time.
+ *
+ * WHAT IS NOT HERE is the honest half. A Bruno collection has no response
+ * schemas, no reusable components and no field descriptions, so the page has no
+ * "Responses" section and no schema tree — and does not invent one. Scripts and
+ * tests are reported as PRESENT and never shown: they are code written against
+ * Bruno's runtime, and a documentation site neither prints nor runs it.
+ */
+defineProps<{
+  request: DuxtBrunoRequest;
+  /** Present only where the site opted into a try-it client. */
+  operation?: DuxtOpenApiOperation;
+  servers?: DuxtOpenApiServer[];
+}>();
+</script>
+
+<template>
+  <!-- The same grid `OpenApiOperation` uses, and deliberately the same numbers:
+       the two page kinds sit in one section row, and a reader moving between
+       them should not feel the column move. -->
+  <div
+    class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_23rem] 2xl:grid-cols-[minmax(0,1fr)_30rem]"
+  >
+    <div class="min-w-0">
+      <div class="not-typeset flex flex-wrap items-center gap-2">
+        <DuxtOpenApiMethod :method="request.method" class="h-6 px-2" />
+
+        <code class="font-mono text-sm break-all">{{ request.url }}</code>
+
+        <!-- The url gets the same badge the entries table gives a withheld
+             value, and for the same reason: a blank `?api_key=` reads as a
+             parameter the collection forgot to fill in unless the page says
+             it was taken out. -->
+        <UiBadge v-if="request.urlRedacted" variant="secondary">
+          {{ $t('duxt.bruno.withheld') }}
+        </UiBadge>
+      </div>
+
+      <div class="mt-4">
+        <slot />
+      </div>
+
+      <div class="not-typeset">
+        <section v-if="request.auth" class="mt-8">
+          <h2 class="duxt-label">{{ $t('duxt.bruno.auth') }}</h2>
+
+          <p class="mt-2 text-sm text-muted-foreground">
+            <code class="font-mono">{{ request.auth.mode }}</code>
+          </p>
+        </section>
+
+        <section v-if="request.params?.length" class="mt-8">
+          <h2 class="duxt-label">{{ $t('duxt.bruno.parameters') }}</h2>
+
+          <div class="mt-3">
+            <DuxtBrunoEntries :entries="request.params" />
+          </div>
+        </section>
+
+        <section v-if="request.headers?.length" class="mt-8">
+          <h2 class="duxt-label">{{ $t('duxt.bruno.headers') }}</h2>
+
+          <div class="mt-3">
+            <DuxtBrunoEntries :entries="request.headers" />
+          </div>
+        </section>
+
+        <section v-if="request.body" class="mt-8">
+          <h2 class="duxt-label">
+            {{ $t('duxt.bruno.body') }}
+            <span class="ms-1 font-mono text-xs text-muted-foreground">
+              {{ request.body.type }}
+            </span>
+          </h2>
+
+          <div class="mt-3">
+            <DuxtCodeBlock
+              v-if="request.body.text"
+              :code="request.body.text"
+              :language="request.body.language ?? 'text'"
+            />
+
+            <DuxtBrunoEntries v-else :entries="request.body.entries" />
+          </div>
+
+          <div v-if="request.body.variables" class="mt-3">
+            <DuxtCodeBlock :code="request.body.variables" language="json" />
+          </div>
+        </section>
+
+        <!-- SAID, NOT SHOWN. A reader has to know the page is not the whole
+             request — a collection whose pre-request script signs a token
+             behaves differently from what is printed above — and the code is
+             neither published nor executed. The download is where it lives. -->
+        <p
+          v-if="request.script || request.tests"
+          class="mt-8 flex items-start gap-2 text-sm text-muted-foreground"
+        >
+          <Icon
+            name="lucide:file-code"
+            aria-hidden="true"
+            class="mt-0.5 size-4 shrink-0"
+          />
+          <span>{{ $t('duxt.bruno.hasCode') }}</span>
+        </p>
+      </div>
+    </div>
+
+    <!-- Only where the site opted in. Without a declared public base URL the
+         page is static, which is the decision rather than a gap: a Bruno
+         collection points at whatever its author could reach, and a send button
+         aimed at somebody's staging host is a failure the page cannot explain. -->
+    <div
+      v-if="operation"
+      class="not-typeset min-w-0 scroll-mt-[var(--duxt-header-offset)]"
+    >
+      <div
+        class="xl:sticky xl:top-[calc(var(--duxt-header-offset)+1rem)] xl:max-h-[calc(100vh-var(--duxt-header-offset)-2.5rem)] xl:overflow-y-auto xl:pe-1"
+      >
+        <DuxtOpenApiClient :operation="operation" :servers="servers" />
+      </div>
+    </div>
+  </div>
+</template>