@lupinum/ginko-docs 0.2.2 → 0.2.3

package/app/features/docs/components/DocsSidebarTabs.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import type { DocsNavigationSection } from "#ginko-docs/features/docs/docs-navigation";
+import { computed } from "vue";
+import {
+  resolveDocsSectionTargetPath,
+  type DocsNavigationSection,
+} from "#ginko-docs/features/docs/docs-navigation";
+import { Tabs, TabsList, TabsTrigger } from "#ginko-docs/components/ui/tabs";
 
-defineProps<{
+const props = defineProps<{
   sections: Array<DocsNavigationSection & { title: string }>;
   activeId: string;
 }>();
@@ -9,27 +14,46 @@ defineProps<{
 const emit = defineEmits<{
   "update:activeId": [id: string];
 }>();
+
+const tabs = computed(() =>
+  props.sections.map((section) => ({
+    id: section.id,
+    title: section.title,
+    target: resolveDocsSectionTargetPath(section),
+  })),
+);
+
+function onTabClick(id: string, event: MouseEvent) {
+  // Re-clicking the active section would otherwise navigate away from the
+  // current page to the section's first page.
+  if (id === props.activeId) event.preventDefault();
+}
 </script>
 
 <template>
-  <div
-    class="inline-flex h-9 w-full items-center justify-center overflow-hidden rounded-lg bg-muted p-[3px] text-muted-foreground"
-    role="tablist"
-    aria-orientation="horizontal"
-    data-slot="docs-sidebar-tabs"
-  >
-    <button
-      v-for="section in sections"
-      :key="section.id"
-      type="button"
-      role="tab"
-      :title="section.title"
-      :aria-selected="activeId === section.id"
-      :data-state="activeId === section.id ? 'active' : 'inactive'"
-      class="inline-flex h-[calc(100%-1px)] min-w-0 flex-1 basis-0 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground"
-      @click="emit('update:activeId', section.id)"
-    >
-      {{ section.title }}
-    </button>
-  </div>
+  <Tabs :model-value="activeId" activation-mode="manual" data-slot="docs-sidebar-tabs">
+    <TabsList class="w-full">
+      <template v-for="tab in tabs" :key="tab.id">
+        <TabsTrigger v-if="tab.target" :value="tab.id" as-child>
+          <NuxtLink
+            :to="tab.target"
+            :title="tab.title"
+            class="min-w-0 flex-1 basis-0"
+            @click="onTabClick(tab.id, $event)"
+          >
+            <span class="truncate">{{ tab.title }}</span>
+          </NuxtLink>
+        </TabsTrigger>
+        <TabsTrigger
+          v-else
+          :value="tab.id"
+          :title="tab.title"
+          class="min-w-0 flex-1 basis-0"
+          @click="emit('update:activeId', tab.id)"
+        >
+          <span class="truncate">{{ tab.title }}</span>
+        </TabsTrigger>
+      </template>
+    </TabsList>
+  </Tabs>
 </template>

package/app/features/docs/components/DocsToc.vue

@@ -1,60 +1,106 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
+import { nextTick, onMounted, ref, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { cn } from "#ginko-docs/utils";
+import type { FlatTocItem } from "#ginko-docs/utils/content";
 import { useI18n } from "#imports";
 
-export interface TocItem {
-  id: string;
-  label: string;
-  depth?: number; // 2 = h2, 3 = h3
-}
-
 const props = withDefaults(
   defineProps<{
-    items: TocItem[];
-    activeId?: string;
+    items: FlatTocItem[];
+    activeIds?: string[];
     showTitle?: boolean;
     class?: HTMLAttributes["class"];
   }>(),
   {
     showTitle: true,
+    activeIds: () => [],
   },
 );
 const { t } = useI18n();
+
+// The sliding indicator spans the active rows. Measure the rendered rows
+// instead of assuming a fixed row height, so wrapped or restyled rows keep
+// the indicator aligned.
+const listRef = ref<HTMLElement | null>(null);
+const indicatorStyle = ref({ opacity: "0", top: "0px", height: "0px" });
+
+function measureIndicator() {
+  const list = listRef.value;
+  if (!list) return;
+  const active = list.querySelectorAll<HTMLElement>("[data-toc-active]");
+  const first = active[0];
+  const last = active[active.length - 1];
+  if (!first || !last) {
+    indicatorStyle.value = { ...indicatorStyle.value, opacity: "0" };
+    return;
+  }
+  indicatorStyle.value = {
+    opacity: "1",
+    top: `${first.offsetTop}px`,
+    height: `${last.offsetTop + last.offsetHeight - first.offsetTop}px`,
+  };
+}
+
+watch(
+  () => [props.activeIds, props.items],
+  () => nextTick(measureIndicator),
+  { deep: true },
+);
+onMounted(measureIndicator);
+useEventListener("resize", measureIndicator, { passive: true });
+
+function scrollToHeading(id: string) {
+  const element = document.getElementById(id);
+  if (!element) return;
+  // scrollIntoView ignores the global reduced-motion CSS override, so check
+  // explicitly. `scroll-margin-top` on headings handles the sticky offset.
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  element.scrollIntoView({ behavior: reducedMotion ? "auto" : "smooth", block: "start" });
+  // Sync the hash without router involvement — router-driven hash navigation
+  // would scroll-restore and fight the smooth scroll above.
+  history.replaceState(history.state, "", `#${encodeURIComponent(id)}`);
+}
 </script>
 
 <template>
-  <div v-if="items.length" :class="cn('w-full', props.class)">
-    <h3 v-if="showTitle" class="mb-4 flex items-center gap-2 text-sm font-semibold text-foreground">
+  <nav v-if="items.length" :class="cn('w-full', props.class)" :aria-label="t('docs.toc')">
+    <h3
+      v-if="showTitle"
+      class="mb-4 flex items-center gap-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase"
+    >
       <Icon name="lucide:list" class="size-3.5 shrink-0" aria-hidden="true" />
       {{ t("docs.toc") }}
     </h3>
 
-    <div class="relative space-y-1 border-l border-border pl-3 text-[13px]">
-      <!-- Animated active indicator -->
+    <div class="relative border-l border-border pl-3">
       <div
-        class="absolute -left-px w-0.5 rounded-full bg-primary transition-all duration-200"
-        :style="
-          activeId && items.findIndex((i) => i.id === activeId) !== -1
-            ? `top: ${items.findIndex((i) => i.id === activeId) * 26 + 2}px; height: 20px; opacity: 1;`
-            : 'top: 2px; height: 20px; opacity: 0;'
-        "
+        class="pointer-events-none absolute -left-px w-0.5 rounded-full bg-primary transition-all duration-200 ease-out"
+        :style="indicatorStyle"
       />
 
-      <a
-        v-for="item in items"
-        :key="item.id"
-        :href="`#${item.id}`"
-        class="block truncate py-0.5 leading-5 transition-colors"
-        :class="[
-          item.depth === 3 ? 'pl-3' : (item.depth ?? 2) >= 4 ? 'pl-6' : '',
-          activeId === item.id
-            ? 'font-medium text-primary'
-            : 'text-muted-foreground hover:text-foreground',
-        ]"
-      >
-        {{ item.label }}
-      </a>
+      <ul ref="listRef" class="space-y-1">
+        <li v-for="item in items" :key="item.id">
+          <a
+            :href="`#${item.id}`"
+            :title="item.label"
+            :data-toc-active="activeIds.includes(item.id) ? 'true' : undefined"
+            class="block truncate rounded-sm py-0.5 text-[13px] leading-5 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+            :class="
+              cn(
+                item.depth === 3 ? 'pl-3' : (item.depth ?? 2) >= 4 ? 'pl-6' : '',
+                activeIds.includes(item.id)
+                  ? 'font-medium text-primary'
+                  : 'text-muted-foreground hover:text-foreground',
+              )
+            "
+            @click.prevent="scrollToHeading(item.id)"
+          >
+            {{ item.label }}
+          </a>
+        </li>
+      </ul>
     </div>
-  </div>
+  </nav>
 </template>

package/app/features/docs/composables/useDocsNavigation.ts

@@ -1,7 +1,7 @@
 import { computed } from "vue";
+import { findNavigationTrail } from "@lupinum/ginko-content/navigation";
 import { useRoute } from "#imports";
 import {
-  findDocsNavigationTrail,
   getDocsNavigationSections,
   normalizeDocsNavigationItem,
   type DocsNavigationSection,
@@ -20,7 +20,7 @@ export async function useDocsNavigation() {
     return getDocsNavigationSections(roots.value);
   });
 
-  const trail = computed(() => findDocsNavigationTrail(roots.value, route.path));
+  const trail = computed(() => findNavigationTrail(roots.value, route.path));
 
   return {
     sections,

package/app/features/docs/composables/useDocsNavigationData.ts

@@ -2,7 +2,10 @@ import { computed } from "vue";
 import { navigation } from "@lupinum/ginko-content/client";
 import { useAsyncData, useI18n } from "#imports";
 
-export async function useDocsNavigationData() {
+// Sync on purpose: the returned AsyncData is itself awaitable, so async callers
+// still `await` it, while sync callers (e.g. the site header) read `data`
+// reactively without suspending.
+export function useDocsNavigationData() {
   const { locale } = useI18n();
   const navigationKey = computed(() => `docs-navigation:${locale.value}`);
 

package/app/features/docs/composables/useRevealActive.ts

@@ -0,0 +1,58 @@
+import type { Ref } from "vue";
+
+export interface RevealActiveOptions {
+  /** Band padding in px; the active element is left alone inside the band. */
+  topPad?: number;
+  bottomPad?: number;
+}
+
+export interface RevealMetrics {
+  scrollTop: number;
+  containerHeight: number;
+  /** Active element's offset from the container's visible top edge. */
+  activeTop: number;
+  activeHeight: number;
+  topPad: number;
+  bottomPad: number;
+}
+
+/** Returns the scrollTop that centers the active element, or null if it is
+ * already inside the visible band. */
+export function computeRevealScrollTop(metrics: RevealMetrics): number | null {
+  const { scrollTop, containerHeight, activeTop, activeHeight, topPad, bottomPad } = metrics;
+  const visible = activeTop >= topPad && activeTop + activeHeight <= containerHeight - bottomPad;
+  if (visible) return null;
+  return scrollTop + activeTop - containerHeight / 2 + activeHeight / 2;
+}
+
+/**
+ * Keeps the active element of an overflowing container visible by centering
+ * it when it drifts outside the visible band. Scrolling is instant on
+ * purpose: this is positioning, not motion, and must not compete with the
+ * page scroll. Callers decide when to schedule `reveal` (nextTick, rAF, …).
+ */
+export function useRevealActive(
+  container: Ref<HTMLElement | null> | (() => HTMLElement | null | undefined),
+  selector: string,
+  options: RevealActiveOptions = {},
+) {
+  function reveal() {
+    const el = typeof container === "function" ? container() : container.value;
+    if (!el || el.scrollHeight <= el.clientHeight) return;
+    const active = el.querySelector<HTMLElement>(selector);
+    if (!active) return;
+    const containerRect = el.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    const next = computeRevealScrollTop({
+      scrollTop: el.scrollTop,
+      containerHeight: el.clientHeight,
+      activeTop: activeRect.top - containerRect.top,
+      activeHeight: activeRect.height,
+      topPad: options.topPad ?? 8,
+      bottomPad: options.bottomPad ?? 8,
+    });
+    if (next !== null) el.scrollTop = next;
+  }
+
+  return { reveal };
+}

package/app/features/docs/composables/useScrollspy.ts

@@ -8,26 +8,91 @@ import {
   type MaybeRefOrGetter,
 } from "vue";
 
-export function useScrollspy(ids: MaybeRefOrGetter<string[]>, offset = 112) {
-  const activeId = ref("");
-  let observed: HTMLElement[] = [];
+export type ScrollspyHeading = {
+  id: string;
+  /** Viewport-relative top, in document order. */
+  top: number;
+};
+
+export type ScrollspyZone = {
+  zoneTop: number;
+  zoneBottom: number;
+  /** Viewport-relative bottom of the document (scrollHeight - scrollY). */
+  docEnd: number;
+  /** When the page is scrolled to the very bottom, the zone extends to docEnd
+   * so a short final section still activates. */
+  atBottom: boolean;
+};
+
+// Headings use `scroll-margin-top: 7rem` (= ZONE_TOP), so after an anchor jump
+// the clicked heading sits exactly at the zone top and becomes the first
+// active entry. The tolerance absorbs sub-pixel layout drift.
+const ZONE_TOP = 112;
+const TOLERANCE = 8;
+
+/**
+ * A heading is active while any part of its section (heading → next heading)
+ * intersects the reading zone. Pure so the zone model is unit-testable.
+ */
+export function computeActiveIds(headings: ScrollspyHeading[], zone: ScrollspyZone): string[] {
+  if (headings.length === 0) return [];
+
+  const zoneTop = zone.zoneTop + TOLERANCE;
+  const zoneBottom = zone.atBottom ? zone.docEnd : zone.zoneBottom;
+
+  const active: string[] = [];
+  for (let index = 0; index < headings.length; index++) {
+    const sectionTop = headings[index]!.top;
+    const sectionBottom = index < headings.length - 1 ? headings[index + 1]!.top : zone.docEnd;
+    if (sectionBottom > zoneTop && sectionTop < zoneBottom) {
+      active.push(headings[index]!.id);
+    }
+  }
+  if (active.length > 0) return active;
 
-  // Headings use `scroll-margin-top: 7rem` (= offset), so after an anchor jump
-  // a heading sits at exactly `offset` — with sub-pixel layout it can land a
-  // fraction below. The tolerance keeps that heading active instead of the
-  // previous section.
-  const tolerance = 8;
+  // No section in the zone (e.g. a long passage between headings): fall back
+  // to the last heading scrolled past the zone top, then to the first heading.
+  for (let index = headings.length - 1; index >= 0; index--) {
+    if (headings[index]!.top <= zoneTop) return [headings[index]!.id];
+  }
+  return [headings[0]!.id];
+}
 
-  function updateFromScroll() {
-    const candidates = observed
-      .map((element) => ({
+export function useScrollspy(ids: MaybeRefOrGetter<string[]>) {
+  const activeIds = ref<string[]>([]);
+  let observed: HTMLElement[] = [];
+  let rafId: number | null = null;
+
+  function update() {
+    const scrollY = window.scrollY;
+    const innerHeight = window.innerHeight;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const next = computeActiveIds(
+      observed.map((element) => ({
         id: element.id,
         top: element.getBoundingClientRect().top,
-      }))
-      .filter((item) => item.top <= offset + tolerance)
-      .sort((a, b) => b.top - a.top);
+      })),
+      {
+        zoneTop: ZONE_TOP,
+        zoneBottom: innerHeight * 0.8,
+        docEnd: scrollHeight - scrollY,
+        atBottom: scrollY + innerHeight >= scrollHeight - 2,
+      },
+    );
+    if (
+      next.length !== activeIds.value.length ||
+      next.some((id, index) => id !== activeIds.value[index])
+    ) {
+      activeIds.value = next;
+    }
+  }
 
-    activeId.value = candidates[0]?.id ?? observed[0]?.id ?? "";
+  function scheduleUpdate() {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      update();
+    });
   }
 
   async function refresh() {
@@ -38,18 +103,21 @@ export function useScrollspy(ids: MaybeRefOrGetter<string[]>, offset = 112) {
       .map((id) => document.getElementById(id))
       .filter((element): element is HTMLElement => Boolean(element));
 
-    updateFromScroll();
+    update();
   }
 
   onMounted(() => {
     void refresh();
-    window.addEventListener("scroll", updateFromScroll, { passive: true });
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate, { passive: true });
   });
 
   onBeforeUnmount(() => {
     observed = [];
     if (import.meta.client) {
-      window.removeEventListener("scroll", updateFromScroll);
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      if (rafId !== null) cancelAnimationFrame(rafId);
     }
   });
 
@@ -61,7 +129,7 @@ export function useScrollspy(ids: MaybeRefOrGetter<string[]>, offset = 112) {
   );
 
   return {
-    activeId,
+    activeIds,
     refresh,
   };
 }

package/app/features/docs/docs-navigation.ts

@@ -1,9 +1,14 @@
-import type { ContentNavigationTreeItem } from "@lupinum/ginko-content/client";
+import {
+  findFirstNavigationPage,
+  navigationItemContainsPath,
+  normalizeNavigationPath,
+  type ContentNavigationTreeItem,
+  type NavigationSidebar,
+} from "@lupinum/ginko-content/navigation";
 
 export type RawDocsTreeItem = Omit<ContentNavigationTreeItem, "children"> & {
   icon?: unknown;
   badge?: unknown;
-  sidebar?: unknown;
   children?: RawDocsTreeItem[];
 };
 
@@ -13,7 +18,7 @@ export type DocsNavigationItem = {
   path?: string;
   icon?: string;
   badge?: string;
-  sidebar?: "section" | "group";
+  sidebar?: NavigationSidebar;
   children: DocsNavigationItem[];
 };
 
@@ -47,47 +52,29 @@ export function normalizeDocsNavigationItem(
     path: item.path,
     icon: typeof item.icon === "string" ? item.icon : undefined,
     badge: typeof item.badge === "string" ? item.badge : undefined,
-    sidebar: item.sidebar === "section" || item.sidebar === "group" ? item.sidebar : undefined,
+    sidebar: item.sidebar,
     children: (item.children ?? []).map((child, index) =>
       normalizeDocsNavigationItem(child, `${positionKey}.${index}`),
     ),
   };
 }
 
-export function normalizeDocsNavigationPath(path: string): string {
-  return path.length > 1 ? path.replace(/\/+$/, "") : path;
-}
-
-export function docsNavigationItemContainsPath(item: DocsNavigationItem, path: string): boolean {
-  const normalizedPath = normalizeDocsNavigationPath(path);
-  return (
-    (item.path !== undefined && normalizeDocsNavigationPath(item.path) === normalizedPath) ||
-    item.children.some((child) => docsNavigationItemContainsPath(child, normalizedPath))
-  );
-}
-
 export function docsNavigationSectionContainsPath(
   section: DocsNavigationSection,
   path: string,
 ): boolean {
-  const normalizedPath = normalizeDocsNavigationPath(path);
+  const normalizedPath = normalizeNavigationPath(path);
   return (
-    (section.path !== undefined && normalizeDocsNavigationPath(section.path) === normalizedPath) ||
-    section.items.some((item) => docsNavigationItemContainsPath(item, normalizedPath))
+    (section.path !== undefined && normalizeNavigationPath(section.path) === normalizedPath) ||
+    section.items.some((item) => navigationItemContainsPath(item, normalizedPath))
   );
 }
 
-export function findDocsNavigationTrail(
-  items: DocsNavigationItem[],
-  path: string,
-): DocsNavigationItem[] {
-  const normalizedPath = normalizeDocsNavigationPath(path);
-  for (const item of items) {
-    if (item.path && normalizeDocsNavigationPath(item.path) === normalizedPath) return [item];
-    const descendants = findDocsNavigationTrail(item.children, normalizedPath);
-    if (descendants.length > 0) return [item, ...descendants];
-  }
-  return [];
+// Structural sections have no page of their own — they resolve to their first
+// navigable page so switching to them lands somewhere instead of only swapping
+// the sidebar contents.
+export function resolveDocsSectionTargetPath(section: DocsNavigationSection): string | undefined {
+  return section.path ?? findFirstNavigationPage(section.items)?.path;
 }
 
 export function getDocsNavigationSections(items: DocsNavigationItem[]): DocsNavigationSection[] {

package/app/features/docs/toc-context.ts

@@ -0,0 +1,6 @@
+import type { ComputedRef, InjectionKey } from "vue";
+import type { FlatTocItem } from "#ginko-docs/utils/content";
+
+/** Current page TOC, provided by the docs page shell so in-content components
+ * (e.g. the `::toc` inline table of contents) can render it. */
+export const docsTocKey: InjectionKey<ComputedRef<FlatTocItem[]>> = Symbol("ginko-docs-toc");

package/app/features/search/command-center.ts

@@ -1,4 +1,4 @@
-export type CommandCenterGroup = "recent" | "pages" | "docs_nav" | "blog" | "docs" | "actions";
+export type CommandCenterGroup = "recent" | "pages" | "docs_nav" | "actions" | "search";
 
 export interface CommandCenterItem {
   id: string;
@@ -24,19 +24,6 @@ export interface CommandCenterGroupResult {
 export const MAX_RECENT_ITEMS = 5;
 export const PAGE_HIGHLIGHT_STORAGE_KEY = "site-command-center-page-highlight";
 
-const GROUP_PRIORITY: Record<CommandCenterGroup, number> = {
-  recent: 0,
-  pages: 1,
-  docs_nav: 2,
-  blog: 3,
-  docs: 4,
-  actions: 5,
-};
-
-function normalizeValue(value: string) {
-  return value.toLocaleLowerCase().trim();
-}
-
 export function dedupeCommandCenterItems(items: CommandCenterItem[]) {
   const seen = new Set<string>();
   return items.filter((item) => {
@@ -47,84 +34,22 @@ export function dedupeCommandCenterItems(items: CommandCenterItem[]) {
   });
 }
 
-export function scoreCommandCenterItem(item: CommandCenterItem, query: string) {
-  if (!query.trim()) return 1;
-
-  const normalizedQuery = normalizeValue(query);
-  const tokens = normalizedQuery.split(/\s+/).filter(Boolean);
-  const title = normalizeValue(item.title);
-  const subtitle = normalizeValue(item.subtitle ?? "");
-  const keywords = (item.keywords ?? []).map(normalizeValue);
-  const haystacks = [title, subtitle, ...keywords].filter(Boolean);
-  const isAnchoredResult = item.href?.includes("#") ?? false;
-
-  if (!tokens.every((token) => haystacks.some((value) => value.includes(token)))) return 0;
-
-  let score = 0;
-  if (title === normalizedQuery) score += isAnchoredResult ? 48 : 140;
-  if (title.startsWith(normalizedQuery)) score += isAnchoredResult ? 40 : 110;
-  if (title.includes(normalizedQuery)) score += isAnchoredResult ? 32 : 80;
-  if (subtitle.includes(normalizedQuery)) score += 48;
-
-  for (const keyword of keywords) {
-    if (keyword === normalizedQuery) score += 90;
-    else if (keyword.startsWith(normalizedQuery)) score += 56;
-    else if (keyword.includes(normalizedQuery)) score += 32;
-  }
-
-  for (const token of tokens) {
-    if (title.startsWith(token)) score += 18;
-    if (title.includes(token)) score += 12;
-    if (subtitle.includes(token)) score += 8;
-    if (keywords.some((keyword) => keyword.startsWith(token))) score += 10;
-  }
-
-  if (item.href && !isAnchoredResult) score += 16;
-  if (isAnchoredResult) score -= 12;
-  if (item.group === "pages") score += 20;
-  return score;
-}
-
 export function groupCommandCenterItems(
   items: CommandCenterItem[],
-  query: string,
   groupTitle: (group: CommandCenterGroup) => string,
 ): CommandCenterGroupResult[] {
-  const isSearching = query.trim().length > 0;
-  const ranked = items
-    .map((item) => ({
-      item,
-      score: item.group === "recent" && !isSearching ? 999 : scoreCommandCenterItem(item, query),
-    }))
-    .filter(({ score }) => score > 0)
-    .sort((left, right) => {
-      if (isSearching && left.score !== right.score) return right.score - left.score;
-      if (left.item.group !== right.item.group) {
-        return GROUP_PRIORITY[left.item.group] - GROUP_PRIORITY[right.item.group];
-      }
-      return isSearching ? left.item.title.localeCompare(right.item.title) : 0;
-    })
-    .slice(0, isSearching ? 12 : undefined);
-
-  const groups = new Map<CommandCenterGroup, Array<{ item: CommandCenterItem; score: number }>>();
-  for (const entry of ranked) {
-    const group = groups.get(entry.item.group) ?? [];
-    group.push(entry);
-    groups.set(entry.item.group, group);
+  const groups = new Map<CommandCenterGroup, CommandCenterItem[]>();
+  for (const item of items) {
+    const group = groups.get(item.group) ?? [];
+    group.push(item);
+    groups.set(item.group, group);
   }
 
-  return [...groups.entries()]
-    .map(([id, entries]) => ({
-      id,
-      title: groupTitle(id),
-      maxScore: Math.max(...entries.map((entry) => entry.score)),
-      items: entries.slice(0, 5).map((entry) => entry.item),
-    }))
-    .sort((left, right) => {
-      if (isSearching && left.maxScore !== right.maxScore) return right.maxScore - left.maxScore;
-      return GROUP_PRIORITY[left.id] - GROUP_PRIORITY[right.id];
-    })
-    .map(({ maxScore: _maxScore, ...group }) => group);
+  return [...groups].map(([id, groupItems]) => ({
+    id,
+    title: groupTitle(id),
+    items: groupItems.slice(0, 5),
+  }));
 }
 
 export function resolveRecentItems(
@@ -150,7 +75,3 @@ export function rememberRecentItem(
   const id = selectedItem.sourceId ?? selectedItem.id;
   return [id, ...storedItems.filter((item) => item !== id)].slice(0, MAX_RECENT_ITEMS);
 }
-
-export function contentSearchGroup(collection: string): "blog" | "docs" {
-  return collection === "blog" ? "blog" : "docs";
-}