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

package/app/components/content/BrunoRequests.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+/**
+ * The requests in one folder, as the list a reader scans.
+ *
+ * MDC: `::bruno-requests` on a folder's index page. The method is a coloured
+ * chip and the URL is the line beside it, because "find this request" is the
+ * search a reader actually performs — a list of names alone makes them open
+ * every one to find the `DELETE`.
+ *
+ * FOLDERS FIRST, THEN REQUESTS, which is Bruno's own nesting: a folder holds
+ * both, and OpenAPI's flat tags have no counterpart for it. Rendering the
+ * sub-folders as a second list rather than flattening them is what keeps the
+ * page the same shape as the collection on disk.
+ */
+defineProps<{
+  requests?: { name: string; method: string; url: string; to: string }[];
+  groups?: {
+    name: string;
+    description?: string;
+    requests?: number;
+    to: string;
+  }[];
+}>();
+
+const localeLink = useDuxtLink();
+</script>
+
+<template>
+  <div>
+    <!-- Outside `not-typeset`: the folder's own `docs` block is Markdown and
+         wants the typeset preset; the lists below emphatically do not. -->
+    <slot />
+
+    <section v-if="groups?.length" class="not-typeset mt-6">
+      <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="not-typeset mt-6">
+      <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>
+  </div>
+</template>

package/app/components/content/Callout.vue

@@ -12,20 +12,20 @@ const props = withDefaults(
 );
 
 const variants = {
-  info: { icon: 'lucide:info', rule: 'border-l-sky-500', text: 'text-sky-500' },
+  info: { icon: 'lucide:info', rule: 'border-s-sky-500', text: 'text-sky-500' },
   tip: {
     icon: 'lucide:lightbulb',
-    rule: 'border-l-emerald-500',
+    rule: 'border-s-emerald-500',
     text: 'text-emerald-500'
   },
   warning: {
     icon: 'lucide:triangle-alert',
-    rule: 'border-l-amber-500',
+    rule: 'border-s-amber-500',
     text: 'text-amber-500'
   },
   danger: {
     icon: 'lucide:octagon-alert',
-    rule: 'border-l-red-500',
+    rule: 'border-s-red-500',
     text: 'text-red-500'
   }
 };
@@ -35,7 +35,7 @@ const variant = computed(() => variants[props.type]);
 
 <template>
   <UiAlert
-    class="my-5 flex items-start gap-2.5 rounded-md border border-l-2 bg-muted/30 px-3 py-2.5"
+    class="my-5 flex items-start gap-2.5 rounded-md border border-s-2 bg-muted/30 px-3 py-2.5"
     :class="variant.rule"
   >
     <Icon

package/app/components/content/ChangelogReleases.vue

@@ -29,6 +29,15 @@ const props = withDefaults(
       date?: string;
       to: string;
       groups?: { name: string; count: number }[];
+      /**
+       * Who wrote the commits this release carries, most commits first.
+       *
+       * Written by `sections-changelog.ts` out of the repository's own tags,
+       * and absent wherever the build could not read them — a downloaded
+       * source, a release with no tag yet, a changelog kept by hand. A name
+       * and, where git carried one, a handle; never an address.
+       */
+      contributors?: { name: string; username?: string }[];
     }[];
   }>(),
   { releases: () => [] }
