@erinjs/core 1.0.0

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

@@ -0,0 +1,82 @@
+<template>
+  <section id="constructor" class="section">
+    <h2>Constructor</h2>
+    <div class="signature-wrap">
+      <TypeSignature :type="signatureText" />
+    </div>
+    <p v-if="props.constructor.description" class="constructor-desc">
+      <DocDescription :text="props.constructor.description" />
+    </p>
+    <ParamsTable v-if="params.length" :params="params" />
+    <div v-if="props.constructor.examples?.length" class="constructor-examples">
+      <CodeBlock
+        v-for="(ex, i) in props.constructor.examples"
+        :key="i"
+        :code="ex"
+        language="javascript"
+        :link-types="true" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DocConstructor } from '../types/doc-schema';
+import DocDescription from './DocDescription.vue';
+import ParamsTable from './ParamsTable.vue';
+import TypeSignature from './TypeSignature.vue';
+import CodeBlock from './CodeBlock.vue';
+
+const props = defineProps<{ constructor: DocConstructor; className: string }>();
+
+const params = computed(() => props.constructor.params ?? []);
+
+const signatureText = computed(() => {
+  const paramsStr = params.value
+    .map((p) => `${p.name}${p.optional ? '?' : ''}: ${p.type}`)
+    .join(', ');
+  return `new ${props.className}(${paramsStr})`;
+});
+</script>
+
+<style scoped>
+.section {
+  margin-bottom: 2.5rem;
+}
+
+.section h2 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 1rem;
+}
+
+.signature-wrap {
+  margin-bottom: 0.75rem;
+}
+
+.signature-wrap :deep(.type-sig) {
+  font-size: 0.9rem;
+}
+
+.constructor-desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-top: 0.5rem;
+}
+
+.constructor-examples {
+  margin-top: 1rem;
+}
+
+.constructor-examples :deep(.code-block) {
+  margin-bottom: 0.75rem;
+}
+
+.constructor-examples :deep(.code-block:last-child) {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <span class="doc-desc" v-html="formatted"></span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ text?: string | null }>();
+
+/**
+ * Format JSDoc description for display: newlines preserved, backticks → inline code.
+ * Escapes HTML for safety.
+ */
+const formatted = computed(() => {
+  const t = props.text?.trim();
+  if (!t) return '';
+  // Escape HTML
+  let s = t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  // Backticks → inline code (non-greedy, handle multiple)
+  s = s.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+  // Newlines → <br>
+  s = s.replace(/\n/g, '<br>');
+  return s;
+});
+</script>
+
+<style scoped>
+.doc-desc {
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.doc-desc :deep(.inline-code) {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.9em;
+  background: var(--code-bg);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,3 @@
+<template>
+  <img src="/@flux.png" alt="erin.js logo" :class="$attrs.class" />
+</template>

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

@@ -0,0 +1,106 @@
+<template>
+  <footer class="footer">
+    <div class="footer-content">
+      <a
+        href="https://fluxer.gg/fluxer-js"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="footer-community">
+        Join our erin.js community →
+      </a>
+      <nav class="footer-nav" aria-label="Footer navigation">
+        <router-link to="/v/latest/guides" class="footer-link">Guides</router-link>
+        <router-link to="/v/latest/docs" class="footer-link">Docs</router-link>
+        <router-link to="/changelog" class="footer-link">Changelog</router-link>
+        <a
+          href="https://github.com/blstmo-abandoned-us-for-the-milk/core"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="footer-link">
+          GitHub
+        </a>
+        <a
+          href="https://fluxer.gg/fluxer-js"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="footer-link">
+          Fluxer
+        </a>
+      </nav>
+      <p class="footer-copy">erin.js v{{ version }} · SDK for Fluxer bots</p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const version = ref('1.1.0');
+
+onMounted(async () => {
+  try {
+    const res = await fetch('/docs/versions.json');
+    if (res.ok) {
+      const data = (await res.json()) as { latest?: string };
+      if (data.latest) version.value = data.latest;
+    }
+  } catch {
+    /* use default */
+  }
+});
+</script>
+
+<style scoped>
+.footer {
+  flex-shrink: 0;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border);
+  padding: 2rem 1.5rem;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footer-community {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.footer-community:hover {
+  color: var(--accent-hover);
+}
+
+.footer-nav {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem 1.5rem;
+}
+
+.footer-link {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.footer-link:hover {
+  color: var(--accent);
+}
+
+.footer-copy {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <div class="guide-code-block" :class="{ 'has-tabs': !!alternateCode }">
+    <template v-if="alternateCode">
+      <div class="code-tabs">
+        <button
+          type="button"
+          class="code-tab"
+          :class="{ active: activeTab === 'main' }"
+          @click="activeTab = 'main'">
+          Default
+        </button>
+        <button
+          type="button"
+          class="code-tab"
+          :class="{ active: activeTab === 'alternate' }"
+          @click="activeTab = 'alternate'">
+          {{ alternateCode.label }}
+        </button>
+      </div>
+      <div class="code-tab-panel">
+        <CodeBlock
+          v-if="activeTab === 'main'"
+          :code="code"
+          :language="language ?? 'javascript'"
+          :link-types="language !== 'bash'" />
+        <CodeBlock
+          v-else
+          :code="alternateCode.code"
+          :language="alternateCode.language ?? language ?? 'javascript'"
+          :link-types="(alternateCode.language ?? language) !== 'bash'" />
+      </div>
+    </template>
+    <CodeBlock
+      v-else
+      :code="code"
+      :language="language ?? 'javascript'"
+      :link-types="language !== 'bash'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CodeBlock from './CodeBlock.vue';
+import { GuideAlternateSnippet } from '../data/guides';
+
+defineProps<{
+  code: string;
+  language?: 'javascript' | 'bash' | 'text';
+  alternateCode?: GuideAlternateSnippet;
+}>();
+
+const activeTab = ref<'main' | 'alternate'>('main');
+</script>
+
+<style scoped>
+.guide-code-block {
+  margin: 0;
+}
+
+.guide-code-block.has-tabs {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.code-tabs {
+  display: flex;
+  gap: 0;
+  padding: 0.5rem 1rem 0;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.code-tab {
+  padding: 0.4rem 0.9rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.code-tab:hover {
+  color: var(--text-secondary);
+}
+
+.code-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.code-tab-panel :deep(.code-block) {
+  border: none;
+  border-radius: 0;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <router-link
+    v-if="fluxerPath"
+    :to="fluxerPath"
+    class="guide-discord-compat guide-discord-compat--link"
+    aria-label="Discord.js compatible — view Fluxer API">
+    <span class="guide-discord-compat-badge">Discord.js compatible</span>
+  </router-link>
+  <a
+    v-else-if="externalHref"
+    :href="externalHref"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="guide-discord-compat guide-discord-compat--link"
+    aria-label="Discord.js compatible">
+    <span class="guide-discord-compat-badge">Discord.js compatible</span>
+  </a>
+  <span v-else class="guide-discord-compat" aria-label="Discord.js compatible">
+    <span class="guide-discord-compat-badge">Discord.js compatible</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVersionedPath } from '../composables/useVersionedPath';
+
+const props = defineProps<{
+  /** Fluxer API path (e.g. /docs/classes/GuildMemberRoleManager) or external URL. */
+  href?: string;
+}>();
+
+const { path: versionedPath } = useVersionedPath();
+
+const isExternal = computed(
+  () => typeof props.href === 'string' && /^https?:\/\//i.test(props.href),
+);
+
+const fluxerPath = computed(() => {
+  if (!props.href || isExternal.value) return undefined;
+  const p = props.href.startsWith('/') ? props.href : `/${props.href}`;
+  // Use latest for /docs/ paths so links work even when viewing older versions (e.g. GuildMemberRoleManager in v1.2+)
+  if (p.startsWith('/docs/')) return `/v/latest${p}`;
+  return versionedPath(p);
+});
+
+const externalHref = computed(() => (props.href && isExternal.value ? props.href : undefined));
+</script>
+
+<style scoped>
+.guide-discord-compat {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.6rem;
+  margin-left: 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--discord-compat-badge-text, #0d3b1a);
+  background: var(--discord-compat, #57f287);
+  border: 1px solid var(--discord-compat-border, rgba(87, 242, 135, 0.35));
+  border-radius: var(--radius-sm, 4px);
+  text-decoration: none;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.guide-discord-compat--link:hover {
+  background: #4ae87a;
+  border-color: #2d8a4a;
+}
+
+.guide-discord-compat-badge {
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="href" class="guide-discord-callout" role="note" aria-label="Discord.js compatible">
+    <router-link v-if="fluxerPath" :to="fluxerPath" class="guide-discord-callout-badge">
+      Discord.js compatible
+    </router-link>
+    <a
+      v-else
+      :href="href"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="guide-discord-callout-link">
+      View docs →
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVersionedPath } from '../composables/useVersionedPath';
+
+const props = defineProps<{
+  /** Fluxer API path (e.g. /docs/classes/GuildMemberRoleManager) or external URL. */
+  href: string;
+}>();
+
+const { path: versionedPath } = useVersionedPath();
+
+const isExternal = computed(() => /^https?:\/\//i.test(props.href));
+
+const fluxerPath = computed(() => {
+  if (isExternal.value) return undefined;
+  const p = props.href.startsWith('/') ? props.href : `/${props.href}`;
+  // Use latest for /docs/ paths so links work even when viewing older versions (e.g. GuildMemberRoleManager in v1.2+)
+  if (p.startsWith('/docs/')) return `/v/latest${p}`;
+  return versionedPath(p);
+});
+</script>
+
+<style scoped>
+.guide-discord-callout {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1rem;
+  margin: 0.5rem 0 0.75rem 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  background: var(--discord-compat-bg);
+  border: 1px solid var(--discord-compat-border);
+  border-left: 3px solid var(--discord-compat);
+  border-radius: var(--radius-sm);
+}
+
+.guide-discord-callout-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--discord-compat-badge-text);
+  background: var(--discord-compat);
+  padding: 0.25em 0.6em;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.guide-discord-callout-badge:hover {
+  background: #4ae87a;
+}
+
+.guide-discord-callout-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.guide-discord-callout-link:hover {
+  color: var(--accent-hover);
+  text-decoration: underline;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="guide-table-wrapper">
+    <table class="guide-table">
+      <thead>
+        <tr>
+          <th v-for="(h, i) in headers" :key="i">{{ h }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, ri) in rows" :key="ri">
+          <td v-for="(cell, ci) in row" :key="ci">
+            <code v-if="codeColumns?.includes(ci)" class="guide-table-code">{{ cell }}</code>
+            <span v-else>{{ cell }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    headers: string[];
+    rows: string[][];
+    /** Column indices to render as inline code (e.g. [1] for payload column) */
+    codeColumns?: number[];
+  }>(),
+  { codeColumns: () => [] },
+);
+</script>
+
+<style scoped>
+.guide-table-wrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+}
+
+.guide-table {
+  width: 100%;
+  font-size: 0.875rem;
+  border-collapse: collapse;
+}
+
+.guide-table th,
+.guide-table td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+
+.guide-table th {
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.guide-table tr:last-child td {
+  border-bottom: none;
+}
+
+.guide-table-code {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.85em;
+  background: var(--code-bg);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="guide-tip" role="note" aria-label="Tip">
+    <span class="guide-tip-icon" aria-hidden="true">💡</span>
+    <span class="guide-tip-text">{{ tip }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tip: string;
+}>();
+</script>
+
+<style scoped>
+.guide-tip {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.75rem 1rem;
+  margin: 0.75rem 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  background: rgba(99, 179, 237, 0.08);
+  border: 1px solid rgba(99, 179, 237, 0.25);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+}
+
+.guide-tip-icon {
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
+.guide-tip-text {
+  flex: 1;
+}
+</style>