@grimoire-rs/indexer 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -21,6 +21,41 @@ props `{ pkg }` → `{ pkg, compact }`.
 
 ## [Unreleased]
 
+## [0.5.2] - 2026-08-31
+
+### Fixed
+
+- **The sort control drew two borders when clicked.** Hover tints a control's
+  border to the accent and focus drew a 2px accent outline standing 1px clear
+  of it, so anyone who reached the control with a mouse had both at once — one
+  state reading as two lines with a gap between them. The ring merges onto the
+  border now, the way the card's focus state already did, and the offset comes
+  off every bordered control in the toolbar together rather than off the one
+  that showed it: the search field, the keyword overflow menu's search, both
+  sort halves and both view picks. Keyword chips gain the same ring, having
+  taken the browser's default until now.
+- **A long address no longer wraps the card's head onto a second line.** A
+  namespace breaks at its own slashes and dots, so a wide one took two rows and
+  left the card taller than its neighbours with the tail of the address against
+  the padding edge. It stays on one line and the overflow is trimmed from the
+  *front* — the registry host is on every address in an index and the
+  repository at the tail is what tells two apart — with the whole of it in the
+  element's `title`.
+- **Keyword chips could stutter, or stop part-way through the rail's slide.**
+  The rail's FLIP pass inverted each chip with an inline `transition: none` and
+  a `translate`, then dropped both on the next animation frame; any commit
+  landing inside that window left the chip carrying the offset with its
+  transition disabled, and nothing else took those off. It also measured seats
+  with `getBoundingClientRect`, which reports where a chip is *drawn*, so a
+  chip caught mid-slide recorded its animated box and the next inversion
+  compounded the error instead of correcting it. Neither window was rare: the
+  rail's own fit measurement re-commits whenever a rescore changes how many
+  chips fit. Seats now come from `offsetLeft`/`offsetTop`, which ignore
+  transforms and scroll, and the slide is a Web Animation — it starts without a
+  frame, writes nothing to `style`, and clears itself when it finishes or is
+  cancelled. `prefers-reduced-motion` is honoured by the effect rather than by
+  the stylesheet, and `--grim-duration-slow` is still its length.
+
 ## [0.5.1] - 2026-08-31
 
 ### Added
@@ -265,6 +300,7 @@ props `{ pkg }` → `{ pkg, compact }`.
   boot can leave a `.index-*` holding Vite's `deps_temp_<hash>`, which the
   dependency optimizer recreates after the removal has already returned.
 
-[Unreleased]: https://github.com/grimoire-rs/indexer/compare/v0.5.1...HEAD
+[Unreleased]: https://github.com/grimoire-rs/indexer/compare/v0.5.2...HEAD
+[0.5.2]: https://github.com/grimoire-rs/indexer/compare/v0.5.1...v0.5.2
 [0.5.1]: https://github.com/grimoire-rs/indexer/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/grimoire-rs/indexer/compare/v0.4.4...v0.5.0

package/dist/renderer/astro/components/Catalog.js

@@ -258,7 +258,18 @@ export default function Catalog({ packages, vscodeExtension, }) {
         ...(controlsRef.current?.querySelectorAll('button.chip:not([aria-hidden="true"])') ?? []),
     ];
     const railRefs = useRef(new Map());
-    const railRects = useRef(new Map());
+    /**
+     * Where each chip sat at the last commit, as `offsetLeft`/`offsetTop`.
+     *
+     * Layout positions, deliberately, not `getBoundingClientRect`: the offsets
+     * ignore transforms and page scroll, so a chip measured mid-slide reports
+     * the seat it is animating towards rather than the box it is drawn in this
+     * frame. See the FLIP effect below for why that distinction is the whole
+     * fix.
+     */
+    const railSeats = useRef(new Map());
+    /** The slide each chip is currently running, so a new one can replace it. */
+    const railSlides = useRef(new WeakMap());
     const railRef = useRef(null);
     const kwMenuRef = useRef(null);
     const kwTriggerRef = useRef(null);
