@lupinum/ginko-docs 0.4.0-rc.9 → 0.4.0

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

@@ -1,110 +0,0 @@
-export type CommandCenterGroup = "recent" | "pages" | "docs_nav" | "actions" | "search";
-
-export interface CommandCenterItem {
-  id: string;
-  sourceId?: string;
-  title: string;
-  subtitle?: string;
-  href?: string;
-  external?: boolean;
-  group: CommandCenterGroup;
-  icon?: string;
-  keywords?: string[];
-  badge?: string;
-}
-
-export type StoredRecentItem = string;
-
-export interface CommandCenterGroupResult {
-  id: CommandCenterGroup;
-  title: string;
-  items: CommandCenterItem[];
-}
-
-export const MAX_RECENT_ITEMS = 5;
-export const PAGE_HIGHLIGHT_STORAGE_KEY = "site-command-center-page-highlight";
-
-const SEARCH_HIGHLIGHT_STOP_WORDS = new Set([
-  "a",
-  "an",
-  "and",
-  "der",
-  "die",
-  "das",
-  "ein",
-  "eine",
-  "for",
-  "in",
-  "of",
-  "or",
-  "the",
-  "to",
-  "und",
-  "von",
-  "zu",
-]);
-
-export function getSearchHighlightTerms(query: string): string[] {
-  const terms = [...new Set(query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean))];
-  const meaningfulTerms = terms.filter(
-    (term) => term.length > 1 && !SEARCH_HIGHLIGHT_STOP_WORDS.has(term),
-  );
-
-  return meaningfulTerms.length > 0 ? meaningfulTerms : terms;
-}
-
-export function shouldShowSearchResultBadges(items: CommandCenterItem[]): boolean {
-  return new Set(items.map((item) => item.badge).filter(Boolean)).size > 1;
-}
-
-export function dedupeCommandCenterItems(items: CommandCenterItem[]) {
-  const seen = new Set<string>();
-  return items.filter((item) => {
-    const key = item.href ?? item.sourceId ?? item.id;
-    if (seen.has(key)) return false;
-    seen.add(key);
-    return true;
-  });
-}
-
-export function groupCommandCenterItems(
-  items: CommandCenterItem[],
-  groupTitle: (group: CommandCenterGroup) => string,
-): CommandCenterGroupResult[] {
-  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].map(([id, groupItems]) => ({
-    id,
-    title: groupTitle(id),
-    items: groupItems.slice(0, 5),
-  }));
-}
-
-export function resolveRecentItems(
-  storedItems: StoredRecentItem[],
-  currentItems: CommandCenterItem[],
-): CommandCenterItem[] {
-  return storedItems
-    .map((id) => currentItems.find((item) => item.id === id))
-    .filter((item): item is CommandCenterItem => Boolean(item))
-    .slice(0, MAX_RECENT_ITEMS)
-    .map((item) => ({
-      ...item,
-      id: `recent-${item.id}`,
-      sourceId: item.id,
-      group: "recent",
-    }));
-}
-
-export function rememberRecentItem(
-  selectedItem: CommandCenterItem,
-  storedItems: StoredRecentItem[],
-): StoredRecentItem[] {
-  const id = selectedItem.sourceId ?? selectedItem.id;
-  return [id, ...storedItems.filter((item) => item !== id)].slice(0, MAX_RECENT_ITEMS);
-}

package/app/features/search/components/SiteCommandCenter.vue

