@erinjs/core 1.0.0

package/core/apps/docs/src/components/SearchModal.vue

@@ -0,0 +1,361 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="open"
+        class="search-overlay"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="searchContextLabel"
+        @click.self="close"
+        @keydown="handleKeydown">
+        <div ref="modalRef" class="search-modal">
+          <div class="search-input-wrap">
+            <span class="search-icon" aria-hidden>⌘K</span>
+            <input
+              ref="inputRef"
+              v-model="query"
+              type="search"
+              :placeholder="searchPlaceholder"
+              class="search-input"
+              autocomplete="off"
+              :aria-label="searchContextLabel"
+              @keydown.esc="close"
+              @keydown.down.prevent="selectNext"
+              @keydown.up.prevent="selectPrev"
+              @keydown.enter="navigateSelected" />
+          </div>
+
+          <div v-if="query.length >= 1" class="search-results">
+            <template v-if="filtered.length">
+              <router-link
+                v-for="(r, i) in filtered.slice(0, 12)"
+                :key="r.id"
+                :to="searchResultTo(r)"
+                class="result-row"
+                :class="{ selected: i === selectedIndex }"
+                @click="close">
+                <span :class="['result-type', 'type-' + r.type]">{{ typeLabel(r.type) }}</span>
+                <span class="result-name">{{
+                  r.type === 'guide' ? r.name : r.parent ? `${r.parent}.${r.name}` : r.name
+                }}</span>
+              </router-link>
+            </template>
+            <div v-else class="result-empty">No results for "{{ query }}"</div>
+          </div>
+
+          <div class="search-footer">
+            <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+            <span><kbd>↵</kbd> select</span>
+            <span><kbd>esc</kbd> close</span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useDocsStore } from '../stores/docs';
+import { useGuidesStore } from '../stores/guides';
+import { useSearchIndex, useGuidesSearchIndex } from '../composables/useSearchIndex';
+import { SearchHit } from '../composables/useSearchIndex';
+
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const docsStore = useDocsStore();
+const guidesStore = useGuidesStore();
+const router = useRouter();
+const route = useRoute();
+
+const docsIndex = useSearchIndex(docsStore);
+const guidesIndex = useGuidesSearchIndex(guidesStore);
+
+const searchContext = computed(() => {
+  const path = route.path;
+  if (path.includes('/guides')) return 'guides';
+  if (path.includes('/docs')) return 'docs';
+  return 'all';
+});
+
+const searchPlaceholder = computed(() => {
+  switch (searchContext.value) {
+    case 'guides':
+      return 'Search guides...';
+    case 'docs':
+      return 'Search classes, methods, properties...';
+    default:
+      return 'Search docs and guides...';
+  }
+});
+
+const searchContextLabel = computed(() => {
+  switch (searchContext.value) {
+    case 'guides':
+      return 'Search guides';
+    case 'docs':
+      return 'Search API documentation';
+    default:
+      return 'Search documentation';
+  }
+});
+
+const index = computed(() => {
+  if (searchContext.value === 'guides') return guidesIndex.value;
+  if (searchContext.value === 'docs') return docsIndex.value;
+  return [...docsIndex.value, ...guidesIndex.value];
+});
+
+function searchResultTo(r: SearchHit) {
+  const params = {
+    ...(r.path.params ?? {}),
+    version: (route.params.version as string) ?? 'latest',
+  };
+  return { name: r.path.name, params, hash: r.path.hash ?? '' };
+}
+
+const query = ref('');
+const inputRef = ref<HTMLInputElement | null>(null);
+const modalRef = ref<HTMLElement | null>(null);
+const selectedIndex = ref(0);
+
+function getFocusables(): HTMLElement[] {
+  if (!modalRef.value) return [];
+  const focusables = modalRef.value.querySelectorAll<HTMLElement>(
+    'input:not([disabled]), button:not([disabled]), a[href]',
+  );
+  return Array.from(focusables).filter((el) => (el as HTMLElement).offsetParent !== null);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key !== 'Tab') return;
+  const focusables = getFocusables();
+  if (focusables.length <= 1) return;
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  if (e.shiftKey) {
+    if (document.activeElement === first) {
+      e.preventDefault();
+      last?.focus();
+    }
+  } else {
+    if (document.activeElement === last) {
+      e.preventDefault();
+      first?.focus();
+    }
+  }
+}
+
+const filtered = computed(() => {
+  const q = query.value.toLowerCase().trim();
+  if (!q) return [];
+  return index.value.filter((h) => {
+    const name = h.name.toLowerCase();
+    const parent = (h.parent ?? '').toLowerCase();
+    const searchText = (h.searchText ?? '').toLowerCase();
+    return (
+      name.includes(q) ||
+      parent.includes(q) ||
+      `${parent}.${name}`.includes(q) ||
+      searchText.includes(q)
+    );
+  });
+});
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) {
+      query.value = '';
+      selectedIndex.value = 0;
+      requestAnimationFrame(() => inputRef.value?.focus());
+    }
+  },
+);
+
+watch(filtered, () => {
+  selectedIndex.value = 0;
+});
+
+function typeLabel(t: SearchHit['type']): string {
+  const map: Record<SearchHit['type'], string> = {
+    class: 'Class',
+    interface: 'Interface',
+    enum: 'Enum',
+    method: 'Method',
+    property: 'Prop',
+    member: 'Member',
+    guide: 'Guide',
+  };
+  return map[t] ?? t;
+}
+
+function selectNext() {
+  selectedIndex.value = Math.min(selectedIndex.value + 1, filtered.value.length - 1);
+}
+
+function selectPrev() {
+  selectedIndex.value = Math.max(selectedIndex.value - 1, 0);
+}
+
+function navigateSelected() {
+  const item = filtered.value[selectedIndex.value];
+  if (item) {
+    router.push(searchResultTo(item));
+    close();
+  }
+}
+
+function close() {
+  emit('close');
+}
+</script>
+
+<style scoped>
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+}
+
+.search-modal {
+  width: 100%;
+  max-width: 560px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+}
+
+.search-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.search-icon {
+  font-size: 1rem;
+  color: var(--text-muted);
+}
+
+.search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-family: inherit;
+  outline: none;
+}
+
+.search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.search-results {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.result-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.25rem;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: background 0.1s;
+}
+
+.result-row:hover,
+.result-row.selected {
+  background: var(--bg-active);
+}
+
+.result-type {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  min-width: 4.5rem;
+  color: var(--text-muted);
+}
+
+.result-type.type-class {
+  color: var(--accent);
+}
+.result-type.type-interface {
+  color: var(--badge-interface);
+}
+.result-type.type-enum {
+  color: var(--badge-enum);
+}
+.result-type.type-method {
+  color: var(--ts-string);
+}
+.result-type.type-property {
+  color: var(--ts-type);
+}
+.result-type.type-member {
+  color: var(--ts-keyword);
+}
+.result-type.type-guide {
+  color: var(--accent);
+}
+
+.result-name {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.9rem;
+}
+
+.result-empty {
+  padding: 1.5rem;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.search-footer {
+  display: flex;
+  gap: 1.25rem;
+  padding: 0.6rem 1.25rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-subtle);
+}
+
+kbd {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  padding: 0.15em 0.4em;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  font-size: 0.75em;
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.15s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+.modal-enter-active .search-modal,
+.modal-leave-active .search-modal {
+  transition: transform 0.15s ease;
+}
+.modal-enter-from .search-modal,
+.modal-leave-to .search-modal {
+  transform: scale(0.96);
+}
+</style>

package/core/apps/docs/src/components/SidebarNav.vue

@@ -0,0 +1,225 @@
+<template>
+  <nav class="sidebar-nav">
+    <div v-if="store.currentDoc" class="nav-content">
+      <h3 class="sidebar-title">API Reference</h3>
+      <CommunityCallout variant="sidebar" />
+      <router-link :to="versionedPath('/api')" class="sidebar-rest-api-link">
+        REST API →
+      </router-link>
+      <div v-if="packages.length" class="sidebar-select-wrap">
+        <select v-model="selectedPackage" class="sidebar-select">
+          <option value="">All packages</option>
+          <option v-for="p in packages" :key="p" :value="p">{{ p }}</option>
+        </select>
+      </div>
+      <input v-model="filter" type="search" placeholder="Filter..." class="sidebar-filter" />
+      <div class="nav-group">
+        <router-link :to="versionedPath('/docs/classes')" class="sidebar-group-label link">
+          Classes
+        </router-link>
+        <div v-if="filteredClasses.length" class="sidebar-sublist">
+          <router-link
+            v-for="c in filteredClasses"
+            :key="c.name"
+            :to="versionedPath(`/docs/classes/${c.name}`)"
+            class="sidebar-link sidebar-link-class"
+            :class="{ 'sidebar-link--discord-compat': c.discordJsCompat }"
+            active-class="active"
+            :title="c.name">
+            {{ c.name }}
+          </router-link>
+        </div>
+      </div>
+
+      <div class="nav-group">
+        <router-link :to="versionedPath('/docs/typedefs')" class="sidebar-group-label link">
+          Interfaces
+        </router-link>
+        <div v-if="filteredInterfaces.length" class="sidebar-sublist">
+          <router-link
+            v-for="i in filteredInterfaces"
+            :key="i.name"
+            :to="versionedPath(`/docs/typedefs/${i.name}`)"
+            class="sidebar-link sidebar-link-interface"
+            :class="{ 'sidebar-link--discord-compat': hasDiscordCompat(i) }"
+            active-class="active"
+            :title="i.name">
+            {{ i.name }}
+          </router-link>
+        </div>
+      </div>
+
+      <div class="nav-group">
+        <router-link :to="versionedPath('/docs/typedefs')" class="sidebar-group-label link">
+          Enums
+        </router-link>
+        <div v-if="filteredEnums.length" class="sidebar-sublist">
+          <router-link
+            v-for="e in filteredEnums"
+            :key="e.name"
+            :to="versionedPath(`/docs/typedefs/${e.name}`)"
+            class="sidebar-link sidebar-link-enum"
+            active-class="active"
+            :title="e.name">
+            {{ e.name }}
+          </router-link>
+        </div>
+      </div>
+    </div>
+    <div v-else class="nav-placeholder">
+      <p class="nav-loading">Loading...</p>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useDocsStore } from '../stores/docs';
+import { useVersionedPath } from '../composables/useVersionedPath';
+import CommunityCallout from './CommunityCallout.vue';
+
+const store = useDocsStore();
+const { path: versionedPath } = useVersionedPath();
+const filter = ref('');
+const selectedPackage = ref('');
+
+const packages = computed(() => store.currentDoc?.packages ?? []);
+
+const filteredClasses = computed(() => {
+  const q = filter.value.toLowerCase().trim();
+  const pkg = selectedPackage.value;
+  let list = store.currentDoc?.classes ?? [];
+  if (pkg) list = list.filter((c) => (c as { package?: string }).package === pkg);
+  if (q) list = list.filter((c) => c.name.toLowerCase().includes(q));
+  return list;
+});
+
+const filteredInterfaces = computed(() => {
+  const q = filter.value.toLowerCase().trim();
+  const pkg = selectedPackage.value;
+  let list = store.currentDoc?.interfaces ?? [];
+  if (pkg) list = list.filter((i) => (i as { package?: string }).package === pkg);
+  if (q) list = list.filter((i) => i.name.toLowerCase().includes(q));
+  return list;
+});
+
+const filteredEnums = computed(() => {
+  const q = filter.value.toLowerCase().trim();
+  const pkg = selectedPackage.value;
+  let list = store.currentDoc?.enums ?? [];
+  if (pkg) list = list.filter((e) => (e as { package?: string }).package === pkg);
+  if (q) list = list.filter((e) => e.name.toLowerCase().includes(q));
+  return list;
+});
+
+function hasDiscordCompat(item: Record<string, unknown>): boolean {
+  return !!item.discordJsCompat;
+}
+</script>
+
+<style scoped>
+.sidebar-nav {
+  padding: 0.75rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-rest-api-link {
+  display: block;
+  margin: 0 var(--sidebar-padding-x) 1rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: none;
+  background: rgba(99, 179, 237, 0.1);
+  border: 1px solid rgba(99, 179, 237, 0.25);
+  border-radius: var(--radius-sm);
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.sidebar-rest-api-link:hover {
+  background: rgba(99, 179, 237, 0.18);
+  border-color: var(--accent);
+}
+
+.sidebar-filter {
+  margin: 0 var(--sidebar-padding-x) 1rem;
+  padding: 0.5rem var(--sidebar-padding-x);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 0.85rem;
+}
+
+.sidebar-filter::placeholder {
+  color: var(--text-muted);
+}
+
+.sidebar-filter:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.nav-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.nav-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-select-wrap {
+  margin: 0 var(--sidebar-padding-x) 0.75rem;
+}
+
+.sidebar-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.sidebar-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.sidebar-nav :deep(.sidebar-link) {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-nav :deep(.sidebar-link--discord-compat) {
+  color: var(--discord-compat);
+  border-left-color: var(--discord-compat);
+}
+
+.sidebar-nav :deep(.sidebar-link--discord-compat:hover),
+.sidebar-nav :deep(.sidebar-link--discord-compat.active) {
+  color: var(--discord-compat);
+  background: var(--discord-compat-bg);
+  border-left-color: var(--discord-compat);
+}
+
+.nav-placeholder {
+  padding: 1rem;
+}
+
+.nav-loading {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+</style>