@erinjs/core 1.0.0

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

@@ -0,0 +1,195 @@
+<template>
+  <section class="section">
+    <h2>Methods</h2>
+    <div
+      v-for="m in methods"
+      :id="`method-${m.name}`"
+      :key="m.name"
+      class="method-item"
+      :class="{
+        'is-deprecated': m.deprecated,
+        'is-discord-compat': m.discordJsCompat && !m.deprecated,
+      }">
+      <div class="deprecated-banner" v-if="m.deprecated">
+        <span class="deprecated-badge">Deprecated</span>
+        <span v-if="typeof m.deprecated === 'string'" class="deprecated-message">{{
+          m.deprecated
+        }}</span>
+      </div>
+      <ApiDiscordCompat
+        v-if="m.discordJsCompat && !m.deprecated"
+        :to="fluxerMethodLink(m.name)"
+        variant="banner" />
+      <div class="method-header">
+        <code class="method-name">{{ m.name }}</code>
+        <span v-if="m.deprecated" class="deprecated-badge-inline">deprecated</span>
+      </div>
+      <div class="method-sig-wrap">
+        <TypeSignature :type="methodSignature(m)" />
+      </div>
+      <p v-if="m.description" class="method-desc"><DocDescription :text="m.description" /></p>
+      <ParamsTable v-if="m.params?.length" :params="m.params" />
+      <div v-if="m.examples?.length" class="method-examples">
+        <CodeBlock
+          v-for="(ex, i) in m.examples"
+          :key="i"
+          :code="ex"
+          language="javascript"
+          :link-types="true" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import type { DocMethod } from '../types/doc-schema';
+import ApiDiscordCompat from './ApiDiscordCompat.vue';
+import DocDescription from './DocDescription.vue';
+import ParamsTable from './ParamsTable.vue';
+import TypeSignature from './TypeSignature.vue';
+import CodeBlock from './CodeBlock.vue';
+
+const props = defineProps<{ methods: DocMethod[]; parentName?: string }>();
+const route = useRoute();
+
+function fluxerMethodLink(methodName: string) {
+  const version = (route.params.version as string) ?? 'latest';
+  const cls = props.parentName;
+  if (!cls) return undefined;
+  return { path: `/v/${version}/docs/classes/${cls}`, hash: `#method-${methodName}` };
+}
+
+function methodSignature(m: DocMethod) {
+  const paramsStr = (m.params ?? [])
+    .map((p) => `${p.name}${p.optional ? '?' : ''}: ${p.type}`)
+    .join(', ');
+  return `(${paramsStr}): ${m.returns}`;
+}
+</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;
+}
+
+.method-item {
+  margin-bottom: 1.75rem;
+  padding-bottom: 1.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.method-item:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.method-item.is-deprecated {
+  background: var(--deprecated-bg);
+  border: 1px solid var(--deprecated-border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin-bottom: 1.75rem;
+}
+
+.method-item.is-deprecated:last-child {
+  margin-bottom: 0;
+}
+
+.method-item.is-discord-compat {
+  background: var(--discord-compat-bg);
+  border: 1px solid var(--discord-compat-border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin-bottom: 1.75rem;
+}
+
+.method-item.is-discord-compat:last-child {
+  margin-bottom: 0;
+}
+
+.deprecated-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--deprecated-border);
+}
+
+.deprecated-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #1c1917;
+  background: var(--deprecated);
+  padding: 0.3em 0.65em;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+
+.deprecated-message {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.deprecated-badge-inline {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--deprecated);
+  background: rgba(245, 158, 11, 0.2);
+  padding: 0.2em 0.5em;
+  border-radius: var(--radius-sm);
+}
+
+.method-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+
+.method-name {
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.method-sig-wrap {
+  margin-bottom: 0.5rem;
+}
+
+.method-sig-wrap :deep(.type-sig) {
+  font-size: 0.85rem;
+}
+
+.method-desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.method-examples {
+  margin-top: 1rem;
+}
+
+.method-examples :deep(.code-block) {
+  margin-bottom: 0.75rem;
+}
+
+.method-examples :deep(.code-block:last-child) {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <table v-if="params.length" class="params-table">
+    <thead>
+      <tr>
+        <th>Param</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="p in params" :key="p.name">
+        <td>
+          <code class="param-name">{{ p.name }}{{ p.optional ? '?' : '' }}</code>
+        </td>
+        <td><TypeSignature :type="p.type" /></td>
+        <td class="param-desc">
+          <DocDescription v-if="p.description" :text="p.description" />
+          <span v-else>-</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { DocParam } from '../types/doc-schema';
+import DocDescription from './DocDescription.vue';
+import TypeSignature from './TypeSignature.vue';
+
+defineProps<{ params: DocParam[] }>();
+</script>
+
+<style scoped>
+.params-table {
+  width: 100%;
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  border-collapse: collapse;
+}
+
+.params-table th,
+.params-table td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+
+.params-table th {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.param-name {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.85rem;
+}
+
+.param-desc {
+  color: var(--text-secondary);
+}
+
+.params-table .type-sig {
+  font-size: 0.8rem;
+  padding: 0.15em 0.35em;
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <section class="section">
+    <h2>Properties</h2>
+    <div
+      v-for="p in properties"
+      :id="`property-${p.name}`"
+      :key="p.name"
+      class="property-item"
+      :class="{ 'is-discord-compat': p.discordJsCompat }">
+      <ApiDiscordCompat
+        v-if="p.discordJsCompat"
+        :to="fluxerPropertyLink(p.name)"
+        variant="banner" />
+      <div class="property-header">
+        <code class="property-name">{{ p.name }}</code>
+        <span v-if="p.optional" class="optional-badge">optional</span>
+      </div>
+      <div v-if="p.type" class="property-type-wrap">
+        <TypeSignature :type="p.type" />
+      </div>
+      <p v-if="p.description" class="property-desc"><DocDescription :text="p.description" /></p>
+      <div v-if="p.examples?.length" class="property-examples">
+        <CodeBlock
+          v-for="(ex, i) in p.examples"
+          :key="i"
+          :code="ex"
+          language="javascript"
+          :link-types="true" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import type { DocProperty, DocInterfaceProperty } from '../types/doc-schema';
+import ApiDiscordCompat from './ApiDiscordCompat.vue';
+import DocDescription from './DocDescription.vue';
+import TypeSignature from './TypeSignature.vue';
+import CodeBlock from './CodeBlock.vue';
+
+const props = defineProps<{
+  properties: (DocProperty | DocInterfaceProperty)[];
+  parentName?: string;
+  /** 'class' = link to class page, 'typedef' = link to typedef page */
+  parentType?: 'class' | 'typedef';
+}>();
+const route = useRoute();
+
+function fluxerPropertyLink(propertyName: string) {
+  const version = (route.params.version as string) ?? 'latest';
+  const parent = props.parentName;
+  if (!parent) return undefined;
+  const segment = props.parentType === 'typedef' ? 'typedefs' : 'classes';
+  return { path: `/v/${version}/docs/${segment}/${parent}`, hash: `#property-${propertyName}` };
+}
+</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;
+}
+
+.property-item {
+  margin-bottom: 1.25rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.property-item:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.property-item.is-discord-compat {
+  background: var(--discord-compat-bg);
+  border: 1px solid var(--discord-compat-border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.property-item.is-discord-compat:last-child {
+  margin-bottom: 0;
+}
+
+.property-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+
+.property-name {
+  font-weight: 500;
+}
+
+.optional-badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  background: var(--bg-tertiary);
+  padding: 0.2em 0.5em;
+  border-radius: var(--radius-sm);
+}
+
+.property-type-wrap {
+  margin-bottom: 0.35rem;
+}
+
+.property-type-wrap :deep(.type-sig) {
+  font-size: 0.85rem;
+}
+
+.property-desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.property-examples {
+  margin-top: 1rem;
+}
+
+.property-examples :deep(.code-block) {
+  margin-bottom: 0.75rem;
+}
+
+.property-examples :deep(.code-block:last-child) {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="search-trigger-wrap">
+    <button type="button" class="search-trigger" @click="open = true">
+      <span class="trigger-icon">⌘</span>
+      <span class="trigger-text">Search</span>
+      <span class="trigger-kbd">⌘K</span>
+    </button>
+    <SearchModal :open="open" @close="open = false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import SearchModal from './SearchModal.vue';
+
+const open = ref(false);
+
+function handleKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    open.value = !open.value;
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown));
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown));
+</script>
+
+<style scoped>
+.search-trigger-wrap {
+  flex: 0 0 auto;
+  width: 140px;
+  display: flex;
+}
+
+.search-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  height: 34px;
+  min-height: 34px;
+  padding: 0 0.6rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.search-trigger:hover {
+  border-color: var(--accent);
+  color: var(--text-primary);
+}
+
+.trigger-icon {
+  font-size: 1rem;
+}
+
+.trigger-text {
+  flex: 1;
+  text-align: left;
+}
+
+.trigger-kbd {
+  font-size: 0.7rem;
+  padding: 0.2em 0.45em;
+  background: var(--bg-secondary);
+  border-radius: 3px;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+}
+</style>