@@ -1,359 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
-import { useI18n, useRoute } from "#imports";
-import { useCommandCenter } from "#ginko-docs/features/search/useCommandCenter";
-import {
-  getSearchHighlightTerms,
-  shouldShowSearchResultBadges,
-} from "#ginko-docs/features/search/command-center";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  VisuallyHidden,
-} from "reka-ui";
-
-const { t } = useI18n();
-const route = useRoute();
-const inputRef = useTemplateRef<HTMLInputElement>("input");
-const highlightedId = ref("");
-const { open, query, groupedItems, searchPending, searchError, searchIsEmpty, selectItem } =
-  await useCommandCenter();
-
-const visibleItems = computed(() => groupedItems.value.flatMap((g) => g.items));
-const isSearching = computed(() => query.value.trim().length > 0);
-const showResultBadges = computed(
-  () => !isSearching.value || shouldShowSearchResultBadges(visibleItems.value),
-);
-
-// ── text highlighting ──────────────────────────────────────────────────────
-function highlightTokens(text: string, q: string): { text: string; match: boolean }[] {
-  const terms = getSearchHighlightTerms(q);
-  if (terms.length === 0) return [{ text, match: false }];
-  const pattern = terms.map((term) => term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
-  return text
-    .split(new RegExp(`(${pattern})`, "gi"))
-    .filter((part) => part !== "")
-    .map((part) => ({
-      text: part,
-      match: terms.some((term) => part.toLowerCase() === term.toLowerCase()),
-    }));
-}
-
-// ── keyboard navigation ────────────────────────────────────────────────────
-function syncHighlight() {
-  const first = visibleItems.value[0]?.id ?? "";
-  if (!first) {
-    highlightedId.value = "";
-    return;
-  }
-  if (!visibleItems.value.some((i) => i.id === highlightedId.value)) {
-    highlightedId.value = first;
-  }
-}
-
-function moveHighlight(dir: 1 | -1) {
-  if (!visibleItems.value.length) return;
-  const idx = visibleItems.value.findIndex((i) => i.id === highlightedId.value);
-  const next = idx === -1 ? 0 : (idx + dir + visibleItems.value.length) % visibleItems.value.length;
-  highlightedId.value = visibleItems.value[next]?.id ?? "";
-}
-
-async function activateHighlighted() {
-  const item = visibleItems.value.find((i) => i.id === highlightedId.value);
-  if (item) await selectItem(item);
-}
-
-async function clearQuery() {
-  query.value = "";
-  await nextTick();
-  inputRef.value?.focus();
-}
-
-function itemLabel(item: { title: string; subtitle?: string; badge?: string }) {
-  return [item.title, item.badge, item.subtitle].filter(Boolean).join(", ");
-}
-
-function handleListNavigation(e: KeyboardEvent) {
-  if (e.key === "ArrowDown") {
-    e.preventDefault();
-    moveHighlight(1);
-  } else if (e.key === "ArrowUp") {
-    e.preventDefault();
-    moveHighlight(-1);
-  } else if (e.key === "Enter") {
-    e.preventDefault();
-    void activateHighlighted();
-  }
-}
-
-watch(open, async (isOpen) => {
-  if (!isOpen) {
-    highlightedId.value = "";
-    return;
-  }
-  await nextTick();
-  syncHighlight();
-  inputRef.value?.focus();
-});
-
-watch([query, groupedItems], async () => {
-  syncHighlight();
-  await nextTick();
-  if (!highlightedId.value || !import.meta.client) return;
-  document
-    .querySelector<HTMLElement>(`[data-item="${highlightedId.value}"]`)
-    ?.scrollIntoView({ block: "nearest" });
-});
-
-watch(
-  () => route.fullPath,
-  () => {
-    highlightedId.value = "";
-  },
-);
-
-onMounted(async () => {
-  await nextTick();
-  syncHighlight();
-  inputRef.value?.focus();
-});
-</script>
-
-<template>
-  <DialogRoot v-model:open="open">
-    <DialogPortal>
-      <DialogOverlay
-        class="fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-      />
-      <DialogContent
-        class="fixed top-[8vh] left-1/2 z-50 flex max-h-[80vh] w-[min(94vw,44rem)] -translate-x-1/2 flex-col overflow-hidden rounded-xl border border-border bg-background shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:top-[10vh]"
-        @keydown="handleListNavigation"
-      >
-        <VisuallyHidden>
-          <DialogTitle>{{ t("command.title") }}</DialogTitle>
-          <DialogDescription>{{ t("command.description") }}</DialogDescription>
-        </VisuallyHidden>
-
-        <!-- Search input -->
-        <div class="flex h-14 shrink-0 items-center gap-3 border-b border-border px-3 sm:px-4">
-          <Icon
-            name="lucide:search"
-            class="size-4 shrink-0 text-muted-foreground"
-            aria-hidden="true"
-          />
-          <input
-            ref="input"
-            v-model="query"
-            type="text"
-            autocomplete="off"
-            spellcheck="false"
-            :placeholder="t('command.placeholder')"
-            class="h-full min-w-0 flex-1 bg-transparent text-[16px] text-foreground outline-none placeholder:text-muted-foreground sm:text-sm"
-          />
-          <kbd
-            v-if="!query"
-            class="hidden items-center gap-1 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground sm:flex"
-          >
-            Esc
-          </kbd>
-          <button
-            v-else
-            type="button"
-            :aria-label="t('command.clear')"
-            class="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:text-foreground"
-            @click="clearQuery"
-          >
-            <Icon name="lucide:x" class="size-3" aria-hidden="true" />
-          </button>
-        </div>
-
-        <!-- Results -->
-        <div
-          class="min-h-0 flex-1 overflow-y-auto overscroll-contain py-2 [scrollbar-color:var(--border)_transparent]"
-        >
-          <div
-            v-if="isSearching && searchPending"
-            class="flex items-center justify-center gap-2 px-6 py-12 text-sm text-muted-foreground"
-            role="status"
-          >
-            <Icon name="lucide:loader-circle" class="size-4 animate-spin" aria-hidden="true" />
-            {{ t("command.loading") }}
-          </div>
-
-          <div
-            v-else-if="isSearching && searchError"
-            class="flex flex-col items-center justify-center gap-2 px-6 py-12 text-center"
-            role="alert"
-          >
-            <Icon name="lucide:circle-alert" class="size-5 text-destructive" aria-hidden="true" />
-            <p class="max-w-sm text-sm font-medium text-foreground">{{ t("command.error") }}</p>
-          </div>
-
-          <!-- Groups -->
-          <template v-else-if="visibleItems.length">
-            <div v-for="group in groupedItems" :key="group.id" class="mb-1 px-2 last:mb-0">
-              <div class="flex items-center gap-2 px-2 pt-1.5 pb-1">
-                <span class="text-[11px] font-medium text-muted-foreground">{{ group.title }}</span>
-                <div class="flex-1 border-t border-border/60" />
-                <span
-                  v-if="group.id === 'search'"
-                  class="text-[11px] tabular-nums text-muted-foreground"
-                  aria-live="polite"
-                >
-                  {{ t("command.resultCount", { count: group.items.length }) }}
-                </span>
-              </div>
-
-              <button
-                v-for="item in group.items"
-                :key="item.id"
-                type="button"
-                :data-item="item.id"
-                :aria-label="itemLabel(item)"
-                class="group flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors outline-none"
-                :class="
-                  highlightedId === item.id ? 'bg-accent text-accent-foreground' : 'text-foreground'
-                "
-                @mousemove="highlightedId = item.id"
-                @focus="highlightedId = item.id"
-                @click="void selectItem(item)"
-              >
-                <!-- Icon -->
-                <div
-                  class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 transition-colors"
-                  :class="highlightedId === item.id ? 'border-border/80 bg-background' : ''"
-                >
-                  <Icon
-                    v-if="group.id === 'recent'"
-                    name="lucide:clock"
-                    class="size-3.5 text-muted-foreground"
-                    aria-hidden="true"
-                  />
-                  <Icon
-                    v-else
-                    :name="item.icon ?? 'lucide:file-text'"
-                    class="size-3.5 text-muted-foreground"
-                    aria-hidden="true"
-                  />
-                </div>
-
-                <!-- Text -->
-                <div class="min-w-0 flex-1">
-                  <div class="flex min-w-0 items-center gap-2">
-                    <span class="min-w-0 truncate text-sm leading-5 font-medium">
-                      <template
-                        v-for="(token, tokenIndex) in highlightTokens(item.title, query)"
-                        :key="tokenIndex"
-                      >
-                        <mark
-                          v-if="token.match"
-                          class="rounded-[3px] bg-accent-yellow px-0.5 font-medium text-accent-yellow-foreground not-italic"
-                          >{{ token.text }}</mark
-                        ><template v-else>{{ token.text }}</template>
-                      </template>
-                    </span>
-                    <span
-                      v-if="item.badge && showResultBadges"
-                      class="shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground"
-                    >
-                      {{ item.badge }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="item.subtitle"
-                    class="mt-0.5 flex min-w-0 items-start gap-1 text-xs leading-5 text-muted-foreground"
-                  >
-                    <Icon
-                      name="lucide:hash"
-                      class="mt-1 size-3 shrink-0 opacity-50"
-                      aria-hidden="true"
-                    />
-                    <span class="line-clamp-2 min-w-0">
-                      <template
-                        v-for="(token, tokenIndex) in highlightTokens(item.subtitle, query)"
-                        :key="tokenIndex"
-                      >
-                        <mark
-                          v-if="token.match"
-                          class="rounded-[3px] bg-accent-yellow px-0.5 font-medium text-accent-yellow-foreground not-italic"
-                          >{{ token.text }}</mark
-                        ><template v-else>{{ token.text }}</template>
-                      </template>
-                    </span>
-                  </p>
-                </div>
-
-                <!-- Right hint -->
-                <div class="mt-1 flex shrink-0 items-center gap-1.5 text-muted-foreground">
-                  <Icon
-                    v-if="item.external"
-                    name="lucide:arrow-up-right"
-                    class="size-3.5 opacity-0 transition-opacity"
-                    :class="highlightedId === item.id ? 'opacity-100' : 'group-hover:opacity-60'"
-                    aria-hidden="true"
-                  />
-                  <kbd
-                    v-else
-                    class="hidden items-center rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] transition-opacity"
-                    :class="highlightedId === item.id ? 'flex opacity-100' : 'opacity-0'"
-                  >
-                    ↵
-                  </kbd>
-                </div>
-              </button>
-            </div>
-          </template>
-
-          <!-- Empty state -->
-          <div
-            v-else-if="!isSearching || searchIsEmpty"
-            class="flex flex-col items-center justify-center gap-2 px-6 py-12 text-center"
-          >
-            <div
-              class="flex size-10 items-center justify-center rounded-lg border border-border bg-muted/50"
-            >
-              <Icon name="lucide:search" class="size-4 text-muted-foreground" aria-hidden="true" />
-            </div>
-            <p class="text-sm font-medium text-foreground">
-              {{ t("command.noResults", { query }) }}
-            </p>
-            <p class="text-xs text-muted-foreground">
-              {{ t("command.noResultsHelp") }}
-            </p>
-          </div>
-        </div>
-
-        <!-- Footer -->
-        <div
-          class="flex shrink-0 items-center justify-between border-t border-border px-3 py-2.5 text-[11px] text-muted-foreground sm:px-4"
-        >
-          <div class="flex min-w-0 items-center gap-2 sm:gap-3">
-            <span class="flex items-center gap-1">
-              <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px]"
-                >↑↓</kbd
-              >
-              {{ t("command.navigate") }}
-            </span>
-            <span class="hidden items-center gap-1 sm:flex">
-              <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px]"
-                >↵</kbd
-              >
-              {{ t("command.open") }}
-            </span>
-            <span class="hidden items-center gap-1 sm:flex">
-              <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px]"
-                >Esc</kbd
-              >
-              {{ t("command.close") }}
-            </span>
-          </div>
-          <span class="shrink-0 sm:hidden">{{ t("command.closeHint") }}</span>
-        </div>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>