@@ -373,71 +384,76 @@ export default function Catalog({ packages, vscodeExtension, }) {
      * between two frames reads as having been *replaced*, and a reader who
      * cannot see that a chip moved has no reason to believe it is the same one.
      *
-     * First (the map of rects kept from the last commit), Last (measured now),
-     * Invert (an inline translate back to where the chip was), Play (dropped on
-     * the next frame, so the stylesheet's transition carries it home). Measure
-     * every chip before transforming any: `translate` composites and does not
-     * reflow, but reading a rect after writing a style on a sibling is the
-     * shape that makes a layout thrash, and this runs per keystroke.
+     * Two choices carry the whole thing, and both are here because the shape
+     * they replace — an inline `translate` under the stylesheet's transition,
+     * dropped again on a `requestAnimationFrame` — could leave a chip stopped
+     * off its seat with no path back:
+     *
+     * - **Seats come from `offsetLeft`/`offsetTop`, never from
+     *   `getBoundingClientRect`.** The offsets are layout positions and ignore
+     *   both transforms and scroll; a rect is where the chip is *drawn*, so a
+     *   chip measured mid-slide recorded its animated box and the next
+     *   inversion compounded that error — the stutter. Mid-slide is the common
+     *   case, not a rare one: the fit measurement above commits a second time
+     *   whenever a rescore changes how many chips fit, and that commit lands
+     *   inside the previous slide. Because the offsets are transform-blind,
+     *   that second commit now measures the same seats and starts nothing.
+     * - **The slide is a Web Animation, not an inline style.** It needs no
+     *   frame to start, so no commit can land between an invert and its play
+     *   and freeze a chip at the offset. It writes nothing to `style`, so
+     *   there is nothing left to strip when a chip unmounts or a pass is
+     *   superseded. And it clears itself the instant it finishes or is
+     *   cancelled, which makes "the rail always ends up in its real state" a
+     *   property of the mechanism rather than of a cleanup remembering to run.
      */
     useLayoutEffect(() => {
-        // Undo whatever the last pass left on the chips before measuring
-        // anything. Two reasons, and both were visible: `getBoundingClientRect`
-        // reports the *translated* box, so a chip caught mid-slide would be
-        // measured where it is drawn rather than where it belongs and the next
-        // inversion would compound that error; and a chip whose play frame never
-        // ran is still carrying `transition: none` with an offset, which is a chip
-        // frozen off its seat. Clearing here is what unfreezes it.
-        //
-        // Mid-slide is not a rare case: the fit measurement above commits a second
-        // time whenever the rescore changes how many chips fit, and that commit
-        // lands between this one and its animation frame.
-        for (const el of railRefs.current.values()) {
-            el.style.transition = "";
-            el.style.translate = "";
-        }
-        const previous = railRects.current;
+        const previous = railSeats.current;
         const current = new Map();
         const moved = [];
-        // A second pass, deliberately: every write above is flushed before the
-        // first read below, rather than interleaving them per chip.
         for (const [keyword, el] of railRefs.current) {
-            const rect = el.getBoundingClientRect();
-            current.set(keyword, rect);
+            const x = el.offsetLeft;
+            const y = el.offsetTop;
+            current.set(keyword, { x, y });
             const was = previous.get(keyword);
             if (!was)
                 continue;
-            const dx = was.left - rect.left;
-            const dy = was.top - rect.top;
+            const dx = was.x - x;
+            const dy = was.y - y;
             if (dx !== 0 || dy !== 0)
                 moved.push({ el, dx, dy });
         }
-        railRects.current = current;
+        // Rebuilt from `railRefs` every pass, so a chip that left the rail leaves
+        // this map with it and cannot seed a slide if it comes back elsewhere.
+        railSeats.current = current;
         if (moved.length === 0)
             return;
+        const rail = railRef.current;
+        // Guarded rather than assumed, like the fit observer above: the test
+        // renderer's DOM has no Web Animations API, and a rail that does not
+        // slide is not worth throwing during a render over.
+        if (!rail || typeof rail.animate !== "function")
+            return;
+        // The motion is the ornament here — the filtering works identically
+        // without it — so a reader who asked for less of it gets none.
+        if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
+            return;
+        // The stylesheet stays the source of truth for how long a slide runs:
+        // `--grim-duration-slow` is written in milliseconds and that is the unit
+        // the Web Animations API takes, so the token survives the move out of CSS.
+        // Read once, after every seat above, so the reads and the writes below
+        // stay in two passes rather than interleaving per chip.
+        const ms = Number.parseFloat(getComputedStyle(rail).getPropertyValue("--grim-duration-slow"));
         for (const { el, dx, dy } of moved) {
-            el.style.transition = "none";
-            el.style.translate = `${dx}px ${dy}px`;
+            // One slide per chip. A chip that moves again mid-slide takes the new
+            // delta from its layout seat, which starts the second slide a step off
+            // where the first had drawn it — a jump measured in the pixels one
+            // frame of easing covers, and it is bounded, unlike two animations
+            // compositing the same property against each other.
+            // ponytail: not blended with the in-flight offset, which would cost a
+            // computed-style read per chip in the middle of the write pass.
+            railSlides.current.get(el)?.cancel();
+            railSlides.current.set(el, el.animate({ translate: [`${dx}px ${dy}px`, "none"] }, { duration: Number.isFinite(ms) ? ms : 200, easing: "ease-out" }));
         }
-        const frame = requestAnimationFrame(() => {
-            for (const { el } of moved) {
-                el.style.transition = "";
-                el.style.translate = "";
-            }
-        });
-        return () => {
-            cancelAnimationFrame(frame);
-            // Cancelling is not enough on its own. Nothing else takes these off, so
-            // a commit landing before the frame ran would leave every moved chip
-            // sitting at its inverted offset with transitions disabled — the rail
-            // stopping halfway and staying there. Deselecting the last keyword is
-            // the reliable way to see it: the rescore is at its largest, so the fit
-            // changes and the extra commit always lands.
-            for (const { el } of moved) {
-                el.style.transition = "";
-                el.style.translate = "";
-            }
-        };
     });
     /** Move focus `delta` cards along, clamping at both ends rather than wrapping. */
     const focusCard = (from, delta) => {

package/dist/renderer/astro/components/Catalog.tsx

@@ -334,7 +334,18 @@ export default function Catalog({
   ];
 
   const railRefs = useRef(new Map<string, HTMLElement>());
-  const railRects = useRef(new Map<string, DOMRect>());
+  /**
+   * Where each chip sat at the last commit, as `offsetLeft`/`offsetTop`.
+   *
+   * Layout positions, deliberately, not `getBoundingClientRect`: the offsets
+   * ignore transforms and page scroll, so a chip measured mid-slide reports
+   * the seat it is animating towards rather than the box it is drawn in this
+   * frame. See the FLIP effect below for why that distinction is the whole
+   * fix.
+   */
+  const railSeats = useRef(new Map<string, { x: number; y: number }>());
+  /** The slide each chip is currently running, so a new one can replace it. */
+  const railSlides = useRef(new WeakMap<HTMLElement, Animation>());
   const railRef = useRef<HTMLDivElement>(null);
 
   const kwMenuRef = useRef<HTMLDivElement>(null);
@@ -450,68 +461,79 @@ export default function Catalog({
    * between two frames reads as having been *replaced*, and a reader who
    * cannot see that a chip moved has no reason to believe it is the same one.
    *
-   * First (the map of rects kept from the last commit), Last (measured now),
-   * Invert (an inline translate back to where the chip was), Play (dropped on
-   * the next frame, so the stylesheet's transition carries it home). Measure
-   * every chip before transforming any: `translate` composites and does not
-   * reflow, but reading a rect after writing a style on a sibling is the
-   * shape that makes a layout thrash, and this runs per keystroke.
+   * Two choices carry the whole thing, and both are here because the shape
+   * they replace — an inline `translate` under the stylesheet's transition,
+   * dropped again on a `requestAnimationFrame` — could leave a chip stopped
+   * off its seat with no path back:
+   *
+   * - **Seats come from `offsetLeft`/`offsetTop`, never from
+   *   `getBoundingClientRect`.** The offsets are layout positions and ignore
+   *   both transforms and scroll; a rect is where the chip is *drawn*, so a
+   *   chip measured mid-slide recorded its animated box and the next
+   *   inversion compounded that error — the stutter. Mid-slide is the common
+   *   case, not a rare one: the fit measurement above commits a second time
+   *   whenever a rescore changes how many chips fit, and that commit lands
+   *   inside the previous slide. Because the offsets are transform-blind,
+   *   that second commit now measures the same seats and starts nothing.
+   * - **The slide is a Web Animation, not an inline style.** It needs no
+   *   frame to start, so no commit can land between an invert and its play
+   *   and freeze a chip at the offset. It writes nothing to `style`, so
+   *   there is nothing left to strip when a chip unmounts or a pass is
+   *   superseded. And it clears itself the instant it finishes or is
+   *   cancelled, which makes "the rail always ends up in its real state" a
+   *   property of the mechanism rather than of a cleanup remembering to run.
    */
   useLayoutEffect(() => {
-    // Undo whatever the last pass left on the chips before measuring
-    // anything. Two reasons, and both were visible: `getBoundingClientRect`
-    // reports the *translated* box, so a chip caught mid-slide would be
-    // measured where it is drawn rather than where it belongs and the next
-    // inversion would compound that error; and a chip whose play frame never
-    // ran is still carrying `transition: none` with an offset, which is a chip
-    // frozen off its seat. Clearing here is what unfreezes it.
-    //
-    // Mid-slide is not a rare case: the fit measurement above commits a second
-    // time whenever the rescore changes how many chips fit, and that commit
-    // lands between this one and its animation frame.
-    for (const el of railRefs.current.values()) {
-      el.style.transition = "";
-      el.style.translate = "";
-    }
-    const previous = railRects.current;
-    const current = new Map<string, DOMRect>();
+    const previous = railSeats.current;
+    const current = new Map<string, { x: number; y: number }>();
     const moved: { el: HTMLElement; dx: number; dy: number }[] = [];
-    // A second pass, deliberately: every write above is flushed before the
-    // first read below, rather than interleaving them per chip.
     for (const [keyword, el] of railRefs.current) {
-      const rect = el.getBoundingClientRect();
-      current.set(keyword, rect);
+      const x = el.offsetLeft;
+      const y = el.offsetTop;
+      current.set(keyword, { x, y });
       const was = previous.get(keyword);
       if (!was) continue;
-      const dx = was.left - rect.left;
-      const dy = was.top - rect.top;
+      const dx = was.x - x;
+      const dy = was.y - y;
       if (dx !== 0 || dy !== 0) moved.push({ el, dx, dy });
     }
-    railRects.current = current;
+    // Rebuilt from `railRefs` every pass, so a chip that left the rail leaves
+    // this map with it and cannot seed a slide if it comes back elsewhere.
+    railSeats.current = current;
     if (moved.length === 0) return;
+    const rail = railRef.current;
+    // Guarded rather than assumed, like the fit observer above: the test
+    // renderer's DOM has no Web Animations API, and a rail that does not
+    // slide is not worth throwing during a render over.
+    if (!rail || typeof rail.animate !== "function") return;
+    // The motion is the ornament here — the filtering works identically
+    // without it — so a reader who asked for less of it gets none.
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    // The stylesheet stays the source of truth for how long a slide runs:
+    // `--grim-duration-slow` is written in milliseconds and that is the unit
+    // the Web Animations API takes, so the token survives the move out of CSS.
+    // Read once, after every seat above, so the reads and the writes below
+    // stay in two passes rather than interleaving per chip.
+    const ms = Number.parseFloat(
+      getComputedStyle(rail).getPropertyValue("--grim-duration-slow"),
+    );
     for (const { el, dx, dy } of moved) {
-      el.style.transition = "none";
-      el.style.translate = `${dx}px ${dy}px`;
+      // One slide per chip. A chip that moves again mid-slide takes the new
+      // delta from its layout seat, which starts the second slide a step off
+      // where the first had drawn it — a jump measured in the pixels one
+      // frame of easing covers, and it is bounded, unlike two animations
+      // compositing the same property against each other.
+      // ponytail: not blended with the in-flight offset, which would cost a
+      // computed-style read per chip in the middle of the write pass.
+      railSlides.current.get(el)?.cancel();
+      railSlides.current.set(
+        el,
+        el.animate(
+          { translate: [`${dx}px ${dy}px`, "none"] },
+          { duration: Number.isFinite(ms) ? ms : 200, easing: "ease-out" },
+        ),
+      );
     }
-    const frame = requestAnimationFrame(() => {
-      for (const { el } of moved) {
-        el.style.transition = "";
-        el.style.translate = "";
-      }
-    });
-    return () => {
-      cancelAnimationFrame(frame);
-      // Cancelling is not enough on its own. Nothing else takes these off, so
-      // a commit landing before the frame ran would leave every moved chip
-      // sitting at its inverted offset with transitions disabled — the rail
-      // stopping halfway and staying there. Deselecting the last keyword is
-      // the reliable way to see it: the rescore is at its largest, so the fit
-      // changes and the extra commit always lands.
-      for (const { el } of moved) {
-        el.style.transition = "";
-        el.style.translate = "";
-      }
-    };
   });
 
   /** Move focus `delta` cards along, clamping at both ends rather than wrapping. */

package/dist/renderer/astro/components/PackageCard.js

@@ -38,7 +38,7 @@ export function PackageCard({ pkg: p, vscodeExtension, activeKeywords, onToggleK
                             const thread = externalUrl(p.rating.url);
                             const vote = vscodeVoteUrl(vscodeExtension, p.ref);
                             return (_jsxs("span", { class: "rating-group", children: [thread ? (_jsxs("a", { class: "rating-count", href: thread, target: "_blank", rel: "noopener noreferrer", tabIndex: -1, title: `${votes} — open the thread to vote`, "aria-label": `${p.name}: ${votes}. Open the voting thread`, children: [_jsx(ArrowBigUp, { size: 13, "aria-hidden": "true" }), p.rating.up] })) : (_jsxs("span", { class: "rating-count", title: votes, children: [_jsx(ArrowBigUp, { size: 13, "aria-hidden": "true" }), p.rating.up] })), vote && (_jsx("a", { class: "rating-vote", href: vote, tabIndex: -1, title: "Upvote in VS Code", "aria-label": `Upvote ${p.name} in VS Code`, children: _jsx(BrandMark, { path: mdiMicrosoftVisualStudioCode, size: 12 }) }))] }));
-                        })(), _jsxs("p", { class: "namespace", children: [_jsx("span", { class: "kind", "data-slot": "package-kind", children: p.kind }), _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), p.namespace] })] }), p.keywords && p.keywords.length > 0 && (_jsx("div", { class: "keywords", "data-slot": "package-keywords", children: p.keywords.slice(0, 5).map((kw) => (_jsx("button", { type: "button", class: activeKeywords.includes(kw)
+                        })(), _jsxs("p", { class: "namespace", children: [_jsx("span", { class: "kind", "data-slot": "package-kind", children: p.kind }), _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), _jsx("span", { class: "address", title: p.namespace, children: p.namespace })] })] }), p.keywords && p.keywords.length > 0 && (_jsx("div", { class: "keywords", "data-slot": "package-keywords", children: p.keywords.slice(0, 5).map((kw) => (_jsx("button", { type: "button", class: activeKeywords.includes(kw)
                         ? "chip keyword active"
                         : "chip keyword", "aria-pressed": activeKeywords.includes(kw), tabIndex: -1, onClick: () => onToggleKeyword(kw), children: kw }, kw))) })), p.description && _jsx("p", { class: "description", children: p.description }), _jsxs("div", { class: "card-foot", children: [_jsxs("div", { class: "copy-group", children: [_jsx(CopyButton, { command: `grim add --global ${p.ref}`, variant: "global", name: `global add for ${p.name}` }), _jsx(CopyButton, { command: `grim add ${p.ref}`, name: `project add for ${p.name}` }), vscodeUrl(vscodeExtension, p.ref) && (_jsx("a", { class: "copy vscode", href: vscodeUrl(vscodeExtension, p.ref), title: "Open in VS Code", "aria-label": `Open ${p.name} in VS Code`, tabIndex: -1, children: _jsx(BrandMark, { path: mdiMicrosoftVisualStudioCode }) }))] }), (() => {
                         const at = lastUpdated(p);

package/dist/renderer/astro/components/PackageCard.tsx

@@ -175,7 +175,15 @@ export function PackageCard({
               {p.kind}
             </span>
             <span aria-hidden="true"> · </span>
-            {p.namespace}
+            {/* Its own element so the row can give the address the slack and
+                nothing else: the kind is one short word and keeps its width,
+                and what does not fit is dropped off the FRONT — a registry
+                host is the least distinguishing part of an address and the
+                repository is the most. `title` keeps the whole of it
+                reachable, since the ellipsis hides the head. */}
+            <span class="address" title={p.namespace}>
+              {p.namespace}
+            </span>
           </p>
         </div>
         {/* Under the head, above the description: what the package

package/dist/renderer/astro/layouts/Base.astro

@@ -849,10 +849,6 @@ const { title, description, image = config.logo ?? config.favicon } = Astro.prop
           font-size: var(--grim-text-md);
           min-width: 0;
         }
-        .controls input[type="search"]:focus-visible {
-          outline: 2px solid var(--grim-color-accent);
-          outline-offset: 1px;
-        }
         /* The `/` shortcut, shown as the key it is. It is a hint for a field
            that is not yet in use, so it withdraws the moment the field is
            focused or holds a query — at which point it would only be
@@ -1026,11 +1022,6 @@ const { title, description, image = config.logo ?? config.favicon } = Astro.prop
         .sort-field:focus-visible {
           z-index: 1;
         }
-        .sort-dir:focus-visible,
-        .sort-field:focus-visible {
-          outline: 2px solid var(--grim-color-accent);
-          outline-offset: 1px;
-        }
         /* One box for every chip in the filter row — the kinds, the keywords,
            the deprecated toggle and the overflow menu's trigger alike. The
            line-height is stated rather than inherited because a `<summary>`
@@ -1062,21 +1053,13 @@ const { title, description, image = config.logo ?? config.favicon } = Astro.prop
           background: var(--grim-color-accent-soft);
         }
         /* The keyword rail reorders on every click — it is rescored against
-           what is on screen — and the chips slide rather than jump. The FLIP
-           effect in `Catalog.tsx` sets an inline `translate` back to where
-           each chip was and drops it on the next frame; this transition is
-           what plays that back. Without a declared duration the invert would
-           simply stick. */
-        .chip.kw {
-          transition:
-            border-color var(--grim-duration-base) ease,
-            translate var(--grim-duration-slow) ease-out;
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .chip.kw {
-            transition: border-color var(--grim-duration-base) ease;
-          }
-        }
+           what is on screen — and the chips slide rather than jump. There is
+           deliberately no `translate` transition here: the FLIP effect in
+           `Catalog.tsx` runs each slide as a Web Animation instead, reading
+           `--grim-duration-slow` for its length and honouring
+           `prefers-reduced-motion` itself. A transition needs an inline style
+           to drive it, and an inline style is what a superseded pass used to
+           leave behind on a chip stopped off its seat. */
         /* The overflow menu. A popover, and it has to be one: `.filter-row`
            above is a scroll container, and an absolutely-positioned panel
            inside a scroll container is cropped to the row AND stretches the
@@ -1143,10 +1126,6 @@ const { title, description, image = config.logo ?? config.favicon } = Astro.prop
           font: inherit;
           font-size: var(--grim-text-sm);
         }
-        .kw-menu-search:focus-visible {
-          outline: 2px solid var(--grim-color-accent);
-          outline-offset: 1px;
-        }
         .kw-menu-list {
           display: flex;
           flex-direction: column;
@@ -1240,9 +1219,26 @@ const { title, description, image = config.logo ?? config.favicon } = Astro.prop
         .view-pick.active {
           z-index: 1;
         }
+
+        /* One focus ring for every bordered control in the toolbar, and it is
+           the card's: the border takes the accent and the outline sits
+           directly on it, so the two merge into one thicker edge.
+
+           An offset ring is what put two borders on the sort combo. Hover
+           already tints the border, so a ring standing 1px clear of it drew a
+           second line in the same colour — one state reading as two. Every
+           control here tints its border on hover or while active, so the
+           offset had to go from all of them together rather than from the one
+           that was reported. */
+        .chip:focus-visible,
+        .controls input[type="search"]:focus-visible,
+        .kw-menu-search:focus-visible,
+        .sort-dir:focus-visible,
+        .sort-field:focus-visible,
         .view-pick:focus-visible {
           outline: 2px solid var(--grim-color-accent);
-          outline-offset: 1px;
+          outline-offset: 0;
+          border-color: var(--grim-color-accent);
         }
 
         .grid {
@@ -1745,6 +1741,34 @@ const { title, description, image = config.logo ?? config.favicon } = Astro.prop
           font-size: var(--grim-text-xs);
           line-height: 1.3;
           font-family: ui-monospace, "SFMono-Regular", monospace;
+          /* One line, whatever the address is. A namespace breaks at its own
+             slashes and dots, so left to itself a long one wrapped to a second
+             line and made the card's head taller than its neighbours'. */
+          display: flex;
+          min-width: 0;
+          white-space: nowrap;
+        }
+        /* Trimmed from the FRONT: `github.com/` is on every address in an
+           index and the repository at the tail is what tells two apart, so the
+           head is what to spend.
+
+           `direction: rtl` is the mechanism — `text-overflow` ellipsises at
+           the line's inline END, which in an RTL box is its left edge, and
+           `text-align: left` keeps a short address sitting under the name
+           rather than flung to the right. The address itself still reads
+           left-to-right: it is one run of Latin characters, so the bidi
+           algorithm lays it out LTR inside the RTL box. That holds because a
+           namespace neither starts nor ends with punctuation — one that did
+           would have that character reordered to the far end.
+
+           The two-value `text-overflow: ellipsis ""` would say this directly
+           and is Firefox-only. */
+        .namespace .address {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          direction: rtl;
+          text-align: left;
         }
         /* The rating is one control with two halves — the count, which opens
            the forge thread, and the vote, which casts one — joined the way

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grimoire-rs/indexer",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "CLI + Astro integration for running your own grim package index",
   "type": "module",
   "license": "Apache-2.0",