@erinjs/core 1.0.0 → 1.2.4

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

@@ -1,361 +0,0 @@
-<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

@@ -1,225 +0,0 @@
-<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>