@erinjs/core 1.0.0

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

@@ -0,0 +1,153 @@
+<template>
+  <div v-if="!dismissed" class="support-cta-wrapper">
+    <a
+      href="https://github.com/sponsors/blstmo"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="support-cta-banner"
+      aria-label="Support erin.js on GitHub Sponsors">
+      <span class="support-heart" aria-hidden="true">♥</span>
+      <span class="support-text">
+        <strong>Support erin.js</strong> — Sponsor or donate on GitHub to help keep the project
+        going
+      </span>
+      <span class="support-button">Sponsor →</span>
+    </a>
+    <button
+      type="button"
+      class="support-cta-close"
+      aria-label="Dismiss support banner"
+      @click="dismiss">
+      ×
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const STORAGE_KEY = 'fluxer-docs-support-banner-dismissed';
+const dismissed = ref(true); // Start hidden until we read localStorage (avoids flash for returning users)
+
+function dismiss() {
+  dismissed.value = true;
+  try {
+    localStorage.setItem(STORAGE_KEY, '1');
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+onMounted(() => {
+  try {
+    dismissed.value = localStorage.getItem(STORAGE_KEY) === '1';
+  } catch {
+    dismissed.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.support-cta-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.support-cta-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem 1.25rem;
+  flex-wrap: wrap;
+  padding: 1rem 3rem 1rem 1.5rem;
+  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(99, 179, 237, 0.1) 100%);
+  border-bottom: 1px solid rgba(236, 72, 153, 0.25);
+  color: #e8e9ed;
+  text-decoration: none;
+  transition:
+    background 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.support-cta-banner:hover {
+  background: linear-gradient(135deg, rgba(236, 72, 153, 0.22) 0%, rgba(99, 179, 237, 0.15) 100%);
+  border-bottom-color: rgba(236, 72, 153, 0.4);
+  color: #e8e9ed;
+}
+
+.support-heart {
+  font-size: 1.5rem;
+  color: #ec4899;
+  animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+@keyframes heartbeat {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.support-text {
+  font-size: 1rem;
+  line-height: 1.4;
+  color: #e8e9ed;
+}
+
+.support-text strong {
+  color: #e8e9ed;
+  font-weight: 600;
+}
+
+.support-button {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #ec4899;
+  padding: 0.4rem 0.9rem;
+  background: rgba(236, 72, 153, 0.2);
+  border-radius: var(--radius);
+  border: 1px solid rgba(236, 72, 153, 0.35);
+  transition:
+    background 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.support-cta-banner:hover .support-button {
+  background: rgba(236, 72, 153, 0.3);
+  border-color: rgba(236, 72, 153, 0.5);
+  color: #f9a8d4;
+}
+
+.support-cta-close {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: rgba(232, 233, 237, 0.7);
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    background 0.15s;
+}
+
+.support-cta-close:hover {
+  color: #e8e9ed;
+  background: rgba(255, 255, 255, 0.1);
+}
+</style>

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

@@ -0,0 +1,187 @@
+<template>
+  <code class="type-sig">
+    <template v-for="(part, i) in parts" :key="i">
+      <router-link
+        v-if="part.kind === 'type' && part.link"
+        :to="part.link"
+        :class="['ts-type-link', part.linkKind ? 'ts-link-' + part.linkKind : '']">
+        {{ part.text }}
+      </router-link>
+      <span v-else :class="['ts-' + part.kind]">{{ part.text }}</span>
+    </template>
+  </code>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useDocsStore } from '../stores/docs';
+
+const props = defineProps<{ type: string }>();
+const route = useRoute();
+const store = useDocsStore();
+const versionPrefix = computed(() => `/v/${(route.params.version as string) ?? 'latest'}`);
+
+const KEYWORDS = new Set([
+  'string',
+  'number',
+  'boolean',
+  'void',
+  'any',
+  'unknown',
+  'object',
+  'null',
+  'undefined',
+  'never',
+  'true',
+  'false',
+  'Promise',
+  'Record',
+  'Map',
+  'Set',
+  'Array',
+]);
+const PUNCT = new Set('<>{}[]()|&,:;?.');
+
+const parts = computed(() => {
+  const type = props.type ?? '';
+  const out: {
+    kind: string;
+    text: string;
+    link?: { path: string };
+    linkKind?: 'class' | 'interface' | 'enum';
+  }[] = [];
+  const doc = store.currentDoc;
+  const classNames = new Set((doc?.classes ?? []).map((c) => c.name));
+  const interfaceNames = new Set((doc?.interfaces ?? []).map((i) => i.name));
+  const enumNames = new Set((doc?.enums ?? []).map((e) => e.name));
+
+  let i = 0;
+  while (i < type.length) {
+    const rest = type.slice(i);
+    const m = rest.match(/^\s+/);
+    if (m) {
+      out.push({ kind: 'space', text: m[0] });
+      i += m[0].length;
+      continue;
+    }
+    const punct = rest[0];
+    if (punct && PUNCT.has(punct)) {
+      out.push({ kind: 'punct', text: punct });
+      i += 1;
+      continue;
+    }
+    const ident = rest.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/)?.[0];
+    if (ident) {
+      const lower = ident.toLowerCase();
+      const isKeyword =
+        KEYWORDS.has(ident) ||
+        [
+          'string',
+          'number',
+          'boolean',
+          'void',
+          'any',
+          'unknown',
+          'object',
+          'null',
+          'undefined',
+          'never',
+        ].includes(lower);
+      if (isKeyword) {
+        out.push({ kind: 'keyword', text: ident });
+      } else if (classNames.has(ident)) {
+        out.push({
+          kind: 'type',
+          text: ident,
+          link: { path: `${versionPrefix.value}/docs/classes/${ident}` },
+          linkKind: 'class',
+        });
+      } else if (interfaceNames.has(ident)) {
+        out.push({
+          kind: 'type',
+          text: ident,
+          link: { path: `${versionPrefix.value}/docs/typedefs/${ident}` },
+          linkKind: 'interface',
+        });
+      } else if (enumNames.has(ident)) {
+        out.push({
+          kind: 'type',
+          text: ident,
+          link: { path: `${versionPrefix.value}/docs/typedefs/${ident}` },
+          linkKind: 'enum',
+        });
+      } else {
+        out.push({ kind: 'ident', text: ident });
+      }
+      i += ident.length;
+      continue;
+    }
+    const str = rest.match(/^['"`][^'"`]*['"`]/)?.[0] ?? rest.match(/^['"`]/)?.[0];
+    if (str) {
+      out.push({ kind: 'string', text: str });
+      i += str.length;
+      continue;
+    }
+    out.push({ kind: 'other', text: rest[0] ?? '' });
+    i += 1;
+  }
+  return out;
+});
+</script>
+
+<style scoped>
+.type-sig {
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  font-size: 0.9em;
+  background: var(--code-bg);
+  padding: 0.2em 0.5em;
+  border-radius: 4px;
+  display: inline;
+}
+
+.ts-keyword {
+  color: var(--ts-keyword);
+}
+
+.ts-type {
+  color: var(--ts-type);
+}
+
+.ts-type-link {
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.ts-type-link:hover {
+  text-decoration: underline;
+}
+
+.ts-link-class {
+  color: var(--accent);
+}
+
+.ts-link-interface {
+  color: var(--badge-interface);
+}
+
+.ts-link-enum {
+  color: var(--badge-enum);
+}
+
+.ts-string {
+  color: var(--ts-string);
+}
+
+.ts-punct {
+  color: var(--ts-punct);
+}
+
+.ts-ident {
+  color: var(--ts-ident);
+}
+
+.ts-space {
+  /* preserve spaces */
+}
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+  <div v-if="availableVersions.length > 0" ref="containerRef" class="version-picker">
+    <button
+      type="button"
+      class="version-trigger"
+      :class="{ open: open }"
+      @click="open = !open"
+      @blur="handleBlur">
+      <span class="version-trigger-label">v{{ displayVersion }}</span>
+      <span class="version-trigger-chevron">▼</span>
+    </button>
+    <Transition name="dropdown">
+      <div v-if="open" class="version-dropdown">
+        <button
+          v-for="opt in versionOptions"
+          :key="opt.value"
+          type="button"
+          class="version-option"
+          :class="{ active: currentVersion === opt.value }"
+          @mousedown.prevent="selectVersion(opt.value)">
+          {{ opt.label }}
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRouter, useRoute } from 'vue-router';
+import { useVersionStore } from '../stores/version';
+import { useDocsStore } from '../stores/docs';
+import { useGuidesStore } from '../stores/guides';
+
+const versionStore = useVersionStore();
+const docsStore = useDocsStore();
+const guidesStore = useGuidesStore();
+const router = useRouter();
+const route = useRoute();
+
+const open = ref(false);
+const containerRef = ref<HTMLElement | null>(null);
+
+function handleClickOutside(e: MouseEvent) {
+  if (open.value && !containerRef.value?.contains(e.target as Node)) {
+    open.value = false;
+  }
+}
+
+onMounted(() => document.addEventListener('click', handleClickOutside));
+onUnmounted(() => document.removeEventListener('click', handleClickOutside));
+
+const { availableVersions, latestVersion, currentVersion } = storeToRefs(versionStore);
+
+const displayVersion = computed(() =>
+  currentVersion.value === 'latest' ? latestVersion.value : currentVersion.value,
+);
+
+const versionOptions = computed(() => {
+  const opts = [{ value: 'latest', label: `v${latestVersion.value} (latest)` }];
+  for (const v of availableVersions.value) {
+    if (v !== latestVersion.value) opts.push({ value: v, label: `v${v}` });
+  }
+  return opts;
+});
+
+function handleBlur() {
+  setTimeout(() => {
+    open.value = false;
+  }, 150);
+}
+
+function selectVersion(newVersion: string) {
+  open.value = false;
+  versionStore.setVersion(newVersion);
+  docsStore.clearDocs();
+  guidesStore.clearGuides();
+
+  const version = route.params.version as string | undefined;
+  const path = route.path;
+  // Changelog is never versioned - stay on /changelog or go to versioned guides
+  if (path === '/changelog') {
+    router.push(`/v/${newVersion}/guides`);
+    return;
+  }
+  if (version !== undefined && path.startsWith('/v/')) {
+    const newPath = path.replace(/^\/v\/[^/]+/, `/v/${newVersion}`);
+    router.replace(newPath);
+  } else {
+    const subPath = path === '/' ? '/guides' : path;
+    router.push(`/v/${newVersion}${subPath}`);
+  }
+}
+</script>
+
+<style scoped>
+.version-picker {
+  position: relative;
+}
+
+.version-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  height: 34px;
+  min-height: 34px;
+  padding: 0 0.6rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.version-trigger:hover {
+  color: var(--text-primary);
+  border-color: var(--border);
+}
+
+.version-trigger.open {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.version-trigger-chevron {
+  font-size: 0.55rem;
+  opacity: 0.8;
+  transition: transform 0.2s;
+}
+
+.version-trigger.open .version-trigger-chevron {
+  transform: rotate(180deg);
+}
+
+.version-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 100%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  padding: 0.35rem 0;
+  z-index: 100;
+}
+
+.version-option {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  text-align: left;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    color 0.1s;
+}
+
+.version-option:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.version-option.active {
+  color: var(--accent);
+  background: var(--bg-active);
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/core/apps/docs/src/composables/useSearchIndex.ts

@@ -0,0 +1,144 @@
+import { computed, type ComputedRef } from 'vue';
+import { DocOutput } from '../types/doc-schema';
+import type { Guide } from '../data/guides';
+
+export interface SearchHit {
+  id: string;
+  name: string;
+  type: 'class' | 'interface' | 'enum' | 'method' | 'property' | 'member' | 'guide';
+  path: { name: string; params?: Record<string, string>; hash?: string };
+  parent?: string;
+  /** Searchable text from full page content (guides) or descriptions (API) */
+  searchText?: string;
+}
+
+function buildIndex(doc: DocOutput | null): SearchHit[] {
+  if (!doc) return [];
+
+  const hits: SearchHit[] = [];
+
+  for (const c of doc.classes ?? []) {
+    const classSearchText = [c.name, c.description].filter(Boolean).join(' ');
+    hits.push({
+      id: `class-${c.name}`,
+      name: c.name,
+      type: 'class',
+      path: { name: 'class', params: { class: c.name } },
+      searchText: classSearchText,
+    });
+    for (const m of c.methods ?? []) {
+      hits.push({
+        id: `method-${c.name}-${m.name}`,
+        name: m.name,
+        type: 'method',
+        parent: c.name,
+        path: { name: 'class', params: { class: c.name }, hash: `#method-${m.name}` },
+        searchText: [m.name, m.description].filter(Boolean).join(' '),
+      });
+    }
+    for (const p of c.properties ?? []) {
+      hits.push({
+        id: `prop-${c.name}-${p.name}`,
+        name: p.name,
+        type: 'property',
+        parent: c.name,
+        path: { name: 'class', params: { class: c.name }, hash: `#property-${p.name}` },
+        searchText: [p.name, p.description].filter(Boolean).join(' '),
+      });
+    }
+  }
+
+  for (const i of doc.interfaces ?? []) {
+    const ifaceSearchText = [i.name, i.description].filter(Boolean).join(' ');
+    hits.push({
+      id: `interface-${i.name}`,
+      name: i.name,
+      type: 'interface',
+      path: { name: 'typedef', params: { typedef: i.name } },
+      searchText: ifaceSearchText,
+    });
+    for (const p of i.properties ?? []) {
+      hits.push({
+        id: `iprop-${i.name}-${p.name}`,
+        name: p.name,
+        type: 'property',
+        parent: i.name,
+        path: { name: 'typedef', params: { typedef: i.name } },
+        searchText: [p.name, p.description].filter(Boolean).join(' '),
+      });
+    }
+  }
+
+  for (const e of doc.enums ?? []) {
+    const enumSearchText = [e.name, e.description].filter(Boolean).join(' ');
+    hits.push({
+      id: `enum-${e.name}`,
+      name: e.name,
+      type: 'enum',
+      path: { name: 'typedef', params: { typedef: e.name } },
+      searchText: enumSearchText,
+    });
+    for (const m of e.members ?? []) {
+      hits.push({
+        id: `member-${e.name}-${m.name}`,
+        name: m.name,
+        type: 'member',
+        parent: e.name,
+        path: { name: 'typedef', params: { typedef: e.name } },
+        searchText: m.name,
+      });
+    }
+  }
+
+  return hits;
+}
+
+export function useSearchIndex(doc: { currentDoc: DocOutput | null }): ComputedRef<SearchHit[]> {
+  return computed(() => buildIndex(doc.currentDoc));
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  'getting-started': 'Getting Started',
+  'sending-messages': 'Sending Messages',
+  media: 'Media',
+  channels: 'Channels',
+  emojis: 'Emojis',
+  webhooks: 'Webhooks',
+  voice: 'Voice',
+  events: 'Events',
+  other: 'Other',
+};
+
+function buildGuideSearchText(g: Guide): string {
+  const parts: string[] = [g.title, g.description ?? ''];
+  for (const s of g.sections ?? []) {
+    if (s.title) parts.push(s.title);
+    if (s.description) parts.push(s.description);
+    if (s.code) parts.push(s.code);
+    if (s.tip) parts.push(s.tip);
+    if (s.alternateCode) {
+      parts.push(s.alternateCode.label);
+      if (s.alternateCode.code) parts.push(s.alternateCode.code);
+    }
+    if (s.table) {
+      parts.push(...s.table.headers);
+      for (const row of s.table.rows) parts.push(...row);
+    }
+  }
+  return parts.filter(Boolean).join(' ');
+}
+
+export function useGuidesSearchIndex(guides: { guides: Guide[] }): ComputedRef<SearchHit[]> {
+  return computed(() => {
+    const list = guides.guides;
+    if (!list?.length) return [];
+    return list.map((g) => ({
+      id: `guide-${g.slug}`,
+      name: g.title,
+      type: 'guide' as const,
+      path: { name: 'guide', params: { slug: g.slug } },
+      parent: CATEGORY_LABELS[g.category] ?? g.category,
+      searchText: buildGuideSearchText(g),
+    }));
+  });
+}

package/core/apps/docs/src/composables/useVersionedPath.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+/**
+ * Get the current version from the route (e.g. "latest" or "1.0.5").
+ * Use with path() to build versioned links.
+ */
+export function useVersionedPath() {
+  const route = useRoute();
+
+  const version = computed(() => (route.params.version as string) ?? 'latest');
+
+  function path(relativePath: string): string {
+    const v = version.value;
+    const p = relativePath.startsWith('/') ? relativePath : `/${relativePath}`;
+    return `/v/${v}${p}`;
+  }
+
+  return { version, path };
+}