package/app/features/search/components/SiteSearchPageHighlight.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, watch } from "vue";
-import { useRoute } from "#imports";
-import { getSearchHighlightTerms } from "#ginko-docs/features/search/command-center";
-
-const STORAGE_KEY = "site-command-center-page-highlight";
-const HIGHLIGHT_SELECTOR = "mark[data-search-page-highlight]";
-const SKIP_SELECTOR = "script, style, textarea, input, select, button, mark";
-
-const route = useRoute();
-
-type StoredHighlight = {
-  href: string;
-  query: string;
-};
-
-function readStoredHighlight(): StoredHighlight | null {
-  try {
-    const value = sessionStorage.getItem(STORAGE_KEY);
-    if (!value) return null;
-    const parsed = JSON.parse(value) as Partial<StoredHighlight>;
-    if (typeof parsed.href !== "string" || typeof parsed.query !== "string") return null;
-    return { href: parsed.href, query: parsed.query };
-  } catch {
-    return null;
-  }
-}
-
-function removeHighlights() {
-  for (const mark of document.querySelectorAll(HIGHLIGHT_SELECTOR)) {
-    const parent = mark.parentNode;
-    if (!parent) continue;
-    mark.replaceWith(document.createTextNode(mark.textContent ?? ""));
-    parent.normalize();
-  }
-}
-
-function highlightPattern(root: Element, pattern: RegExp) {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-    acceptNode(node) {
-      const parent = node.parentElement;
-      if (!parent || parent.closest(SKIP_SELECTOR)) return NodeFilter.FILTER_REJECT;
-      if (!node.textContent?.trim() || !pattern.test(node.textContent)) {
-        pattern.lastIndex = 0;
-        return NodeFilter.FILTER_REJECT;
-      }
-      pattern.lastIndex = 0;
-      return NodeFilter.FILTER_ACCEPT;
-    },
-  });
-
-  const nodes: Text[] = [];
-  while (walker.nextNode()) nodes.push(walker.currentNode as Text);
-
-  for (const node of nodes) {
-    const text = node.textContent ?? "";
-    const fragment = document.createDocumentFragment();
-    let lastIndex = 0;
-
-    for (const match of text.matchAll(pattern)) {
-      const index = match.index ?? 0;
-      const value = match[0];
-      if (!value) continue;
-
-      fragment.append(document.createTextNode(text.slice(lastIndex, index)));
-
-      const mark = document.createElement("mark");
-      mark.dataset.searchPageHighlight = "";
-      mark.className =
-        "rounded-[3px] bg-accent-yellow px-0.5 font-medium text-accent-yellow-foreground";
-      mark.textContent = value;
-      fragment.append(mark);
-
-      lastIndex = index + value.length;
-    }
-
-    fragment.append(document.createTextNode(text.slice(lastIndex)));
-    node.replaceWith(fragment);
-  }
-}
-
-function escapePattern(value: string) {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-function buildPatterns(query: string) {
-  const phrase = query.trim().replace(/\s+/g, " ");
-  const tokens = getSearchHighlightTerms(phrase);
-  const phrasePattern = phrase.split(/\s+/).map(escapePattern).join("\\s+");
-
-  return [
-    new RegExp(phrasePattern, "gi"),
-    ...(tokens.length > 1 ? [new RegExp(tokens.map(escapePattern).join("|"), "gi")] : []),
-  ];
-}
-
-async function applyStoredHighlight() {
-  removeHighlights();
-
-  const stored = readStoredHighlight();
-  if (!stored) return;
-
-  const currentPath = `${route.path}${route.hash}`;
-  if (stored.href !== route.fullPath && stored.href !== currentPath && stored.href !== route.path) {
-    sessionStorage.removeItem(STORAGE_KEY);
-    return;
-  }
-
-  await nextTick();
-
-  const root = document.querySelector("#main-content") ?? document.querySelector("main");
-  if (!root) return;
-
-  for (const pattern of buildPatterns(stored.query)) {
-    highlightPattern(root, pattern);
-    if (root.querySelector(HIGHLIGHT_SELECTOR)) break;
-  }
-}
-
-watch(() => route.fullPath, applyStoredHighlight, { immediate: true });
-onBeforeUnmount(removeHighlights);
-</script>
-
-<template>
-  <span hidden aria-hidden="true" />
-</template>