@@ -36,6 +45,18 @@ const props = withDefaults(
 
 const { locale } = useI18n();
 const localeLink = useDuxtLink();
+const duxt = useDuxtConfig();
+
+// `DuxtText` also permits a record of strings, so the resolved-config mapped
+// type narrows this all-optional object too far. It remains an object at
+// runtime; only its template is configurable. The same cast `DuxtPageInfo`
+// makes, over the same key, for the same reason.
+const contributorConfig = duxt.contributors as unknown as
+  | { avatarUrl?: string }
+  | undefined;
+
+const avatar = (username?: string) =>
+  contributorAvatar(contributorConfig?.avatarUrl, username);
 
 /** Every group name the file used, in the order it first used it. */
 const names = computed(() => {
@@ -93,10 +114,34 @@ function toggle(name: string) {
  * The release day, in the reader's language — shared with the meta row a
  * release page draws, so one release cannot be dated two different ways.
  */
-const formatted = (value?: string) => changelogDate(value, locale.value);
+const formatted = (value?: string) =>
+  formatDate(value, locale.value, { calendarDay: true });
 /** How many groups a row names before it starts counting the rest. */
 const SHOWN_GROUPS = 3;
 
+/**
+ * How many faces a row shows before it starts counting the rest.
+ *
+ * Fewer than the groups, because these are pictures rather than words: four
+ * overlapping circles read as "a few people" at a glance, where eight read as a
+ * second column and push the date off the line.
+ */
+const SHOWN_CONTRIBUTORS = 4;
+
+/**
+ * One person's identity ACROSS releases.
+ *
+ * The build dedupes by email, which is the only thing that actually identifies
+ * a committer — and then deliberately does not ship it (see
+ * `git-contributors.ts`). What is left to count across releases is the handle,
+ * or the name where git carried no handle. Two people with the same display
+ * name and neither of them on GitHub therefore count as one; they are also
+ * indistinguishable to the reader, so the figure says exactly what the page
+ * shows.
+ */
+const identity = (person: { name: string; username?: string }) =>
+  person.username ?? person.name;
+
 /**
  * The whole history in two numbers, over the list rather than in it.
  *
@@ -118,14 +163,16 @@ const stats = computed(() => ({
       all + (release.groups ?? []).reduce((sum, group) => sum + group.count, 0),
     0
   ),
-  // What the project actually does, as opposed to how much of it: a history of
-  // forty releases that only ever fixes bugs says something a change count
-  // cannot. Counted over the names the file used, so it is the file's own
-  // vocabulary being counted and not a taxonomy of ours.
-  kinds: new Set(
-    shown.value.flatMap((release) =>
-      (release.groups ?? []).map((group) => group.name)
-    )
+  // WHO, not what kind of. This figure used to count the group names the file
+  // used, which described the changelog rather than the project — and a
+  // documentation site's first question about a project it is weighing up is
+  // how many people are behind it. The kinds are still on the page: they are
+  // what the filter offers and what every row names.
+  //
+  // Counted over what is SHOWN, like every figure here, so filtering to
+  // breaking changes answers "who has ever shipped one".
+  contributors: new Set(
+    shown.value.flatMap((release) => (release.contributors ?? []).map(identity))
   ).size,
   // The last day something shipped — the one figure here that is not a count,
   // and the one a reader checks first on a project they are considering.
@@ -137,8 +184,8 @@ const latest = (release: { to: string }) =>
   release.to === props.releases[0]?.to;
 
 /**
- * The rows as they are drawn: a release, the groups it NAMES, and how many it
- * leaves.
+ * The rows as they are drawn: a release, the groups it NAMES, the people it
+ * SHOWS, and how many of each it leaves.
  *
  * The whole list was the row before this, and on a release that touched
  * everything that was twelve names over two lines — twelve facts on a page
@@ -154,6 +201,10 @@ const latest = (release: { to: string }) =>
  * A FILTERED row names what it was filtered by first. Otherwise selecting
  * "Tests" leaves a release matching on a group its row does not mention, which
  * reads as a filter that let the wrong page through.
+ *
+ * THE PEOPLE ARE NOT RE-SORTED. The build already ordered them by how much of
+ * the release each one wrote, and nothing on this page filters by person — so
+ * the cap takes the front of a list that already means something.
  */
 const rows = computed(() =>
   shown.value.map((release) => {
@@ -165,10 +216,14 @@ const rows = computed(() =>
       return chosen || b.count - a.count;
     });
 
+    const people = release.contributors ?? [];
+
     return {
       release,
       named: groups.slice(0, SHOWN_GROUPS),
-      rest: Math.max(0, groups.length - SHOWN_GROUPS)
+      rest: Math.max(0, groups.length - SHOWN_GROUPS),
+      people: people.slice(0, SHOWN_CONTRIBUTORS),
+      others: Math.max(0, people.length - SHOWN_CONTRIBUTORS)
     };
   })
 );
@@ -249,7 +304,7 @@ const rows = computed(() =>
                 />
                 <span class="truncate">{{ changelogLabel(name) }}</span>
                 <span
-                  class="ml-auto pl-2 text-xs text-muted-foreground tabular-nums"
+                  class="ms-auto ps-2 text-xs text-muted-foreground tabular-nums"
                 >
                   {{ totals[name] }}
                 </span>
@@ -369,15 +424,20 @@ const rows = computed(() =>
         </dt>
       </div>
 
-      <div v-if="stats.kinds" class="flex flex-col gap-1">
+      <!-- Dropped rather than shown as a nought wherever the build could not
+           read a history — a downloaded source, a changelog whose versions
+           were never tagged. "0 contributors" is a claim about the project;
+           an absent figure is a claim about this build, which is the true
+           one. Same rule as the date beside it. -->
+      <div v-if="stats.contributors" class="flex flex-col gap-1">
         <dd
           class="text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl"
         >
-          {{ stats.kinds }}
+          {{ stats.contributors }}
         </dd>
         <dt class="flex items-center gap-1.5 text-xs font-medium text-primary">
-          <Icon name="lucide:list-filter" class="size-3.5" />
-          {{ $t('duxt.changelog.kinds') }}
+          <Icon name="lucide:users" class="size-3.5" />
+          {{ $t('duxt.changelog.contributors') }}
         </dt>
       </div>
 
@@ -434,7 +494,7 @@ const rows = computed(() =>
       move-class="transition-transform duration-200 ease-out motion-reduce:transition-none"
     >
       <li
-        v-for="{ release, named, rest } in rows"
+        v-for="{ release, named, rest, people, others } in rows"
         :key="release.to"
         class="border-t border-border/60 first:border-t-0"
       >
@@ -478,40 +538,101 @@ const rows = computed(() =>
             </time>
           </span>
 
-          <p
-            class="col-span-2 row-start-2 text-xs text-muted-foreground sm:col-span-1 sm:col-start-2 sm:row-start-1"
+          <!-- WHAT the release carried and WHO carried it, in one cell. They
+               share the summary column rather than taking a track each: a
+               fifth grid column would hold an empty gutter on every release
+               whose contributors this build could not read, and the faces
+               belong beside the summary they are the other half of. `flex-wrap`
+               lets the people drop under the groups on a narrow row instead of
+               squeezing the line. -->
+          <div
+            class="col-span-2 row-start-2 flex flex-wrap items-center gap-x-2 gap-y-1 sm:col-span-1 sm:col-start-2 sm:row-start-1"
           >
-            <span v-for="(group, index) in named" :key="group.name">
-              <!-- The separator is punctuation, not a word: set fainter than
-                   either side and given room, so the eye breaks the line into
-                   three facts instead of reading one run of text. -->
+            <p class="text-xs text-muted-foreground">
+              <span v-for="(group, index) in named" :key="group.name">
+                <!-- The separator is punctuation, not a word: set fainter than
+                     either side and given room, so the eye breaks the line into
+                     three facts instead of reading one run of text. -->
+                <span
+                  v-if="index"
+                  aria-hidden="true"
+                  class="px-1 text-muted-foreground/50"
+                >
+                  ·
+                </span>
+                {{ changelogLabel(group.name) }}
+                <span class="ms-0.5 font-medium text-foreground tabular-nums">
+                  {{ group.count }}
+                </span>
+              </span>
+
+              <template v-if="rest">
+                <span aria-hidden="true" class="px-1 text-muted-foreground/50">
+                  ·
+                </span>
+                {{ $t('duxt.changelog.more', { count: rest }) }}
+              </template>
+            </p>
+
+            <!-- FACES, NOT NAMES, and the row is why: four names are a second
+                 line of prose competing with the summary, where four
+                 overlapping circles are read as "a few people" without being
+                 read at all. The name is still THERE for anyone who needs it —
+                 as the image's own alternative text, so a screen reader hears
+                 the people rather than "image, image, image", and so the row's
+                 link says who wrote the release it leads to.
+
+                 They OVERLAP, each ringed in the page's own background, which
+                 is the one arrangement that says "these belong together" at
+                 18px without a label. `ring` rather than `border`, so the ring
+                 sits outside the circle and the picture is not cropped by it. -->
+            <span v-if="people.length" class="flex shrink-0 items-center">
               <span
-                v-if="index"
-                aria-hidden="true"
-                class="px-1 text-muted-foreground/50"
+                v-for="person in people"
+                :key="identity(person)"
+                class="-ms-1.5 first:ms-0"
               >
-                ·
-              </span>
-              {{ changelogLabel(group.name) }}
-              <span class="ml-0.5 font-medium text-foreground tabular-nums">
-                {{ group.count }}
+                <img
+                  v-if="avatar(person.username)"
+                  :src="avatar(person.username)"
+                  :alt="person.name"
+                  width="18"
+                  height="18"
+                  loading="lazy"
+                  class="size-[18px] rounded-full bg-muted ring-2 ring-background"
+                />
+                <!-- No handle, so no picture: git only carries one in a
+                     noreply address, and a guessed avatar is somebody else's
+                     face. The initial is decoration over the name beside it. -->
+                <span
+                  v-else
+                  class="flex size-[18px] items-center justify-center rounded-full bg-muted text-[9px] font-medium ring-2 ring-background"
+                >
+                  <span aria-hidden="true">
+                    {{ person.name.slice(0, 1).toUpperCase() }}
+                  </span>
+                  <span class="sr-only">{{ person.name }}</span>
+                </span>
               </span>
-            </span>
 
-            <template v-if="rest">
-              <span aria-hidden="true" class="px-1 text-muted-foreground/50">
-                ·
+              <span
+                v-if="others"
+                class="-ms-1.5 flex h-[18px] items-center rounded-full bg-muted px-1.5 text-[9px] font-medium text-muted-foreground ring-2 ring-background tabular-nums"
+              >
+                <span aria-hidden="true">+{{ others }}</span>
+                <span class="sr-only">
+                  {{ $t('duxt.changelog.more', { count: others }) }}
+                </span>
               </span>
-              {{ $t('duxt.changelog.more', { count: rest }) }}
-            </template>
-          </p>
+            </span>
+          </div>
 
           <!-- The affordance every card and row of this site uses: the arrow
                that steps forward under the pointer. -->
           <Icon
             name="lucide:arrow-right"
             aria-hidden="true"
-            class="col-start-2 row-start-1 size-3.5 shrink-0 self-center text-muted-foreground transition-transform group-hover:translate-x-0.5 sm:col-start-4"
+            class="col-start-2 row-start-1 size-3.5 shrink-0 self-center text-muted-foreground rtl:-scale-x-100 transition-transform ltr:group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5 sm:col-start-4"
           />
         </NuxtLink>
       </li>

package/app/components/content/CodeGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui';
+import { TabsContent, TabsRoot } from 'reka-ui';
 
 /**
  * Several fences, one block, one tab each.
@@ -29,6 +29,8 @@ interface Entry {
   label: string;
   icon: string;
   code: string;
+  /** The fence's own language, where it declared one — for the copy event. */
+  language?: string;
   node: VNode;
 }
 
@@ -56,6 +58,7 @@ const entries = computed<Entry[]>(() => {
           props.language ? 'lucide:terminal' : 'lucide:file'
         ),
         code: props.code ?? '',
+        language: props.language,
         node
       };
     });
@@ -87,9 +90,8 @@ const shell = useTemplateRef<HTMLElement>('shell');
 const body = useTemplateRef<HTMLElement>('body');
 
 useDuxtAnimatedHeight(shell, body);
-const copied = ref(false);
-const notify = useDuxtToast();
-const { t } = useI18n();
+const { copied, copy: copyText } = useDuxtCopy();
+const analytics = useDuxtAnalytics();
 
 async function copy() {
   const text =
@@ -97,14 +99,15 @@ async function copy() {
     root.value?.querySelector('[data-state="active"] code')?.textContent ||
     '';
 
-  try {
-    await navigator.clipboard.writeText(text);
-    copied.value = true;
-    notify.success(t('duxt.code.copiedToast'));
-    setTimeout(() => (copied.value = false), 2000);
-  } catch {
-    notify.error(t('duxt.page.copyFailed'));
-  }
+  if (!(await copyText(text))) return;
+
+  // Which tab was showing is the interesting part — a group exists because
+  // the same thing is spelled several ways, and this says which spelling won.
+  analytics.track({
+    name: 'copy',
+    kind: 'code-group',
+    language: current.value?.language
+  });
 }
 </script>
 
@@ -119,37 +122,26 @@ async function copy() {
          inside it is a control a screen reader is told to treat as a tab and
          cannot. So the row is a plain box and the tablist is the part of it
          that actually holds tabs. -->
-    <div
-      class="flex min-h-11 items-center gap-1 border-b bg-muted/40 px-2 py-1.5"
-    >
-      <TabsList
-        class="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto"
+    <DuxtCodeToolbar>
+      <UiTabsList
+        variant="bare"
+        class="min-w-0 flex-1 overflow-x-auto"
         :aria-label="$t('duxt.page.tabs') as string"
       >
-        <TabsTrigger
+        <UiTabsTrigger
           v-for="entry in entries"
           :key="entry.value"
           :value="entry.value"
-          class="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs transition-colors data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground hover:bg-accent hover:text-foreground"
+          variant="pill"
+          class="font-mono"
         >
           <Icon :name="entry.icon" class="size-3.5" />
           {{ entry.label }}
-        </TabsTrigger>
-      </TabsList>
-
-      <UiButton
-        variant="ghost"
-        size="icon"
-        class="size-7 shrink-0"
-        :aria-label="copied ? $t('duxt.code.copied') : $t('duxt.code.copy')"
-        @click="copy"
-      >
-        <Icon
-          :name="copied ? 'lucide:check' : 'lucide:copy'"
-          class="size-3.5"
-        />
-      </UiButton>
-    </div>
+        </UiTabsTrigger>
+      </UiTabsList>
+
+      <DuxtCopyButton :copied="copied" @click="copy" />
+    </DuxtCodeToolbar>
 
     <!-- THE BLOCK FOLLOWS THE FILE THAT IS SHOWING, over 300ms.
 
@@ -166,12 +158,24 @@ async function copy() {
       ref="shell"
       class="overflow-hidden motion-safe:transition-[height] motion-safe:duration-300 motion-safe:ease-out"
     >
-      <div ref="body">
+      <div ref="body" class="relative">
+        <!-- EVERY PANEL STAYS MOUNTED, and the switch is a CROSSFADE. Mounted on
+             demand, a new panel left the body empty for about 150ms and the box
+             folded shut and opened again; hidden outright, the new file was
+             simply there, cut off by the box it had not yet grown into.
+
+             So the panel leaving is lifted out of the flow — absolute, over the
+             top of the one arriving — and fades out while the new one fades in.
+             Out of the flow it takes no height, so the box still follows the
+             file that shows. `invisible` lands when the fade ends, which keeps
+             the hidden panels out of the tab order and away from a screen
+             reader. -->
         <TabsContent
           v-for="entry in entries"
           :key="entry.value"
           :value="entry.value"
-          class="focus-visible:outline-none [&_.duxt-code]:my-0 [&_.duxt-code]:rounded-none [&_.duxt-code]:border-0"
+          force-mount
+          class="focus-visible:outline-none motion-safe:transition-[opacity,visibility] motion-safe:duration-200 motion-safe:ease-out data-[state=inactive]:pointer-events-none data-[state=inactive]:invisible data-[state=inactive]:absolute data-[state=inactive]:inset-x-0 data-[state=inactive]:top-0 data-[state=inactive]:opacity-0 [&_.duxt-code]:my-0 [&_.duxt-code]:rounded-none [&_.duxt-code]:border-0"
         >
           <!-- `:header="false"`: the tab above already says what the bar inside
                would, and the copy button now sits beside the tabs. -->

package/app/components/content/Field.vue

@@ -37,7 +37,7 @@ defineProps<{
 
       <code
         v-if="$props.default !== undefined"
-        class="ml-auto font-mono text-xs text-muted-foreground"
+        class="ms-auto font-mono text-xs text-muted-foreground"
       >
         = {{ $props.default }}
       </code>

package/app/components/content/FileTree.vue

@@ -65,7 +65,7 @@ const expanded = computed(() => {
         v-slot="{ isExpanded }"
         :key="item._id"
         v-bind="item.bind"
-        :style="{ paddingLeft: `${item.level - 1}rem` }"
+        :style="{ paddingInlineStart: `${item.level - 1}rem` }"
         class="flex items-center gap-1.5 rounded px-1 py-[3px] outline-none focus:bg-accent data-[selected]:bg-accent/60"
       >
         <template v-if="isDirectory(item.value)">

package/app/components/content/OpenApiOperation.vue

@@ -107,7 +107,7 @@ const clientAnchor = computed(() =>
             {{ $t('duxt.openapi.requestBody') }}
             <span
               v-if="operation.requestBody.required"
-              class="ml-1 text-xs font-medium text-destructive"
+              class="ms-1 text-xs font-medium text-destructive"
             >
               {{ $t('duxt.openapi.required') }}
             </span>
@@ -151,7 +151,7 @@ const clientAnchor = computed(() =>
          client sits after the description, which is the order a phone reads.
 
          AND IT SCROLLS ITSELF, the way the sidebar and the table of contents
-         already do — same expression, `100vh` less the chrome above it. Sticky
+         already do — same expression, `100vh` less the header above it. Sticky
          alone pinned a panel taller than the viewport, so the request samples
          under the send button were cut off and only came into view once the
          reader had scrolled the whole page to its end: the panel is beside the
@@ -161,7 +161,7 @@ const clientAnchor = computed(() =>
          normal flow and a second scrollbar inside the page would be one nobody
          asked for.
 
-         AND IT KEEPS A REM OFF THE CHROME. Pinned at exactly `--duxt-header-offset`
+         AND IT KEEPS A REM OFF THE HEADER. Pinned at exactly `--duxt-header-offset`
          the card's top border sat against the navbar's bottom border, so the
          two read as one thick line and the panel looked attached to the header
          rather than floating under it. The `max-h` gives the same rem back at
@@ -171,7 +171,7 @@ const clientAnchor = computed(() =>
       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:pr-1"
+        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"

package/app/components/content/OpenApiOperations.vue

@@ -46,7 +46,7 @@ const localeLink = useDuxtLink();
 
           <span
             v-if="entry.summary"
-            class="w-full text-sm text-muted-foreground sm:ml-auto sm:w-auto sm:text-right"
+            class="w-full text-sm text-muted-foreground sm:ms-auto sm:w-auto sm:text-end"
           >
             {{ entry.summary }}
           </span>

package/app/components/content/OpenApiOverview.vue

@@ -151,7 +151,7 @@ const operations = computed(() =>
               <Icon
                 name="lucide:arrow-right"
                 aria-hidden="true"
-                class="mt-1 size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5"
+                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>